ゲーム開発

【Pyxel】Pythonでレトロゲームを作ろう! Day 5 -ショット攻撃-

Pyxelでレトロゲームを作る5

こんにちは!

くるる
くるる
人気フクロウの”くるる”@kururu_owl だよー
はやぶさ
はやぶさ
現役エンジニアの”はやぶさ”@Cpp_Learningです

前回こんな記事を書きました↓

Pyxelでレトロゲームを作る3
【Pyxel】Pythonでレトロゲームを作ろう! Day 4 -ベクトル-こんにちは! 前回こんな記事を書きました↓ https://cpp-learning.com/pyxel_c...

本記事は『Pythonでレトロゲームを作ろう!』シリーズの”Day5”です!

くるる
くるる
はっ!当初の予定では約一週間(Day5~8)で完結予定だったから…ひょっとして最終回!?
はやぶさ
はやぶさ
最後まで読めば分かるよー。今日も楽しく勉強しましょう!

【Day 5】Pyxelでレトロゲームを作ろう!

”Day4”で猫を自由自在にマウスで操作できるようになりました↓

Pyxelで猫を操作

これだけでも十分楽しいし、工夫次第でクリックゲームなどを作れます!

ただ…

くるる
くるる
ロックマンみたいなショット攻撃がしたい!

という”くるる”ちゃんの熱い要望に応えて作ってみました↓

はやぶさ
はやぶさ
ロックマン楽しいよねー

ただ、可愛い猫ちゃんが”ショット”っていうのは、少し穏やかじゃない気がしたので…

以降からは”ボールを投げる”という柔らかい表現を使いたいと思います!

くるる
くるる
ファンシーだにゃー

開発手順を説明する前に…

Day4記事の最後で説明した通り、Day1~Day4で得た知識だけで多くのことができます。

なので、時間に余裕のある人は”自力”で猫がボールを投げる動作を実装してみてほしい!

悩みながら手を動かすのが一番勉強になります!

はやぶさ
はやぶさ
いっぱい失敗して!いっぱい悩んで!楽しく学びましょう!

作り手によって、コードの書き方は様々です!

あなたが作ったソースコードとこれから”くるる”ちゃんが作るソースコードを見比べて…

このコードの書き方良いなぁ
この考え方参考になった!

というものがあれば、どんどん吸収して下さいね(*・ω・)ノ♪

くるる
くるる
(……はっ!”くるる”が作る流れになってる!!)

いっぱい失敗して!いっぱい悩んで!楽しく学びましょう!そして、本やネットなどから得られる知識をどんどん吸収しましょう!

スポンサーリンク

猫がボールを投げる動作を実装する

さてと…

はやぶさ
はやぶさ
”くるる”ちゃん準備はいいかい?
くるる
くるる
今こそ『はやぶさの技術ノート』で勉強した成果を見せるとき!
燃える”くるる”

”くるる”ちゃんが…燃えている!!

じゃあ、ここからは”くるる”ちゃん主体でお願いねー

くるる
くるる
おー!!

調査

以下の2つの記事に書いてあるけど、ゲームに限らずソフトを開発するときは、まず調査をするんだよね↓

OpenCVでカメラ・動画を扱う
【Python】OpenCVでカメラ・動画を扱うための『雛形ソースコード』開発手順書こんばんは。現役エンジニアの”はやぶさ”@Cpp_Learningです。 画像処理メインの研究・開発を楽しく実施しています。最近は...
ソフトウェア開発入門
【ソフトウェア開発入門チュートリアル】OpenCVとPythonで『物体追跡カメラ』を作るソフトウェア開発入門のチュートリアル記事を書きました。本記事では、OpenCVとPythonを使った『物体追跡カメラ』の開発を題材に、開発プロセス・設計・実装(コーディング)などのソフトウェア開発に関する知識を一通り学べる内容になっています。...
くるる
くるる
”ググって”開発予定のソースコードに近いサンプルソースが見つかると小躍りしたくなる♪
エグザイル”くるる”

ふふふっ!実は既に目星はついている!

以下の記事で”くるる”はショット攻撃をしたことがあるのだ!!ドヤァ

python(pygame)でゲームを作る
【Python】ゲームソフト開発を題材にしたオブジェクト指向入門ゲームソフト作成を題材にした「オブジェクト指向」の入門記事を書きました。オブジェクト図/クラス図の書き方や考え方のポイントも説明した実践的な内容になっています!ソフトウェア設計やソフトウェア開発を学びたい人にオススメの記事です!...

しかもソースコード開発は”はやぶさ先生”に丸投げしたから模範解答だと思うのよね(*・ω・)ノ♪

マネしよーっと♪

スポーツでプロの真似をしたことはありませんか?プログラミングもスポーツ同様に真似をすることで上達できますよ!ネット上にはプロの作った上質なソースコードがたくさん転がっています!感謝しつつ、マネさせて頂きましょう!

ボールのクラス化

ボールってオブジェクトだからクラス化できそう!

Day3で作った”猫クラス”をベースに情報を追記して”みるる”!

Pyxelでレトロゲームを作る3
【Pyxel】Pythonでレトロゲームを作ろう! Day 3 -クラス化-こんにちは! 前回こんな記事を書きました↓ https://cpp-learning.com/pyxel_m...

拡張性を考えて、色や大きさの違うボールも投げれるような設計にしたいなぁ↓

まずは、色と大きさの違うボール画像を大量に準備して、それを実体化するクラスを作れば…

はやぶさ
はやぶさ
”くるる”ちゃん!大事なこと忘れてない?

そうだった!Day1に書いてあるけど…

Pyxelでレトロゲームを作る
【Pyxel】Pythonでレトロゲームを作ろう! Day 1 -画像の扱い方-こんにちは! 前回こんな記事を書きました↓ https://cpp-learning.com/object-...

画像は0~2しか挿入できないんだった!

・blt(x, y, img, u, v, w, h, [colkey])
イメージバンクimg(0-2) の (u, v) からサイズ (w, h) の領域を (x, y) にコピーする。w、hそれぞれに負の値を設定すると水平、垂直方向に反転する。colkeyに色を指定すると透明色として扱われる

引用元:pyxel|GitHub

困った…ん?そういえばDay2記事のポイントで…

【ポイント】Pyxelに限らず、APIリファレンスを確認しましょう。
Pyxelでレトロゲームを作る2
【Pyxel】Pythonでレトロゲームを作ろう! Day 2 -マウス操作-こんにちは! 前回こんな記事を書きました↓ https://cpp-learning.com/pyxel_d...

って書いてあった!APIリファレンスに何かヒントが…あった!!

・circ(x, y, r, col)
半径r、色colの円を (x, y) に描画する

引用元:pyxel|GitHub

円などの幾何学図形を書くためのAPIリファレンスが準備されてる!

くるる
くるる
pyxelすごい♪

じゃあ画像の情報は無しで、猫クラスをベースに色/サイズ、あと拡張性も考えて球速の情報(属性)も追加して…

ボールクラスをこんな感じにしてみたよ↓

update関数については、まだ悩んでるけど…球速以外は全て更新できるようにした!

インスタンス生成 -失敗編-

次はボールクラス(設計図)からインスタンス生成(実体化)するよー

Day3記事で猫クラスから3匹の猫を実体化させたことあるし、簡単だね!

ボール100個くらい準備しとけば良いよね(18行目~)

はやぶさ
はやぶさ
本当に~?
くるる
くるる
うーん。。はやぶさ先生にそう言われると何だか足りない気がしてきた!5億個準備するよ

……

”くるる”ちゃんはボール”966″個分のコードを書いた時点で…飽きて座り込んでしまった!

GAME OVER!?

はやぶさ
はやぶさ
諦めないで!”くるる”ちゃん!!今から柔軟に複数のインスタンスを生成する方法を教えるよー
くるる
くるる
よろー

”くるる~”って振り返る”くるる”ちゃんが今日も可愛い(*・ω・)ノ♪

ここからは、私(はやぶさ)主体に戻します。

インスタンス生成 -成功編-

”くるる”ちゃんのように複数のインスタンスを予め用意するコードも正解です!

しかし、インスタンスをいくつ用意すれば十分なのか?が不明確な場合、”くるるちゃん”のように必要以上のインスタンスを準備することになり…疲れます!爆

今回の場合は、ユーザーがマウスクリックした時にインスタンス生成するようにします!

実はリストってインスタンスも格納できます↑(17行目)

なので入れ物だけ用意しておいて…

左のマウスクリックが押されたときにインスタンスを生成(7行目)

生成したインスタンスはリストに追加していけばOK!(16行目)

こうすれば、ユーザーがクリックした分だけボールを実体化できます。

くるる
くるる
この書き方なら、柔軟にインスタンス数を調整できるね!So cool!
はやぶさ
はやぶさ
(So cool!って何のアニメの影響だろう…?)
くるる
くるる
実体化したボールの初期位置はどこなの?

左クリックが押されたとき、猫の前方でボールを実体化するようにしました。

猫の座標

最初に各座標を確認してみて下さい↓

【各座標について】

  • 猫の座標(mcat.pos.x, mcat.pos.y)
  • 猫画像の幅(CAT_W)= 16,  猫画像の高さ(CAT_H)= 16
  • 猫画像の中心座標(mcat.pos.x + CAT_W/2, mcat.pos.y + CAT_H/2)
ボールの初期位置

【ボールの初期座標】

  • 猫が右向きのときは、猫の中心座標から+6pixelがボールの初期位置
  • 猫が左向きのときは、猫の中心座標から-6pixelがボールの初期位置
くるる
くるる
猫の向きでボールの初期位置を変えてるんだね!拘りを感じる!笑
はやぶさ
はやぶさ
ゲーム作ってたら楽しくなっちゃって…笑

インスタンスの破棄

”くるる”ちゃん問題です!

はやぶさ
はやぶさ
ユーザーがクリック連打で大量のボールを実体化したときに発生する問題とは?
くるる
くるる
”966”個のボールを生成したところで疲れて寝る!

それは”くるる”ちゃんのことだよね…?笑

正解は「メモリがパンクする恐れがある!」でしたー

なので、ボールが何かと衝突したら消滅…つまりインスタンスを破棄しましょう!

くるる
くるる
何かって?
はやぶさ
はやぶさ
敵キャラとか画面端とかね!

とりあえず、今回はボールが画面端に衝突したらインスタンスを破棄させます。

ボールが飛ぶ

次に「投げたボールが飛んでいく」について簡単に説明します。

前回までの「猫をマウスで動かす」や今まで説明してきた「左クリックでボールを投げる」は、ユーザが制御しています。

しかし、「投げたボールが飛んでいく」というのはユーザが関与しない動作です。

つまり、猫の手を離れたボールはユーザーが制御することなく”勝手に”前方に飛んでいけば良いのです。

以上の「インスタンスの破棄」「ボールが飛ぶ」を実装したコードが↓です。

くるる
くるる
なんとなく分かる!けど解説がほしいー
はやぶさ
はやぶさ
簡易フローを確認しようねー

【ボールを投げる処理の簡易フロー】

  1. ボール数をカウント(1行目)
  2. ボールが画面内に存在するか確認(3行目)
  3. ボールが画面内に存在する場合は飛ぶ向きを考慮してx座標を更新する※(5~12行目)
  4. ボールが画面外に存在する場合はインスタンスを破棄(14行目)
  5. ②~④を全ボールが消滅するまで繰り返す

※正確には拡張性を考慮してx座標以外も更新しています(ボールclass参照)

くるる
くるる
完全に理解した!あとは”くるる”がコード書くよー

最終的に完成したソースコード

最終的に”くるる”ちゃんが完成させたコードはこちらです↓

くるる
くるる
ボールの描画(112行目)で少し悩んだけど、完成したよー
はやぶさ
はやぶさ
大変良くできました👍

おわりに

『Pythonでレトロゲームを作ろう!Day 5-ショット攻撃-』について説明しました。

ゲーム開発(pyxelの使い方)を題材にして、楽しくプログラミングの勉強ができると良いなーとか考えながら、シリーズ記事を書いています。

今回は”ショット攻撃”を題材に、以下のことを学んでほしいと思って書きました。

  • 柔軟に複数インスタンスを生成する方法
  • インスタンスの破棄
  • 座標(ボールなど)の自動更新
くるる
くるる
複数インスタンスの生成で失敗しちゃった!本記事で学んだ柔軟なインスタンス生成のコード忘れないよ!
はやぶさ
はやぶさ
いっぱい失敗して、成長しようね!
くるる
くるる
おー!
はやぶさ
はやぶさ
本記事を読んでくれた人は勉強になったかな?
くるる
くるる
”くるる”みたい失敗しちゃった人いる?大丈夫だよ!
くるる
くるる
ここだけの話だけど、”はやぶさ先生”も失敗しながら成長してるからね!駆け出しエンジニア”くるる”と一緒にこれからも頑張ろー♪

(完…?)

おまけ -本シリーズ続けます-

ぐすん…

くるる
くるる
本シリーズがついに終わってしまった…
くるる

すごい楽しかったよー(´;ω;`)

はやぶさ
はやぶさ
”くるる”ちゃん泣き止んで!

『本シリーズもう少しだけ続けます!』

当初の予定では、人気がなければ5dayを待たずに打ち切る予定でした。続けても5dayで完結する簡単なクリックゲームにする予定でしたが…

意外と好評なので、もう少し続けることにしました!

くるる
くるる
嬉し過ぎて踊りたい気分♪次回は何をするの?
はやぶさ
はやぶさ
ショット攻撃ができるようになったし、敵キャラに向かって撃ってみたいよね?
くるる
くるる
楽しそう!次回はよー

本記事楽しかったかな?次回もお楽しみに~

Python+ゲーム関連の本(Pyxelの本は2018/12/28時点では存在しません)
LINEスタンプ配信中!

フクロウのLINEスタンプ

当サイトのマスコットキャラクター

「フクロウのくるる」が

LINEスタンプになりました!

勉強で疲れたあなたに癒しをお届け☆

お迎え待ってます(*・ω・)ノ♪

今すぐお迎えする

40個セットがたったの50コインとお得です