Pyxel（ピクセル） Python向けレトロゲームエンジン
Pyxel は Python でゲームの作成に利用できるゲームエンジンです。Pyxel はオープンソースで公開されていて無料で使用することができます。
- Pyxel 公式サイト
pyxel/README.ja.md at main · kitao/pyxel · GitHub
- 開発者の方のブログ
- Pyxel紹介資料
PyCon JP 2020 発表資料『レトロゲームエンジン「Pyxel」でゲームプログラミングをはじめよう！』 - kitao's blog
2020年時点の発表資料とのことですが，スライドでPyxelの特徴やできることが紹介されています。
本記事ではゲーム作りを通してプログラミングの学習ができるように，Pyxelを使う準備と小さなプログラムを作成する手順を紹介します。Pythonのチュートリアルを学んだあとの次のステップとして何かプログラムを作りたい人向けの記事になります。
準備（Windows10環境での Pyxel のインストール手順）
※ Python3.7以上がインストールされていること
- Windowsのコマンドプロンプトを起動
＜コマンドプロンプトの起動方法＞
Windowsの検索ウィンドウ（スタートボタン横の虫眼鏡）にcmdを入力して，検索結果から「コマンドプロンプト」を選択
- コマンドプロンプトに「pip install -U pyxel」を入力
＜コマンドプロンプトの入力内容＞
※ C:\Users\xxxxx> の次が入力したコマンド（赤文字箇所）
C:\Users\xxxxx>pip list
Package Version
−--------- -------
pip 22.3
setuptools 63.2.0
C:\Users\xxxxx>pip install -U pyxel
Collecting pyxel
Using cached pyxel-1.8.22-cp37-abi3-win_amd64.whl (2.1 MB)
Installing collected packages: pyxel
Successfully installed pyxel-1.8.22
C:\Users\xxxxx>pip list
Package Version
−--------- -------
pip 22.3
pyxel 1.8.22
setuptools 63.2.0
（2023-01-16追記）pipコマンドが動かない場合は「Python pipが動作しない場合の対応 - 勉強ボックス管理者ブログ」を参照してください。
プログラムの作成
IDLEを使ってプログラムを作成します。例では game フォルダを作成してその中に各ファイルを作っています。
四角形を描画するプログラム
以下のソースコードを入力して実行してみましょう。
list01.py
import pyxel pyxel.init(80,64) pyxel.cls(1) pyxel.rect( 5, 5, 16,16, 2) pyxel.show()
実行結果
・ import pyxel
ゲームエンジン Pyxel を使用するための文です。
・ pyxel.init(width, height)
ウィンドウサイズの初期化です。引数で幅 80ドット，高さ 64ドットの画面を指定しています。
・ pyxel.cls(col)
引数で指定した色で画面をクリアします。1の紺色で画面を塗りつぶしました。
※ Pyxelでは色はパレットの番号（0～15）で指定します。
・ pyxel.rect(x, y, w, h, col)
四角形左上の座標を(x, y)にして，幅w，高さh，色colの四角形を描画します。
例では座標(5,5)から，幅16ドット，高さ16ドットの四角形を2の赤紫色で描画しています。
・pyxel.show()
画面を表示してEscキーが押されるまで待機する命令です。
pyxel.rect()の命令を1行追加して，四角形を増やしてみましょう。
list01.py
import pyxel pyxel.init(80,64) pyxel.cls(1) pyxel.rect( 5, 5, 16,16, 2) pyxel.rect(10,15, 32,16, 3) # 追加行 pyxel.show()
実行結果
座標(10,15)から横長の四角形が描画されました。命令を記述する順番で重なり順が決まります。
Pyxelには四角形の他にも，線や円などの図形を描く命令が用意されています。（次の表は公式サイトのAPIリファレンスから一部を抜粋）
| グラフィックス命令 | 説明 |
|---|---|
| pset(x, y, col) | (x, y) に色colのピクセルを描画します。 |
| line(x1, y1, x2, y2, col) | 色colの直線を (x1, y1)-(x2, y2) に描画します。 |
| rect(x, y, w, h, col) | 幅w、高さh、色colの矩形を (x, y) に描画します。 |
| rectb(x, y, w, h, col) | 幅w、高さh、色colの矩形の輪郭線を (x, y) に描画します。 |
| circ(x, y, r, col) | 半径r、色colの円を (x, y) に描画します。 |
| circb(x, y, r, col) | 半径r、色colの円の輪郭線を (x, y) に描画します。 |
| elli(x, y, w, h, col) | 幅w、高さh、色colの楕円を (x, y) に描画します。 |
| ellib(x, y, w, h, col) | 幅w、高さh、色colの楕円の輪郭線を (x, y) に描画します。 |
| tri(x1, y1, x2, y2, x3, y3, col) | 頂点が (x1, y1)、(x2, y2)、(x3, y3)、色colの三角形を描画します。 |
| trib(x1, y1, x2, y2, x3, y3, col) | 頂点が (x1, y1)、(x2, y2)、(x3, y3)、色colの三角形の輪郭線を描画します。 |
例 pyxel.circ(30,20, 5, 7)
ピクセル「の」circ命令 のように「.」を「の」と読み替えると理解しやすいです。
エディタ（Pyxel Editor）でリソースを作成する
エディタを使ってドット絵を描き，リソースファイルに保存します。
※リソースファイルはPyxelアプリケーションで使用する画像や音楽をまとめたものです。
＜エディタの起動手順＞
- エクスプローラーでプログラムを作成しているフォルダを表示する。
- フォルダ内の何もない所を「Shiftキーを押しながら右クリック」して，メニューを表示する。
- メニューから「PowerShell ウィンドウをここで開く(S)」を選択する。
- PowerShellウィンドウで「pyxel edit mygame」を入力する。
※ mygame の部分は編集するリソースファイルの名前です。（省略した場合は my_resource.pyxres がファイル名になります）
エディタが起動しました。
ペンツールを使って，ドット絵を描きます。画面下のパレットを左クリックして色を選択してください。
※画面左側が編集エリアです。編集エリアの右クリックでそのドットの色を取得できます。
今回は消しゴム代わりに黒色を使いましょう。
※編集後は保存を忘れないように。
画面上部メニューのボタンでも操作できますが，Windowsアプリ同様のショートカットキーが使用できます。
| ショートカットキー | 説明 |
|---|---|
| Ctrl＋Z | 元に戻す |
| Ctrl＋Y | やり直し |
| Ctrl＋S | 保存 |
| Ctrl＋C | （選択ツールで選択後）コピー |
| Ctrl＋X | （選択ツールで選択後）切り取り |
| Ctrl＋V | 貼り付け |
エディタでドット絵を描いて保存すると，絵はリソースファイルのイメージバンク（今回はimage 0 ）に書き込まれます。
ドット絵を表示するプログラム
リソースファイルを読み込んでドット絵を表示するプログラムを作成しましょう。
＜IDLEでPythonプログラムを別ファイル名にして編集を続ける手順＞
- list01.py を編集しているIDLEエディタのメニューから 「File － Save As ...」 を選択
- ファイル保存ダイアログが表示されるので，game フォルダに list02.py で保存します。
list02.py
import pyxel pyxel.init(80,64) pyxel.load("mygame.pyxres") pyxel.cls(1) pyxel.blt( 5,5, 0, 8,0, 8,8, 0) pyxel.blt(20,5, 0, 8,0, 8,8,11) pyxel.blt(35,5, 0, 8,0, 8,4, 0) pyxel.show()
実行結果
・pyxel.load(filename)
リソースファイルを読み込みます。filenameは作成したファイル名と一致させます。
・pyxel.blt(x, y, img, u, v, w, h, [colkey])
画面の座標(x,y)を左上の角にして，ドット絵を表示する命令です。x座標をずらして3つ表示させています。
imgでイメージバンク（0～2）が指定できます。今回はエディタでimage 0 に絵を描いたので0を指定しています。
(u,v)はイメージバンク側の座標で，今回は絵を描いた範囲の左上の座標(8,0)を指定しました。（イメージエディタの上部にカーソル位置の座標が表示されます）
w,hはイメージバンク側の座標から表示する範囲を指定する引数です。3つ目の命令だけ，幅8ドット 高さ4ドットで指定したので実行結果が上半分になりました。
最後の引数colkeyで指定したパレット番号の色は透明になります（[colkey]の[ ]はこの引数は省略可の意味）。2つ目の命令ではパレット番号11の色を透明にしたので，0番の黒が表示されてうすい緑が透明になっています。
ドット絵のキャラクターを動かす
ここまでは，Pyxelのshow()命令で画面に絵を表示してそのまま変化しないプログラムでした。ゲームプログラムの基本となる処理の流れでプログラムを作成してみましょう。
次のプログラムでは，マウスの座標をキャラクターの座標に代入してドット絵の表示位置を変更しています。画面の上でマウスを動かしてキャラクターを動かしてみましょう。
list03.py
import pyxel pyxel.init(80,64) pyxel.load("mygame.pyxres") x = 0 y = 0 def update(): global x,y x = pyxel.mouse_x y = pyxel.mouse_y return def draw(): pyxel.cls(1) pyxel.blt( 5,5, 0, 8,0, 8,8, 0) pyxel.blt( x,y, 0, 8,0, 8,8, 0) return pyxel.run(update,draw)
実行結果
・update()関数
キャラクターの位置（xy座標）を更新する役割の関数です。pyxel.mouse_xとpyxel.mouse_yの値でそれぞれ現在のマウスのx座標とy座標を取得することができます。
・draw()関数
画面を描画する役割の関数です。毎回画面のクリア，指定位置でドット絵の表示を行っています。
・pyxel.run(update,draw)
run()命令を実行すると，Pyxelアプリケーションが開始します。以降はフレーム更新の update() 関数と画面描画の draw() 関数の実行が繰り返されます。
文字を表示する
キャラクターを動かして絵が重なったときに文字を表示するプログラムに改造してみましょう。
statusという変数を追加して，update()関数内で座標の判定とstatusの更新，draw()関数内でstatusが1の場合に文字を表示するようにしました。
list03.py
import pyxel pyxel.init(80,64) pyxel.load("mygame.pyxres") x = 0 y = 0 status = 0 # 変数を追加 def update(): global x,y,status # status追加 x = pyxel.mouse_x y = pyxel.mouse_y if x == 5 and y == 5: # 座標の判定を追加 status = 1 else: status = 0 return def draw(): pyxel.cls(1) pyxel.blt( 5,5, 0, 8,0, 8,8,11) # 最後の引数 透過色変更 pyxel.blt( x,y, 0, 8,0, 8,8, 0) if status == 1: # 文字表示の分岐を追加 pyxel.text(20,7,"Hello world!",7) return pyxel.run(update,draw)
実行結果
・pyxel.text(x, y, s, col)
座標(x,y)の位置から s で指定した文字列を col の色で描画します。
※text()命令で表示できるのは半角英数の文字です。ひらがなカタカナは表示されません。日本語はローマ字表記にしたり画像を準備したり工夫が必要です。
※2023-03-22追記
日本語を扱う場合は文字データを用意して別の命令を使います。
Pyxel 1.9.13版で漢字を含むビットマップフォントを扱う例が追加されました。
Pyxel 日本語の表示（1.9.13版の新機能） - 勉強ボックス管理者ブログ
使用にはある程度知識が必要ですが，慣れてきたら挑戦してみてください。
練習
ここまでの内容を使ってプログラムを改造してみましょう。
- グラフィックスの命令を使って，図形を描画してみる。
- イメージエディタでドット絵を描いて，画面に表示してみる。
上手くいかないときは新しく描いた絵の位置（イメージバンク側の座標）と幅と高さをプログラムから正しく指定できているか確認しましょう。
- マウスの位置に応じて図形の大きさや色が変化するなど，描画されるものが変わるプログラムを作成してみる。（pyxel.mouse(True)命令で画面上にカーソル表示が可能です）
公式のサンプルコード
ドット絵のエディタを起動させたPowerShellウィンドウで「pyxel copy_examples」コマンドを入力すると，Pyxelのサンプルコード（プログラム例）を取得できます。
＜サンプルコード取得手順＞
- ドット絵のエディタを終了する。（右上閉じるボタン）
- PowerShellウィンドウで pyxel copy_examples を入力してEnterキーを押す。
- PowerShellウィンドウを開いていたフォルダに pyxel_examples フォルダが作成されているので，中のファイルを確認する。
※サンプルコードを実行したり，中を見るのにおすすめの順番（Pyxel Q&Aより）
01_hello_pyxel.py - シンプルなアプリケーション
05_color_palette.py - カラーパレット一覧
03_draw_api.py - 描画 API のデモ
04_sound_api.py - サウンド API のデモ
02_jump_game.py - Pyxel リソースファイルを使ったジャンプゲーム
次回は乱数を使ったじゃんけんゲームを作成して，マウスでクリックした座標を判定する仕組みを考えてみます。
