【Pyxel】Pythonでレトロゲームを作ろう！ Day 2 -マウス操作-

https://cpp-learning.com/pyxel_mouse/

【Pyxel】Pythonでレトロゲームを作ろう！ Day 2 -マウス操作-｜はやぶさの技術ノート

こんにちは！ [chat face="hukidashi.png" name="くるる" align="left" bo

cpp-learning.com

​

​

​

はやぶさ@Cpp_Learning マウスで猫を操作してみた！#Pyxel 楽しい！！ 9 13:36 - 2018年12月8日 Twitter広告の情報とプライバシー はやぶささんの他のツイートを見る

くるる

おぉ～どうやって猫を動かしてるの？

今回はマウスの動きに連動して猫が動くようにしてみました！

くるる

マウスが猫を動かす…ワロタ！

何がツボに入ったのか、笑い転げる”くるる”ちゃんが今日も可愛い(*･ω･)ﾉ♪

【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を実行した時点でマウス操作ができます。

くるる

じゃあコードを何も書かなくてもマウス操作ができて、矢印を表示させたい場合には14行目の”True”コードを書けば良いね！

正解！

マウス操作で猫を動かす

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関数を追加しただけです。（本質ではない細かい変更については説明を割愛します。）

くるる

数行のコードを追加するだけで、好きなキャラをマウスで操作できるのか…pyxelすごい♪

くるる

ん？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)

---

くるる

マウスのクリック入力まで！はやぶさ先生すごい♪

はやぶさ

いやいや。スゴイのはpyxelだよ！マウスを簡単に扱えるからねー

くるる

はやぶさ先生よりpyxelの方がすごい♪

ついでに説明するとupdata関数に書かれたコードはキーボードの”Q”が押されたかを判断し、「押された」＝「True」のときpyxelアプリを終了させます。

くるる

”btn”と”btnp”て何が違うの？

はやぶさ

APIリファレンスに書いてあるよー

引用元：pyxel｜GitHub

pyxelで”キー入力用コード”を作成するフローは以下の通りだよ！

【Pyxelの”キー入力用コード”作成フロー】 どの条件で何をしたいか考える キー入力用の”API”が用意してあるので、好みの入力方法を採用 マウスやキーボードの”入力キー”が用意してあるので、キー定義リストを参照し、使いたい”キーの定義（名前）”を確認

❶を考えるときに悩む人がいるけど…

くるる

シューティングゲームみたいに”キー入力で攻撃”できるようにしたいなー

”くるる”ちゃんみたいにラフに考えて良いと思うよ(*･ω･)ﾉ♪

ソフトの作成方法って色々あるけど、思いついたアイデアをどんどん実装して、アイデアを膨らませながらブラッシュアップするのも１つの手だよー

はやぶさ

あまり悩まず楽しくプログラミングしてほしいなぁ

くるる

はーい♪どんどん手を動かしながら楽しくゲーム作りまーす

Pyxelに限らず、APIリファレンスを確認しましょう。 Pyxelではインターフェース（マウスやキーボード）を簡単に扱えます。

クラス化しなくて良いの？

---

うーん。。

くるる

猫ってオブジェクトだよね？

くるる

以下の記事では、オブジェクトからクラスを考えたけど…今回はしなくて良いのかな？

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

はやぶさ

良い質問だね！

好みもありますが、個人的にクラス化した方が良いと思います。

なので…次回は【catクラス】を考えてみましょう！

クラス可するメリットなんかも説明するね(*･ω･)ﾉ♪

くるる

楽しみ！次回はよー

スポンサーリンク

おわりに

---

『Pythonでレトロゲームを作ろう！Day 2-マウス操作-』について説明しました。

キーボード入力についても簡単に説明したので、正確には-インターフェース入力-が正しいサブタイトルかな（？）

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

本記事がシリーズの”Day2”で「猫（好きなキャラ）をマウスで操作する方法」についてでした。

くるる

動きがあるとゲームっぽくて楽しいね！

次回は猫をクラス化して、柔軟なソースコードの作り方を説明するよー

本記事楽しかったかな？次回もお楽しみに～