Pyxelの始め方。(本当に最初のところ)

Pythonで簡単にゲームが作れると話題のPyxelを今更になって始めてみます。

前提

• WSL2 Ubuntu24.04
• Python3.12 導入済み
• 仮想環境はvenv

ライブラリのインストール

ターミナル

pip install -U pyxel

サンプルの実行

公式のまま

~/run.py

import pyxel

class App:
    def __init__(self):
        pyxel.init(160, 120)
        self.x = 0
        pyxel.run(self.update, self.draw)

    def update(self):
        self.x = (self.x + 1) % pyxel.width

    def draw(self):
        pyxel.cls(0)
        pyxel.rect(self.x, 0, 8, 8, 9)

App()

実行コマンド

ターミナル

python run.py

動かない。。。

出力

Traceback (most recent call last):
  File "/****/run.py", line 1, in <module>
    import pyxel
  File "/****/.venv/lib/python3.12/site-packages/pyxel/__init__.py", line 1, in <module>
    from .pyxel_wrapper import *  # type: ignore  # noqa F403
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
ImportError: libSDL2-2.0.so.0: cannot open shared object file: No such file or directory

こちらのページによると、WSL2ではこうなるそうです。
↓のコマンドで解決するそうです。

ターミナル

apt install libsdl2-dev libsdl2-image-dev libsdl2-mixer-dev libsdl2-ttf-dev

↑のコマンドでも↓のエラーが出たので書いてある通りapt updateしたらうまく通りました。

出力

E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?

再度python run.pyコマンドで動かすことができました。コマンドを打つと勝手にゲーム画面のウインドウが立ち上がる感じです。

よく見るドット絵を描いている奴は？

Pyxelを解説している記事とかでよく見るドット絵を編集する画面がありますが、あれはPyxelに1機能のようです。

あれで描いたドット絵を作ったゲームに使うことができるそうです。

ドット絵編集ツールの起動

ターミナル

pyxel edit

こんなのが立ち上がります。

あとは直感的に操作ができるので描きたいものを描いて保存ボタン(上部の下矢印ボタン)を押して右上のXボタンで終了します。
(一応肉まんを描きました。)

閉じるとカレントディレクトリにmy_resource.pyxresというファイルができていて、そこに絵が記録されている感じになります。

それではさっきのオレンジ色の四角をこの肉まんに置き換えます。

~/run.py

import pyxel

class App:
    def __init__(self):
        pyxel.init(160, 120)
        # ============ドット絵の読み込み============
        pyxel.load('my_resource.pyxres')
        self.x = 0
        pyxel.run(self.update, self.draw)

    def update(self):
        self.x = (self.x + 1) % pyxel.width

    def draw(self):
        pyxel.cls(0)
        # ============ドット絵の描画============
        pyxel.blt(x=self.x, y=0, img=0, u=8, v=0, w=16, h=8, colkey=0)
        # x: 画面のx座標
        # y: 画面のy座標
        # img: ドット絵を描いたシート番号(今回は0番)
        # u: ドット絵のシート上の左上のx座標
        # v: ドット絵のシート上の左上のy座標
        # w: ドット絵のシート上の左上から右上までの長さ
        # h: ドット絵のシート上の左上から左下までの長さ

App()

操作できるようにするには？

ゲームらしくするにはこの肉まんを動かせるようにしたいです。

↓このような感じで十字キー入力を受け付けるようにします。

run.py

import pyxel

class App:
    def __init__(self):
        pyxel.init(160, 120)
        # ============ドット絵の読み込み============
        pyxel.load('my_resource.pyxres')
        # ============肉まんの初期位置============
        self.x = 0
        self.y = 0
        pyxel.run(self.update, self.draw)

    def update(self):
        # ============十字キー入力による肉まん位置の更新============
        if pyxel.btn(pyxel.KEY_LEFT):
            self.x = (self.x - 1) % pyxel.width
        if pyxel.btn(pyxel.KEY_RIGHT):
            self.x = (self.x + 1) % pyxel.width
        if pyxel.btn(pyxel.KEY_UP):
            self.y = (self.y - 1) % pyxel.height
        if pyxel.btn(pyxel.KEY_DOWN):
            self.y = (self.y + 1) % pyxel.height

    def draw(self):
        pyxel.cls(0)
        # ============更新後の肉まんの位置を反映============
        pyxel.blt(x=self.x, y=self.y, img=0, u=8, v=0, w=16, h=8, colkey=0)

App()

静止画だとわかりにくいですが、思いのままに肉まんを動かせるようになっています。

いったんここまで

自分で描いた絵が思い通りに動かせるところまでできました。

気が向いたら続きを作っていこうと思います。