Pyxelでアニメーションする！歩くキャラクターを作ろう

Pythonでレトロゲームを作れる人気ライブラリPyxel（ピクセル）。
これまでキャラを動かす方法を学びましたが、今回はいよいよ「Pyxelでアニメーションする」をテーマに、歩くキャラを作ります。
検索でも「pyxel アニメーション」「pyxel キャラ歩く」「pyxel sprite animation」が急上昇中！
この記事では、画像を切り替えて動きを表現する「スプライトアニメーション」をわかりやすく紹介します。

Pyxelのアニメーションとは？

Pyxelでは、1枚の画像の中に「コマごとのキャラ」を並べて描き、
ゲーム中でそのコマを切り替えることで動きを表現します。
これをスプライトアニメーションと呼びます。

たとえば下のように、横に3コマのキャラを描いたとします：

| frame 0 | frame 1 | frame 2 |

この画像をgame.pyxresに保存して、Pyxelで表示するコマをフレームごとに変えればOKです。

基本コード：歩くアニメーション


import pyxel

class App:
    def __init__(self):
        pyxel.init(160, 120, title="Walk Animation")
        pyxel.load("game.pyxres")  # Pyxel Editorで作成した画像を読み込み
        self.x = 70
        self.y = 60
        self.frame = 0      # アニメーションの現在フレーム
        self.direction = 1  # 向き（1:右、-1:左）
        pyxel.run(self.update, self.draw)

    def update(self):
        # 移動処理
        if pyxel.btn(pyxel.KEY_RIGHT):
            self.x += 2
            self.direction = 1
            self.frame = (pyxel.frame_count // 6) % 3  # フレームを切り替え
        elif pyxel.btn(pyxel.KEY_LEFT):
            self.x -= 2
            self.direction = -1
            self.frame = (pyxel.frame_count // 6) % 3
        else:
            self.frame = 1  # 立ちポーズ

    def draw(self):
        pyxel.cls(0)
        # 向きによって描画を反転（wの符号で反転）
        pyxel.blt(self.x, self.y, 0, self.frame * 16, 0, 16 * self.direction, 16)

App()

👉 これで、右キーを押すと右向きに、左キーを押すと左向きにキャラが「歩いているように」アニメーションします！
Pyxelでは、画像の一部（スプライト）を取り出して描画する関数pyxel.blt()を使います。

コードのポイント解説

pyxel.frame_count：プログラム開始からのフレーム数（60fps換算）
(pyxel.frame_count // 6) % 3：6フレームごとに0→1→2→0と切り替え
self.direction：キャラの向き。左向きのときに描画幅をマイナスにして反転
pyxel.blt(x, y, img, u, v, w, h)：画像バンクから指定範囲を描画

Pyxel Editorでの画像設定

Pyxel Editorでアニメーション用のキャラを描くときは、次のように並べます。

1コマ：16×16ピクセル
3コマを横に並べる（左から「立ち」「歩き1」「歩き2」など）
保存ファイル名：game.pyxres

Pyxel EditorのIMAGEタブで描いたら、pyxel.load(“game.pyxres”)で読み込みます。

アニメーション速度を調整する

アニメーションが速すぎる／遅すぎる場合は、次の部分を変更します。

self.frame = (pyxel.frame_count // 6) % 3

6 → 小さいほど速くなる（例：3なら速く切り替わる）
6 → 大きいほど遅くなる（例：10ならゆっくり歩く）

立ち止まったときのポーズを変える

キーを離したときに立ちポーズを変えたい場合は、「else」部分を調整します。


else:
    self.frame = 0  # 立っているポーズ

Pyxelでは1枚絵のどの部分を使うかで表情や動きを変えられるため、
ポーズを複数描いておくとよりリアルな動きになります。

応用：ジャンプ中は別のアニメーションにする

次のように条件分岐を増やすことで、
「歩く／立つ／ジャンプ」のアニメーションを切り替えることも可能です。


if not self.on_ground:
    self.frame = 4  # ジャンプ中のコマ
elif pyxel.btn(pyxel.KEY_RIGHT) or pyxel.btn(pyxel.KEY_LEFT):
    self.frame = (pyxel.frame_count // 6) % 3
else:
    self.frame = 0  # 立ち

こうして状態ごとに異なるスプライトを指定するのが、ゲームキャラ制御の基本です。

よくある質問（FAQ）

Q：アニメーションが動かない！
A：pyxel.frame_countを使ってフレームを変化させているか確認してください。
Q：キャラが逆さまに表示される
A：描画幅wをマイナスにすることで反転されます。pyxel.blt(x, y, 0, u, v, -w, h)をチェック。
Q：Pyxel Editorで描いた画像が出ない
A：ファイルパスが正しいか、pyxel.load("game.pyxres")が呼ばれているか確認しましょう。

まとめ：Pyxelでキャラを「生きているように」動かそう！

Pyxelのアニメーションはとてもシンプル。
画像のコマを切り替えるだけで、キャラが生き生きと動き始めます。
この仕組みを理解すれば、ジャンプ、攻撃、ダメージなど複雑な動きも自分で作れます。

👇 今回のまとめ：

アニメーション切り替え： frame = (pyxel.frame_count // 6) % コマ数
左右反転： 描画幅（w）にマイナスをつける
Editorでコマを並べる： 横に連続して16×16などのコマ配置
状態ごとの切り替え： 立つ／歩く／ジャンプでframe番号を分ける

次のステップでは、「Pyxelで衝突判定（あたり判定）を作る」を学びましょう。
キャラのアニメーションに「当たり判定」を加えると、敵やアイテムとの関係を作ることができます。

ロボ団群馬のブログ