Pygameでゲームプログラミングを楽しく学び、機械学習のきっかけ作り！


#"初めに"#

今回、Pythonの基礎を覚えたレベルで何か作ってみたいと思ったので、
Pygameで環境構築～ゲームプログラミング完了までを記事にしてみました！

#"そもそもpygameとは？"#

Pythonは文法がシンプルで、一つの実装に多くのコードを記載する必要がなく、
Pythonにはゲームライブラリ用として"pygame"が存在するので簡単にゲームプログラングを自作することが可能です！
あとは、先人の皆さんが残してくれた情報が多いので、ネットで検索して調べれば比較的作りやすいと思います。

###
#1. pygameの環境構築#
〇ツール情報

|必要なツール|Ver情報|詳細|
|:---:|:---:|:---:|
|Python|3.7.4|[Pythonインストール方法](https://techacademy.jp/magazine/15571)|  
|pygame|2.0.1|[pygameインストール方法](https://laboratory.kazuuu.net/python-newbie-installs-pygame-via-pip/)|
※Pythonは既にインストール済みとして進めていきます。

〇ディレクトリ階層
※各素材は参考資料にあるものをそのまま使用または自分で準備すること。
pygame(任意フォルダ)
├invadergame.py(実行ファイル)
├player.png(機体画像)
├enemy.png(敵画像)
├laser.wav(レーザー音)
├background(メイン音声)
└bullet.png(弾の画像)


・pygameのインストール
コマンドプロンプト上で、「pip install pygame」を入力して「Successfully～」が表示されればOK。
※WARNINGはpipアップグレードなので無視で問題なし
![pygame.install.png](https://media.geeksforgeeks.org/wp-content/uploads/20210415121952/WhatsAppImage20210415at121530PM.jpeg)

・pygameのモジュール入力
コマンドプロンプト上で「python」→「import pygame」を入力してerrorが出なければOK！！
![import_pygame](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F247638%2Fbb30d6ef-9553-6d32-8636-0bed4f884fd7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=b69595e0f0ea481be163ec2f0d4a851f)

###
#2. サンプルのpygameを動かしてみる#
まずは先人の方が残した素材とコードがあるので、どういったものかを確認してみました！
1度はやったことがあるブロック崩しのゲームで車を右左に操作しながら、ボールをブロックに当てて消すやつです。

[素材ダウンロード](https://pythonmemo.com/pygame/009#toc2)

![BLOCK-KUZUSHI-2021-06-24-16-18-49_Moment.jpg](https://pythonmemo.com/wp-content/uploads/2021/06/BLOCK-KUZUSHI-2021-06-24-16-18-49_Moment.jpg)

###
#3. pygameでインベーダーゲーム(環境構築～プログラミング完成)
今回は、Youtubeの動画で「【Pygame超入門】50分でゲーム開発（Python）の基礎をマスター」の解説動画を元に、インベーダーゲームのプログラミングを作成していこうと思います！

##3-1pygameの基礎
最初にimport pygameモジュールと下記の画面設定コードを記載する。
実行ファイル名「invadergame.py」を実行した際に、設定したスクリーン画面が表示されること。
〇画面設定(import)
![pygameの基礎_画面設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/ffc60b56-04a4-9b2a-a60f-9dc4e78634c0.png)
〇実行時(invadergame.py)
![画面設定表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/f0d629fa-7469-be7b-157c-662ec777f039.png)

スクリーン画面が起動できることを確認できたら、6行目にタイトル名変更と8行目以降に繰り返しの終了処理をいれていきます。
![title.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/834b03e6-94bf-1941-3032-6a2309e96646.png)

次の内容は「背景色」、「Player画像の設定と座標位置」の設定を下記の通り記載します。
9行目の画面読み込み「img」＝ 21行目の「pygame.display.update()」は読み込んだ画像を更新して表示させる為、SETで記載するようにして下さい。
11～12行目の(X.Y)座標の数値が画像を表示する位置となり、16行目のscreen.blitで座標指定した箇所に画像を表示します。
![player.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/39c20bfd-f313-1e0f-e0ec-8d8f4162f274.png)

下記の様に、指定したplayer画像が表示されればOK!
〇player画像
![player2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/af3c72ca-7304-8c35-2fe1-9d4cecacadeb.png)

次は「音声の表示」、「文字の表示」の設定を下記の通り記載します。
21行目に表示するメッセージを設定し、22行目に画面上に表示するメッセージの座標を指定します。
![message_font.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/abdf5d8c-2da0-ec6e-ea1b-0172d47988fc.png)
〇HelloWorld表示画面
![HelloWorld.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/b6d00fd1-16db-8bb5-275d-9af8a2cff4c2.png)

ここまでがPygameの基本となる設定方法になります。


##3-2プレイヤーの配置
ここからインベーダーゲームを作成していきます！
まずは、Pygameの基礎で説明した部分で不要なコード
「7行目:背景色、14行目:音声出力、22～24行目:フォント/メッセージ/blit関数」をコメントアウトする。
![inveders_byouga.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/eb8b13f8-3302-9cc0-f4a0-43777046f2c8.png)

新しくコードを下記の通り書き直します。
10行目～12行目:player操作
16行目～17行目:player座標設定
29行目～30行目:座標指定したplayer画像の描画を繰り返し右に表示する
ここまでできたら、ファイルを実行してみる。
〇player画像(右繰り返し描画)
![byouga.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/8e3698a8-dcb8-92a2-b3f4-87d24a3abae3.png)

右に描画が繰り返し表示されることを回避する為に、21行目に「screeen.fill～」黒描画を繰り返し反映することで1.5横軸でplayer画像が移動できます。
![x_zahyouidou.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/be9a6e39-7a92-99c3-e56e-a73ac85f0636.png)

次はplayer画像のカーソル操作について説明していくのでまずは27行目～35行目を記載する。
その後、スペースキー操作の部分は一旦コメントアウトすること。
![cursor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/9570c89d-b1d0-de00-3b0d-4880216c6e8b.png)

まずキー操作の値が今のままだと早すぎるので、K＿LEFT(-1.0)とK＿RIGHT(1.0)をに修正する。
その後、playerXカーソル処理を右左交互に処理されるように、41行目を「playerX += playerX_change」に修正する。
ここで、手からキーが離れる操作を考慮する為37行目～39行目のKEYUPを操作を追加。
最後にplayer画像が端に見切れないようifとElse文を追加してカーソル設定が完了。
〇player画像cursor操作確認(端移動)
![cursor_hashi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/727e66e2-8ef1-861f-960a-65514fda4ab5.png)

##3-3インベーダーの配置
過去に「#mixer.Sound～」を入力した部分を削除して「enemy処理」を記載していきます。
enemyを表示する際にランダムに表示させたいので、ランダム座標を設定する。
(※import randomを頭に追加するのを忘れないこと！)


〇インベーダー画像のrandom処理
16行目～20行目:Enemy表示をrandom処理
25行目～26行目:Enemy座標位置を設定
![importrandom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/e47961d8-c569-25ec-7297-f1bd393428b9.png)

57行目～69行目:enemy画像の左端右端にきたら下に移動するように処理
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/c390c47d-b7e7-d031-adf6-e1e16463ea8d.png)

〇インベーダー画像の実行画面
インベーダーがランダムで左右端に移動しながら、pleyar画像までくると終了されることを確認。
![enemy_random.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/8c7392c2-c557-00af-3855-ea5490e9ddf0.png)

##3-4スコアの表示
pythonの基礎で使用したfontの処理を追加することでscoreを左上の表示することができます。
〇scoreのフォント文字処理
50行目～56行目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/dcddf0ea-ad4b-ec1c-a91b-f1302c8728e9.png)
〇score表示画面
下記の実行画面の通り、左上にscore文字が表示されればOK!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/4922eb38-2b4b-73ac-96b6-f45a18e72c58.png)

##3-5メイン機能の実装(弾が当たると得点追加)
ここから、「Bullet」、「fire_bullet」、「isCollision」の追加と「スペースキーのコメントアウトを解除」を修正することでようやくインベーダーゲームの完成となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/517a5f48-ebce-4957-99d2-c565acb347cd.png)

〇Bullet画像処理
24行目～27行目:X,Y軸にplayer画像から弾が表示される基点を設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/77a0ab7b-7ec3-03d3-a54a-c7ab9ba06bf8.png)

〇Bulletの発射位置処理/enemyとBulletがぶつかる処理
36行目～39行目:弾が表示される処理
41行目～46行目:enemyとBulletのぶつかる処理(平方根)
※math処理が行われているので、「import math」を頭に入力するのを忘れないこと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/af7d964d-f0c6-00b0-7915-c17a037ae225.png)
〇スペースキーで弾を発射するコメントアウトを解除
62行目～65行目:コメントアウトを解除する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/232a4105-01d3-ea80-7ea3-c3a49d0c11c9.png)
〇Bulletをenemyが衝突した処理
98行目～105行目:Bulletをenemyが衝突した処理と
108行目～114行目:弾の補充
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/7f34362f-33ef-8b10-8cd2-b52d02fa5a1d.png)


###
#"今回使用した参考資料集"#
今回、pygameのQiita記事を作成するにあたり、参考にしたリンク集を下記に記載します。
・[【pygame】 ブロック崩しゲーム python | PYTHONのメモ帳](https://pythonmemo.com/pygame/009)
・[【Pygame超入門】50分でゲーム開発（Python） - YouTube](https://www.youtube.com/watch?v=fAJ_BjLd3Ro)