こんにちは！
前回こんな記事を書きました↓
本記事は『Pythonでレトロゲームを作ろう！』シリーズの”Day2”です！
【Day 2】Pyxelでレトロゲームを作ろう！
今回は猫を動かすよー
マウスで猫を操作してみた！#Pyxel 楽しい！！ pic.twitter.com/qu4PxokpBr
— はやぶさ (@Cpp_Learning) December 8, 2018
今回はマウスの動きに連動して猫が動くようにしてみました！
何がツボに入ったのか、笑い転げる”くるる”ちゃんが今日も可愛い(*･ω･)ﾉ♪
【Pyxel】マウス操作
Pyxelでマウスを扱うのは、とても簡単です！
”day 1”で作成したソースコードに14行目のコード追加するだけでマウスの矢印を表示させることができます！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import pyxel WINDOW_H = 120 WINDOW_W = 160 CAT_H = 16 CAT_W = 16 class App: def __init__(self): pyxel.init(WINDOW_W, WINDOW_H, caption="Hello Pyxel") pyxel.image(0).load(0, 0, "assets/pyxel_logo_38x16.png") pyxel.image(1).load(0, 0, "assets/cat_16x16.png") pyxel.mouse(True) # pyxel.mouse(False) pyxel.run(self.update, self.draw) def update(self): if pyxel.btnp(pyxel.KEY_Q): pyxel.quit() def draw(self): pyxel.cls(0) # pyxel.text(55, 41, "Hello, Pyxel!", pyxel.frame_count % 16) pyxel.blt(60, 65, 0, 0, 0, 38, 16) pyxel.blt(75, 45, 1, 0, 0, CAT_W, CAT_H, 5) App() |
こんな感じ↓
14行目のコードの引数を”False”にすると矢印を非表示にできます。
ただ、何もコードを書かなくてもデフォルトで”False”になっているので…PyxelでAppを実行した時点でマウス操作ができます。
正解！
マウス操作で猫を動かす
Pyxelを使えば、マウスの座標を簡単に取得することができます。
・mouse_x, mouse_y
現在のマウスカーソル座標引用元：pyxel｜GitHub
なので、猫画像を（x,y）座標をマウス座標に変更するだけで、マウスの動きに連動して猫を動かすことができます！
ソースコードはこちら↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import pyxel WINDOW_H = 120 WINDOW_W = 160 CAT_H = 16 CAT_W = 16 class App: def __init__(self): self.IMG_ID0 = 0 self.IMG_ID1 = 1 # self.IMG_ID2 = 2 self.IMG_ID0_X = 60 self.IMG_ID0_Y = 65 pyxel.init(WINDOW_W, WINDOW_H, caption="Cat Game") pyxel.image(self.IMG_ID0).load(0, 0, "assets/pyxel_logo_38x16.png") pyxel.image(self.IMG_ID1).load(0, 0, "assets/cat_16x16.png") # pyxel.mouse(False) pyxel.run(self.update, self.draw) def update(self): if pyxel.btnp(pyxel.KEY_Q): pyxel.quit() def draw(self): pyxel.cls(0) pyxel.text(55, 40, "Are you Kururu?", pyxel.frame_count % 16) pyxel.blt(self.IMG_ID0_X, self.IMG_ID0_Y, self.IMG_ID0, 0, 0, 38, 16) self.cat() def cat(self): x = pyxel.mouse_x y = pyxel.mouse_y if pyxel.btn(pyxel.MOUSE_LEFT_BUTTON): pyxel.blt(x, y, self.IMG_ID1, 0, 0, -CAT_W, CAT_H, 5) else: pyxel.blt(x, y, self.IMG_ID1, 0, 0, CAT_W, CAT_H, 5) App() |
基本的には”day 1”で作成したソースコードにcat関数を追加しただけです。（本質ではない細かい変更については説明を割愛します。）
・btn(key)
keyが押されていたらTrue、押されていなければFalseを返す ( キー定義リスト）引用元：pyxel｜GitHub
キー定義リストの一部は以下の通り↓
マウスの左クリックボタンは”MOUSE_LEFT_BUTTON”と定義してあります。
なので、ソースコード39行目でマウスの左クリックが押されたかを判断し、「押された」＝「True」のとき猫が向きを変えます。
|
1 2 3 4 |
if pyxel.btn(pyxel.MOUSE_LEFT_BUTTON): pyxel.blt(x, y, self.IMG_ID1, 0, 0, -CAT_W, CAT_H, 5) else: pyxel.blt(x, y, self.IMG_ID1, 0, 0, CAT_W, CAT_H, 5) |
ついでに説明するとupdata関数に書かれたコードはキーボードの”Q”が押されたかを判断し、「押された」＝「True」のときpyxelアプリを終了させます。
引用元：pyxel｜GitHub
pyxelで”キー入力用コード”を作成するフローは以下の通りだよ！
【Pyxelの”キー入力用コード”作成フロー】
- どの条件で何をしたいか考える
- キー入力用の”API”が用意してあるので、好みの入力方法を採用
- マウスやキーボードの”入力キー”が用意してあるので、キー定義リストを参照し、使いたい”キーの定義（名前）”を確認
❶を考えるときに悩む人がいるけど…
”くるる”ちゃんみたいにラフに考えて良いと思うよ(*･ω･)ﾉ♪
ソフトの作成方法って色々あるけど、思いついたアイデアをどんどん実装して、アイデアを膨らませながらブラッシュアップするのも１つの手だよー
- Pyxelに限らず、APIリファレンスを確認しましょう。
- Pyxelではインターフェース（マウスやキーボード）を簡単に扱えます。
クラス化しなくて良いの？
うーん。。
好みもありますが、個人的にクラス化した方が良いと思います。
なので…次回は【catクラス】を考えてみましょう！
クラス可するメリットなんかも説明するね(*･ω･)ﾉ♪
おわりに
『Pythonでレトロゲームを作ろう！Day 2-マウス操作-』について説明しました。
キーボード入力についても簡単に説明したので、正確には-インターフェース入力-が正しいサブタイトルかな（？）
ゲーム開発（pyxelの使い方）を題材にして、楽しくプログラミングの勉強ができると良いなーとか考えながら、シリーズ記事を書いています。
本記事がシリーズの”Day2”で「猫（好きなキャラ）をマウスで操作する方法」についてでした。
次回は猫をクラス化して、柔軟なソースコードの作り方を説明するよー
本記事楽しかったかな？次回もお楽しみに～
