ゲーム開発

【Pyxel】Pythonでレトロゲームを作ろう! Day 6 -当たり判定-

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

こんにちは!

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

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

Pyxelでレトロゲームを作る5
【Pyxel】Pythonでレトロゲームを作ろう! Day 5 -ショット攻撃-こんにちは! 前回こんな記事を書きました↓ https://cpp-learning.com/pyxel_v...

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

【シリーズ構成】

  • Day1~Day4:基礎編
  • Day5~:応用編
くるる
くるる
前回から応用編なので、内容は難しいけど…丁寧な解説があるから駆け出しエンジニアの”くるる”でも楽しく勉強できてるよー
はやぶさ
はやぶさ
今日も楽しく勉強しましょう!

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

Day5の記事でショット攻撃ができるようになりました!

なので…敵キャラに向かって撃ってみましょう!

くるる
くるる
ね・ら・い・う・ち♪

ノリノリの”くるる”ちゃんが今日も可愛い(*・ω・)ノ♪

敵キャラを倒す

「本記事を読むと、どんなソフトが作れるようになるか?」が気になると思うので、先にデモを見せちゃいますね!

それでは…

はやぶさ
はやぶさ
いけ!猫ちゃん!!ボールを投げて”ねずみ”を退治するんだ!

……そんなんじゃダメでしょ!!

くるる
くるる
これはゲームなんだよ!もっとノリノリでやらないと!!
はやぶさ
はやぶさ
じゃあ…”くるる”ちゃんお願い!!
くるる
くるる
くるる
いけ!ピカチュウ!!コラッタに十万ボルトだ!
当たり判定 当たり判定
くるる
くるる
小さな魔物を一匹残らず駆逐したぜ!

今日の”くるる”ちゃんは…なんかスゴイぞ!笑

要するに『ショット攻撃でねずみ(敵キャラ)を倒すゲーム』の作り方を本記事で説明していきます。

”くるる”ちゃんが色々と脚色してくれたけど…可愛い猫ちゃんが”ショット攻撃”というのは、少し穏やかじゃないので、以降からは”ボールを投げる”という柔らかい表現を使います!

Game Over!

ふふふ…

くるる
くるる
最強の猫ちゃんで”ねずみ”を1匹残らず退治するぞー
はやぶさ
はやぶさ
ん?最強じゃないよ?

ねずみに当たると【Game Over!】だよ

当たり判定
くるる
くるる
…!?”ねずみ”恐るべし!簡単には世界を救えないということか!
はやぶさ
はやぶさ
(…私も幼いころはノリノリでロックマンをプレイしてたな)

楽しく勉強しよー♪(by くるる)

当たり判定とは

ん?つまり今回は…

くるる
くるる
『”ねずみ”退治』『”ねずみ”に当たると【Game Over!】』の2つの処理を実装するの?

いやいや。どちらも『当たり判定』という処理で実現できるよー

はやぶさ
はやぶさ
”くるる”ちゃん『当たり判定』って知ってる?
くるる
くるる
知らなーい

一言で説明すると『オブジェクト同士が当たったか(衝突したか)どうかを判定する処理』のことです。

今回の場合は…

【当たり判定の例】

  1. ボールが”ねずみ”に当たったかを判定
  2. ”ねずみ”が猫に当たったかを判定

となります。

くるる
くるる
なるほど!確かにどちらも『当たり判定』だね

また、ゲームを面白くするために、当たり判定後のルールを以下のようにします。

【ルール】

  1. ボールが”ねずみ”に当たった:”ねずみ”を退治
  2. 猫が”ねずみ”に当たった:Game Over!

「”ねずみ”を退治」というのは「”ねずみ”のインスタンスを破棄する」という意味です。

インスタンスの破棄ってなんだっけ?

という人はDay5の記事を読んでほしいなぁ

Pyxelでレトロゲームを作る5
【Pyxel】Pythonでレトロゲームを作ろう! Day 5 -ショット攻撃-こんにちは! 前回こんな記事を書きました↓ https://cpp-learning.com/pyxel_v...
くるる
くるる
”くるる”はDay5で手を動かしてながら楽しくインスタンスを勉強したよ♪
  • 当たり判定:オブジェクト同士が当たったどうかを判定する処理
  • 手を動かして楽しくプログラミングを勉強しましょう!
スポンサーリンク

Pyxelと当たり判定

当たり判定…

くるる
くるる
なんだか難しそうだな…
はやぶさ
はやぶさ
まだDay1~Day4基礎編の内容は覚えてる?
くるる
くるる
それは覚えてるけど…基礎でしょ?

基礎が大事だよ!

【勉強の順番】

  1. 「基礎 ⇒ 応用」
  2. 「応用 ⇒ 基礎」

勉強の順番は①・②どちらでも問題ありません。
(本シリーズは①を採用しています)

ただし、やりたいことが増えてくると『”基礎”が身に付いていない⇒応用できない!』というシーンが必ず出てきます。

くるる
くるる
今の基礎が身についた”くるる”なら『当たり判定』も理解できる?
はやぶさ
はやぶさ
理解できる!『はやぶさの技術ノート』でInputした知識をアレンジしてOutputしてほしい!
くるる

無言の敬礼がカッコイイぞ”くるる”ちゃん!

勉強の”順番”や”方法”は好みもあるので、自分に合うスタイルでOKです!ただし、基礎は疎かにしてほしくないなぁ

当たり判定 -ボール💣敵キャラ編-

”くるる”ちゃん【画像の基礎】とは?

くるる
くるる
↓の通りだよね!これはDay1で勉強した♪

【画像の基礎】

  • 画像は画素(pixel)の集合体
  • 画素(pixel)の位置は座標で表現する
  • 座標の原点は、基本的に画像の左上
  • 画素はRGB成分を持っている(Pyxelの場合は16色)
  • 複数の画像を重ねる場合でも各画像が↑の性質をもつ
はやぶさ
はやぶさ
正解!

↑のポイントの内、特に画像における座標の知識が身についていると『当たり判定』を”スッと”理解できます!

敵キャラの座標は以下の通りです↓

Pyxelと当たり判定

『赤枠内の領域(座標)は全て敵キャラ』だと考えれば…

『赤枠にボールが触れた瞬間に当たり!』と判定すれば良いです↓

Pyxelと当たり判定

これを数式の落とし込むと…

【ボール💣敵キャラの当たり判定】

enemy.pos.x < ボールのx座標 < enemy.pos.x + ENEMY_W

かつ

enemy.pos.y < ボールのy座標 < enemy.pos.y + ENEMY_H

のとき”当たり”と判定する!

くるる
くるる
完全に理解した!じゃあソースコードはこんな感じでだね↓

正解!

ただし、それだとボール1つ 敵キャラ1匹にしか対応していないので、複数に対応できるようにします↓

くるる
くるる
そっか!”ねずみ”が1匹とは限らないもんね!
くるる
くるる
でもDay5のボールを投げるコードに似てるから理解できる!こんな感じのフローでしょ↓

【ボール💣敵キャラの当たり判定フロー】

  1. ボール数をカウント(1行目)
  2. 敵キャラ数をカウント(3行目)
  3. i番目のボールとj番目の敵キャラの当たり判定(5~8行目)
  4. ”当たり”なら敵キャラのインスタンス破棄(10行目)
  5. ②~⑤を繰り返す※

※1個目のボールと全ての敵キャラとの『当たり判定』
  ⇒2個目のボールと全ての敵キャラとの『当たり判定』
  ⇒…
 をボールが最後の1個になるまで繰り返します

大正解!

くるる
くるる
”はやぶさ先生”の丁寧な解説で『当たり判定』理解できた!
はやぶさ
はやぶさ
”くるる”ちゃんが基礎を習得しているから理解できたんだよ
くるる

一読で理解できた人は”くるる”ちゃんと一緒に”ドヤ顔”して下さい!笑

理解できなかった人…大丈夫です!【本シリーズの基礎編】をもう一度読み返してみて下さい!

今度は「応用 ⇒ 基礎」の順に学んでみましょう(*・ω・)ノ♪

  • オブジェクトの領域(座標)を意識する
  • 複数オブジェクトの当たり判定は for文 で書ける

当たり判定 -猫💣敵キャラ編-

続いて猫と敵キャラの『当たり判定』について説明します。

くるる
くるる
さっきと一緒でしょ!いきなりコード書いちゃえ↓

…おしい!本当におしい!!

確かに上記コードで以下のシーンの敵キャラが”当たっている”と判定できます。

Pyxelと当たり判定

しかし、以下の①~③の敵キャラは”当たっていない”と判定されます。

Pyxelと当たり判定

その理由は、判定条件が以下の通りだったからです。

敵キャラの左上座標が猫の領域(座標)に入ったか?』で”当たり判定”

左上座標のみではなく…

敵キャラの領域(座標)が猫の領域(座標)に入ったか?』で”当たり判定”

が正解です。

なお、実装するときは”領域内で真っ先に接触する座標”が当たったかどうか?』で判定すれば良いです。

今回の場合、猫より敵キャラの方が小さいので、”敵キャラ領域の四角形の頂点”で当たり判定ができます。

ゲーム次第では「前方からの攻撃をガード」や「ボスキャラの弱点部分(の座標)のみ攻撃が有効」などのルールがあります。しかし、今回は猫と”ねずみ”が当たれば【Game Over!】(接触箇所の制約なし)というルールでしたね。

以上を考慮した『当たり判定』のコードが以下です。

また失敗しちゃった。。

くるる
はやぶさ
はやぶさ
失敗すること自体は”恥”じゃないから、落ち込む必要ないよ!

むしろ挑戦した人しか失敗できないからね!失敗から何を学ぶかが重要だよ!!

涙を拭って、無言で敬礼する”くるる”ちゃん…カッコいいぞ!!

  • 繰り返す!オブジェクトの領域(座標)を意識する
  • 真っ先に触れる座標で当たり判定
  • 失敗は”恥”じゃない!失敗から何を学ぶかが重要です!!

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

”くるる”ちゃんは途中で投げ出さずに『当たり判定』のソフトを完成させました↓

はやぶさ
はやぶさ
大変良くできました👍

ねずみ画像(ドット絵)は下記サイトの”ミニマム動物アイコン”を使用しました。

アイコンが無料で使える素材サイトのピクセルガロー

おわりに

『Pythonでレトロゲームを作ろう!Day 6-当たり判定-』について説明しました。

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

今回はアクションゲームやシューティングゲームなどに使われる『当たり判定』について説明しました。

『当たり判定』の正解だけではなく…

  • どんな条件?
  • どんな数式?
  • なぜ上手くいかない?
  • どう改善すれば良い?

という『アルゴリズム』や『考え方(マインド)』まで伝わると嬉しいなぁ

くるる
くるる
本当に勉強になりました!

どういたしまして!

次回予告

『Day5 -ショット攻撃-』と本記事『Day6 -当たり判定-』のコードを組み合わせたり、カスタムすれば自分オリジナルのゲーム”を開発できます。

面白いレトロゲームを作って下さいね!

くるる
くるる
はやぶさ先生お願いがあります!!
くるる

そんなキラキラした瞳で見つめられたら断れない!笑

くるる
くるる
Day5のボール動作を参考に敵キャラを動かしてみたけど、単調な動きしかしないから…面白くない!
くるる
くるる
”ねずみ”が猫にこっそり近づいて攻撃する(Game Over!を狙う)を実装したいけど、上手くできない…

なるほど!でもそこはオリジナリティ…

くるる
はやぶさ
はやぶさ
分かった!じゃあこんなのどうかな↓
人工知能

自動追従マウス!!

くるる
くるる
すげー!!人工知能じゃん!!

人工知能とは、ちょっと違う気もするけど、プレイヤーが操作せずに自動でキャラが動いたら人工知能かな?

ちょっと正しい定義は分からないけど、本サイトでは”人工知能”と呼ぶことにします。

次回『Day7 -人工知能-』の記事を最後に本シリーズの最終回とさせて頂きます。

(最後に総集編(まとめ記事)も書く予定ですが、チュートリアルとしては次回が最終回です)

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

Python+ゲーム関連の本(Pyxelの本は2019/1/3時点では存在しません)

 

LINEスタンプ配信中!

フクロウのLINEスタンプ

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

「フクロウのくるる」が

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

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

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

今すぐお迎えする

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