ゲーム開発

【Pyxel】Pythonでレトロゲームを作ろう! Day 4 -ベクトル-

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

こんにちは!

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

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

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

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

くるる
くるる
ついに”Day4”までキタ━━━!
はやぶさ
はやぶさ
今日も楽しく勉強しましょう!

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

”Day3”で作成したソースコードでは、常に猫が同じ方向を向いていました。

Pyxelで猫を操作   Pyxelで猫を操作

“Day2″でマウスの左クリックで方向転換するコードも書きましたが…

マウスの移動方向に応じて猫が向きを変える方が”可愛い”よね!!

くるる
くるる
めっちゃ可愛い!!
くるる
くるる
早くソースコードの作り方教えて!ワクワク

この前よりテンション高めの”くるる”ちゃんが今日も可愛い(*・ω・)ノ♪

ベクトルとは

”ベクトル”の知識があるとソースコードを理解しやすいと思うので、少しだけ”ベクトル”の説明をします。

”ベクトル”とは「向きと大きさをもつ量」のことで、矢印で表現することが多いです。

例えば、A点からB点までの移動を矢印(ベクトル)で表現した図が↓です。

Pyxelとベクトル

矢印なので、”向き”があるのは分かると思います。”大きさ”は矢印の長さで表現できます。

”Day1”で「画像と座標の関係」について説明しています。

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

(忘れてしまった or まだ読んでいないという人は先に読んでほしいなぁー)

くるる
くるる
画像の原点は左上だったよね!”くるる”は覚えてるよー

A点とB点も画像上の点なので、座標で表現できます。

Pyxelとベクトル

今回はA点(Xa, Ya), B点(Xb, Yb)と定義します。

A点からB点に移動するということは…

  • x軸方向:A点から Xb – Xa だけ移動する
  • y軸方向:A点から Yb – Ya だけ移動する

という意味です。

ベクトルの”大きさ”は絶対値を付けて|Xb – Xa|で表現しますが…本記事では、正負を意識してほしいので、あえて絶対値をつけません。

x軸方向で考えたとき、B点がA点より右側にある場合、Xb – Xa > 0となります。

間違えやすいのはy軸方向で、B点がA点より上側にある場合、Yb – Ya < 0となります。

Pyxelとベクトル

↑の図で『A点とB点の位置関係と正負の関係』を確認してみて下さい。

もう”ピン”ときた人もいるかな?

  • Xb – Xa > 0 (正)なら猫を右向き
  • Xb – Xa < 0 (負)なら猫を左向き

にすれば良いよね(*・ω・)ノ♪

”ベクトル”について、もっと勉強したいという人のために、以下の記事を紹介しておきます。

また、機械学習を学ぶ上でも”ベクトル”などの数学の知識が必要です。

機械学習を意識して”ベクトル”を勉強したいという人には、以下の記事を紹介しておきます。

Pyxelとベクトル

ふわぁーー💤という大きな欠伸が聞こえてきた。

くるる
くるる
数学の話は眠くなっちゃうね💤
はやぶさ
はやぶさ
分かった!じゃあ今度はソースコードを見ながらゲーム作りを意識して説明するね!
くるる
くるる
目覚めたわ!

大きい”くるる”ちゃんの目が、更に大きく”カッ”と開いた!

”やる気スイッチ”入りました!笑

【復習】猫の座標とマウスの座標

Day3で作ったソースコードは以下の通りでした。

猫の座標は以下の通り…

マウスの座標は以下の通りでしたね!

猫と座標をA点, マウスの座標をB点としたときの図が以下です。

Pyxelとベクトル

update関数に書いた以下のコードで猫をマウスに追従させることができました。

より正確にいえば、猫の座標マウスの座標更新することで、猫をマウスの動きに連動させていました。

Pyxelとベクトル
くるる
くるる
この内容は”Day1~3”までの復習だね!

技術や知識の積み重ねが大事です!

猫の向きについて

次に猫が『どちらの”方向”に移動するか?』を考えてみます。

今回は猫が「右向きか?左向きか?」のみを考えれば良い…つまり、「x軸方向」のみ考えれば良いです。

Pyxelとベクトル

このときの”dx”を算出し「正か?負か?」によって、猫の向きを決めることができます。

Pyxelとベクトル
くるる
くるる
おぉ~数学の話は眠かったけど、ゲームの話は面白い♪
はやぶさ
はやぶさ
同じ”ベクトル”の話なのに、ゲームと関連させるとワクワクするね

苦手な分野(今回の場合は数学)でも自分の好きな分野(ゲームなど)に落とし込めば、学ぶのが楽しくなるかも!

【実践】猫の向きとマウスの向きを連動

さてと…

はやぶさ
はやぶさ
ここまで説明したら、”くるる”ちゃんソースコード書けるかな?
くるる
くるる
やって”みるる”!!

【catクラス】

catクラスの属性に”猫の向き(vec)”を追記したよ!

あとupdate関数で、座標だけじゃなくて”猫の向き(vec)”も更新できるようにした!

【update関数(Appクラス)】

コメントの”ctrl cat”以下を追記したよ!

  • dxが0以外 ⇒ マウスが動いている ⇒ 猫の座標をマウスの座標に更新!
  • dxが0 ⇒ マウスが動いていない ⇒ そのまま猫の座標を更新!

【draw関数(Appクラス)】

これも”ctrl cat”以下を追記したよ!

くるる
くるる
どうかな?

……!!

はやぶさ
はやぶさ
すごいよ!”くるる”ちゃん!!大正解だよ!

ただ、少しだけ直すなら…

あまり無いかもしれないけど、x軸方向を一切移動させずにy軸方向のみ移動させる場合を考慮して、こんな感じにした方が良かったね(*・ω・)ノ♪

  • dxが0以外 ⇒ マウスが動いている ⇒ 猫の座標と向きを更新
  • (dxが0)dyが0以外 ⇒ マウスが真上or真下に移動 ⇒ 猫の座標のみ更新
  • dxが0 ⇒ マウスが動いていない ⇒ そのまま猫の座標を更新!
  • dx,dxがともに0 ⇒ マウスが動いていない ⇒ 更新不要(何もしない)
くるる
くるる
なるほど!でも他は問題ないみたい!
はやぶさ
はやぶさ
そうだね!”くるる”ちゃん成長したね!
くるる
くるる
『はやぶさの技術ノート』で勉強してるからね♪
くるる
くるる
今日からプログラムちょっとできるって言っちゃおうかな~

調子にノリノリな”くるる”ちゃんが楽しそうで嬉しい!笑

”数学の知識”がゲームやロボットなど”目に見える形”になると楽しいよね!本記事をきっかけに『”数学”や”プログラミング”って面白い!』というのが少しでも伝わると嬉しいな(*・ω・)ノ♪

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

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

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

おわりに

『Pythonでレトロゲームを作ろう!Day 4-ベクトル-』について説明しました。

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

今回はゲームを題材にして、数学の基礎”ベクトル”を勉強しました。

”くるる”ちゃんみたいに途中で眠くなった人もいるのかな?

くるる
くるる
後半に覚醒しました!キリッ

はい!笑 ”くるる”ちゃんみたいに後半からでも覚醒し、最後まで読んで「楽しかったぁ~」と感じて頂ければ、嬉しいです!

さてと…次は何をしようかな?

くるる
くるる
もちろん次はコレでしょ↓

くるる
くるる
ロックマンみたいでカッコイイ!
はやぶさ
はやぶさ
じゃあ次回は猫がボールを投げれるようにしようね!
くるる
くるる
わーい♪次から次へと新しいことを学べて嬉しい!

”くるる”ちゃん…実はDay1~Day4で得た知識だけで多くのことができるよ!

次回説明する”猫がボールを投げる”も今まで説明した知識でソースコードを書けると思うよ!

くるる
くるる
なんと!つまり…

繰り返す!技術や知識の積み重ねが大事です!

はやぶさ
はやぶさ
そういうことです!笑

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

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

フクロウのLINEスタンプ

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

「フクロウのくるる」が

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

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

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

今すぐお迎えする

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