最近、Pyxelに入門しました。入門して環境構築をやってみたのが、前回の記事です。
uuc1h.hatenablog.jp
入門したからには、Pyxelをこれから学んでいこうと思います。
何か新しい技術を学ぼうとしたとき、これまで自分は書籍、Udemyなどの動画、体系的にまとめられたサイトなどを頼っていました。
ですがPyxelに関しては、基本的に公式リファレンスを頼りに学んでいこうと思います。
書籍や動画、サイトなどで勉強すると、それらを「終わらせる」ことが目的になってしまうことがありますからね。
github.com
リファレンスが充実しているし、翻訳ではない日本語なので読みやすいし、公式なので情報が最新というメリットだらけなので。
具体的には
- サンプルを実行して挙動を確認
- APIリファレンスを頼りに、サンプルのコードを確認
- サンプルから得た知識で、自分でコードを書いてみる
というのを繰り返します。
まず確認したサンプルは「01_hello_pyxel.py」です。
https://kitao.github.io/pyxel/wasm/examples/01_hello_pyxel.html
画面を表示させ、そこに画像と文字を表示させるというシンプルなアプリケーションですね。
ここでは、init関数、run関数、update関数、draw関数の挙動を確認できました。
次に確認したサンプルは「02_jump_game.py」です。
https://kitao.github.io/pyxel/wasm/examples/02_jump_game.html
普通に楽しいアクションゲームで、ドット絵もきれいで音楽もいい感じです。
なのにソースコードは130行くらいなので、驚きました。
ここでソースコードを確認する前に、ドット絵や音楽はどうなっているんだろうという方が気になりました。
PyxelにはPyxel Editorというツールが用意されていて、Pyxel Editorを使えばドット絵、音楽が作成できます。
起動コマンドは、これです。
pyxel edit リソースファイル名
自分が確認したいリソースファイルはassetsフォルダ配下にあるjump_game.pyxresなので、起動コマンドはこのようになります。
pyxel edit assets/jump_game.pyxres
無事に中身を確認できました。
サンプルのアセットまで確認できるのはいいですね。Pyxel Editorも色々できそうなので、ちょっとずつ使っていきます。
では、ソースコードの確認を行います。
大きくわけると、__init__関数、update関数、update_player関数、update_floor関数、update_fruit関数、draw関数のみで構成されています。
めちゃめちゃシンプルですね。
そして、このサンプルから学べる要素を自分なりにピックアップしました。
- プレイヤーをキーボードで操作する。
- フルーツと床をランダムに表示し、ゲームのフレームごとに移動する。
- フルーツに触れたら、スコアする。
- フルーツ、床に触れたら、プレイヤーはジャンプする。
- プレイヤーが画面下に落下したらスコアをリセットし、プレイヤーを再表示する。
と、こんなところでしょうか。
今回は「プレイヤーをキーボードで操作する」という点に集中し、コードを書いてみました。
class App: def __init__(self): # 画面サイズ設定 pyxel.init(SCREEN_WIDTH, SCREEN_HEIGHT, title="First Game") # asset読み込み pyxel.load("assets/jump_game.pyxres") # 各変数定義 self.player_x = SCREEN_WIDTH / 2 - 8 self.player_y = SCREEN_HEIGHT / 2 -8 # Pyxelアプリケーション開始、フレーム更新時にupdate関数、描画時にdraw関数を呼び出す pyxel.run(self.update, self.draw) def update(self): # Qキーを押せばPyxelアプリケーション終了 if pyxel.btnp(pyxel.KEY_Q): pyxel.quit() # Playerの挙動 self.update_player() def update_player(self): if pyxel.btn(pyxel.KEY_LEFT): self.player_x = self.player_x - 0.5 if pyxel.btn(pyxel.KEY_RIGHT): self.player_x = self.player_x + 0.5 def draw(self): # 背景色指定 pyxel.cls(0) # 人物表示 pyxel.blt(self.player_x, self.player_y, 0, 0, 0, 16, 16) App()
アプリケーションを開始すると画像が画面中央に表示され、キーボードの←→キーで画像が左右に移動するというもの。
サンプルとリファレンスを見れば、これくらいさっと書けるのがいいですね。
長くなってきたので、今日はこのへんで終わりです。
次回も、サンプル「02_jump_game.py」の分析を行います。
