🎮

ブラウザ上でPythonを書いてレトロゲームが作れる！ - Pyxel Code Makerから入門するPyxel-

2025/12/07に公開

 これは何？この記事は「Pyxel Advent Calendar 2025」の6日目の記事です。よろしくお願いします。
なお、1日目にこんな記事を書いてるので、ぜひ読んでみてください！

https://zenn.dev/kikutaro/articles/8fd1d30d4baab4

 Pyxelとは？Pyxelは、プログラミング言語のPythonでレトロゲームを作れるツールです。PC(Windows/Mac/Linux)にPythonをインストールして、pipコマンドでPyxelをインストールすると使えます。
https://github.com/kitao/pyxel

 Pyxel Code Makerの紹介「触ってみたいけど、Pythonのインストールが必要ならいいや」と思った方！ちょっとお待ちください！
Pyxelにはブラウザで簡単に試すことができる「Pyxel Code Maker」が用意されているので、こちらを試してみてください。
https://kitao.github.io/pyxel/wasm/code-maker/

以下、簡単に使い方を紹介します。

 ベースのコードを変えてみよう
 コードの構成Pyxel Code Makerは画面左にコード、画面右に実行画面、画面の上に操作用ボタンの3ペインで構成されています。最初に表示されるコードは次のとおりです。
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 += 1
        if self.x >= pyxel.width:
            self.x = -8

    def draw(self):
        pyxel.cls(0)
        pyxel.blt(self.x, 60, 0, 0, 0, 8, 8, 2)
        pyxel.text(48, 53, "Pyxel Code Maker", pyxel.rndi(1, 15))


App()
__init__は最初に呼び出される関数で
initで画面の表示サイズを決めて
loadでゲームに使う絵や音楽を読み込み
runで実行

という処理をしています。
定期的に自動で呼び出されるupdateとdrawにはゲームの処理と描画の処理を書きます。初期コードでは
updateで
self.xというキャラの横軸座標を決める値を1ずつ増やしていく
self.xが画面の幅以上になったらself.xを-8にする

という処理をしています。画面右の動きをみるとわかるとおり、キャラが少しずつ右に移動して、画面の右端を超えると左からでてくる動きを実装しています。
drawでは
pyxel.clsで画面の背景色を塗り
リソース(画面上段の「Res」ボタン)から以下対応関係の部分を読み込み


テキスト文字を表示

という処理をしています。

 キャラを変えてみよう画面上段のResボタンを押して、既存の黄色いキャラクターを書き換えてみましょう。今回はブロッコリーをイメージしたキャラにしてみました（見えない...）。
画面上段のRunを押すと、キャラクターがブロッコリーに変わります。簡単ですね。

 動きを変えてみようデフォルトではキャラクターが自動的に動いていますが、キーボードの操作で動くように変えてみましょう。
def update(self):
    self.x += 1
上記部分を次のように変えて、キーボードの右が押されたら右に4ピクセル移動、左が押されたら左に4ピクセル移動にします。
def update(self):
    if pyxel.btnp(pyxel.KEY_RIGHT):
        self.x += 4
    elif pyxel.btnp(pyxel.KEY_LEFT):
        self.x -= 4
Runで実行して、キーボードの右と左を押すと自分の思い通りにうごかせます。ちょっとゲームっぽい！
今回はかなり簡単な動きだけでしたが、Pyxel Code Makerを使えば、こんな感じでコードを書いてすぐに動きを確認できますし、リソースも作れるので、かなり便利です。良いものを作ったら保存して、読み込むことも可能なので、ぜひ試してみてください！
最後におまけとして、ChatGPTを使ったゲーム作成をやってみました。

 ChatGPTのサンプルをコピペしてみよう依頼したのは「Pyxelでｚボタンを押すとモノを投げて放物線起動で飛ぶような動きを実装したい」です。

以下はChatGPTの回答です。
Pyxelで「Zボタンを押すと物を投げて、放物線で飛ぶ」処理は比較的シンプルに実装できます。

重力つきの**疑似物理（位置＋速度＋加速度）**で考えるのが王道です。

 基本アイデア投げるオブジェクトに以下の値を持たせます：

x, y … 位置

vx … 横方向の速度

vy … 縦方向の速度

g … 重力
式はこれだけです：
vx は一定
vy は毎フレーム g ずつ増える
x += vx
y += vy

 シンプルなサンプルコード以下は「Zキーを押すと左下から右上へ物を投げる」例です。
import pyxel

class App:
    def __init__(self):
        pyxel.init(160, 120)
        
        # 投げる物の初期状態
        self.obj_x = 0
        self.obj_y = 0
        self.vx = 0
        self.vy = 0
        self.gravity = 0.4
        self.is_throwing = False
        
        pyxel.run(self.update, self.draw)

    def update(self):
        # Zキーで投げる
        if pyxel.btnp(pyxel.KEY_Z) and not self.is_throwing:
            self.is_throwing = True
            self.obj_x = 20
            self.obj_y = 90
            self.vx = 2.5
            self.vy = -6

        # 放物線の動き
        if self.is_throwing:
            self.vy += self.gravity
            self.obj_x += self.vx
            self.obj_y += self.vy

            # 地面に落ちたら終了
            if self.obj_y > 90:
                self.obj_y = 90
                self.is_throwing = False

    def draw(self):
        pyxel.cls(0)

        # 地面
        pyxel.line(0, 90, 160, 90, 11)

        # 投げた物
        if self.is_throwing:
            pyxel.circ(self.obj_x, self.obj_y, 3, 8)

App()

 よくあるアレンジ
 角度と強さで投げたい場合import math

angle = math.radians(45)
power = 7

self.vx = math.cos(angle) * power
self.vy = -math.sin(angle) * power

 放物線を「もうちょいリアル」にしたい空気抵抗風の減衰：
self.vx *= 0.99
self.vy += self.gravity
もし
「左右キーで投げる角度を変えたい」
「着地点を予測して線を描きたい」
「複数オブジェクトを投げたい」
など要望があれば、それに合わせてコードを拡張します！

 Pyxel Code Makerで実行してみたものコピペですぐ動作確認できるのがいいですね。

Enjoy Pyxel!