LoginSignup
1
3

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-08-26

"初めに"

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

"そもそもpygameとは?"

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

1. pygameの環境構築

〇ツール情報

必要なツール Ver情報 詳細
Python 3.7.4 Pythonインストール方法
pygame 2.0.1 pygameインストール方法

※Pythonは既にインストール済みとして進めていきます。

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

・pygameのインストール
コマンドプロンプト上で、「pip install pygame」を入力して「Successfully~」が表示されればOK。
※WARNINGはpipアップグレードなので無視で問題なし
pygame.install.png

・pygameのモジュール入力
コマンドプロンプト上で「python」→「import pygame」を入力してerrorが出なければOK!!
import_pygame

2. サンプルのpygameを動かしてみる

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

素材ダウンロード

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
〇実行時(invadergame.py)
画面設定表示.png

スクリーン画面が起動できることを確認できたら、6行目にタイトル名変更と8行目以降に繰り返しの終了処理をいれていきます。
title.png

次の内容は「背景色」、「Player画像の設定と座標位置」の設定を下記の通り記載します。
9行目の画面読み込み「img」= 21行目の「pygame.display.update()」は読み込んだ画像を更新して表示させる為、SETで記載するようにして下さい。
11~12行目の(X.Y)座標の数値が画像を表示する位置となり、16行目のscreen.blitで座標指定した箇所に画像を表示します。
player.png

下記の様に、指定したplayer画像が表示されればOK!
〇player画像
player2.png

次は「音声の表示」、「文字の表示」の設定を下記の通り記載します。
21行目に表示するメッセージを設定し、22行目に画面上に表示するメッセージの座標を指定します。
message_font.png
〇HelloWorld表示画面
HelloWorld.png

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

3-2プレイヤーの配置

ここからインベーダーゲームを作成していきます!
まずは、Pygameの基礎で説明した部分で不要なコード
「7行目:背景色、14行目:音声出力、22~24行目:フォント/メッセージ/blit関数」をコメントアウトする。
inveders_byouga.png

新しくコードを下記の通り書き直します。
10行目~12行目:player操作
16行目~17行目:player座標設定
29行目~30行目:座標指定したplayer画像の描画を繰り返し右に表示する
ここまでできたら、ファイルを実行してみる。
〇player画像(右繰り返し描画)
byouga.png

右に描画が繰り返し表示されることを回避する為に、21行目に「screeen.fill~」黒描画を繰り返し反映することで1.5横軸でplayer画像が移動できます。
x_zahyouidou.png

次はplayer画像のカーソル操作について説明していくのでまずは27行目~35行目を記載する。
その後、スペースキー操作の部分は一旦コメントアウトすること。
cursor.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

3-3インベーダーの配置

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

〇インベーダー画像のrandom処理
16行目~20行目:Enemy表示をrandom処理
25行目~26行目:Enemy座標位置を設定
importrandom.png

57行目~69行目:enemy画像の左端右端にきたら下に移動するように処理
image.png

〇インベーダー画像の実行画面
インベーダーがランダムで左右端に移動しながら、pleyar画像までくると終了されることを確認。
enemy_random.png

3-4スコアの表示

pythonの基礎で使用したfontの処理を追加することでscoreを左上の表示することができます。
〇scoreのフォント文字処理
50行目~56行目
image.png
〇score表示画面
下記の実行画面の通り、左上にscore文字が表示されればOK!
image.png

3-5メイン機能の実装(弾が当たると得点追加)

ここから、「Bullet」、「fire_bullet」、「isCollision」の追加と「スペースキーのコメントアウトを解除」を修正することでようやくインベーダーゲームの完成となります。
image.png

〇Bullet画像処理
24行目~27行目:X,Y軸にplayer画像から弾が表示される基点を設定
image.png

〇Bulletの発射位置処理/enemyとBulletがぶつかる処理
36行目~39行目:弾が表示される処理
41行目~46行目:enemyとBulletのぶつかる処理(平方根)
※math処理が行われているので、「import math」を頭に入力するのを忘れないこと。
image.png
〇スペースキーで弾を発射するコメントアウトを解除
62行目~65行目:コメントアウトを解除する
image.png
〇Bulletをenemyが衝突した処理
98行目~105行目:Bulletをenemyが衝突した処理と
108行目~114行目:弾の補充
image.png

"今回使用した参考資料集"

今回、pygameのQiita記事を作成するにあたり、参考にしたリンク集を下記に記載します。
【pygame】 ブロック崩しゲーム python | PYTHONのメモ帳
【Pygame超入門】50分でゲーム開発(Python) - YouTube

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3