Pyxelで作ったゲームを公開する方法

公開の方法は5つ

Pyxelには、作ったゲームを配ったり公開したりするための方法が、いくつも用意されています。

表は横にスクロールできます。

どの方法を選ぶ場合も、最初に .pyxapp ファイルを作っておくと便利です。このページでは、いちばん手軽な「.pyxapp にまとめて、HTMLに変換する」方法から説明します。

ゲームのフォルダーを整える

まず、ゲームに必要なファイルだけを、1つのフォルダーにまとめます。ここでは、はじめる準備と同じように .venv を作った work フォルダーの中に、ゲーム用の my_game フォルダーを作る形にします。

work/                ← ここでターミナルを開く
├─ .venv/
└─ my_game/          ← ゲームに必要なものだけを入れる
   ├─ main.py        ← 最初に動かすファイル
   └─ assets/        ← 画像・音・フォントなど（使う場合）

pyxel package は、指定したフォルダーの中身を1つのファイルにまとめます。名前が「.」で始まるフォルダーやファイル（.venv など）と、.zip・.gif のファイルは、自動でまとめる対象から外されます。

画像や音、フォントを読み込むときは、"assets/player.png" のように、Pythonファイルからの相対パスで書きます。C:/Users/… のような自分のPCだけの場所を書くと、ほかの人の環境では読み込めません。

最初に動かすファイル（main.py）

# title: Box Walk
# author: Your Name
# version: 1.0

import pyxel


class App:
    def __init__(self):
        pyxel.init(160, 120, title="Box Walk")
        self.x = 76
        self.y = 56
        pyxel.run(self.update, self.draw)

    def update(self):
        if pyxel.btn(pyxel.KEY_LEFT) or pyxel.btn(pyxel.GAMEPAD1_BUTTON_DPAD_LEFT):
            self.x -= 2
        if pyxel.btn(pyxel.KEY_RIGHT) or pyxel.btn(pyxel.GAMEPAD1_BUTTON_DPAD_RIGHT):
            self.x += 2
        if pyxel.btn(pyxel.KEY_UP) or pyxel.btn(pyxel.GAMEPAD1_BUTTON_DPAD_UP):
            self.y -= 2
        if pyxel.btn(pyxel.KEY_DOWN) or pyxel.btn(pyxel.GAMEPAD1_BUTTON_DPAD_DOWN):
            self.y += 2
        self.x = max(0, min(self.x, pyxel.width - 8))
        self.y = max(0, min(self.y, pyxel.height - 8))

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


App()

• 先頭の # title:、# author: などは、作品の情報です。まとめるときや遊ぶときに、ターミナルに表示されます。title と author 以外（desc・site・license・version）は、書かなくてもかまいません。
• キーボードの矢印キーと一緒に、ゲームパッドの十字キー（GAMEPAD1_BUTTON_DPAD_LEFT など）も読んでいます。HTMLに変換したゲームをスマートフォンなどのタッチ画面で開くと、画面に仮想ゲームパッドが表示され、その十字キーとボタンは GAMEPAD1 のボタンとして届きます。スマートフォンでも遊んでもらうなら、ゲームパッドのボタンでも操作できるようにしておきましょう。

.pyxapp にまとめる（pyxel package）

work フォルダーでターミナルを開き、次のコマンドを実行します。1行目でまとめ、2行目でまとめたゲームを遊んで確かめます。

.venv\Scripts\python.exe -m pyxel package my_game my_game\main.py
.venv\Scripts\python.exe -m pyxel play my_game.pyxapp

.venv/bin/python -m pyxel package my_game my_game/main.py
.venv/bin/python -m pyxel play my_game.pyxapp

package のあとの1つ目が「まとめるフォルダー」、2つ目が「最初に動かすファイル」です。ターミナルを開いている場所（work フォルダー）に、フォルダーと同じ名前の my_game.pyxapp ができます。

HTMLに変換する（pyxel app2html）

次に、.pyxapp ファイルをHTMLファイルに変換します。

.venv\Scripts\python.exe -m pyxel app2html my_game.pyxapp

.venv/bin/python -m pyxel app2html my_game.pyxapp

同じ場所に my_game.html ができます。中身は、次のような短いHTMLです。

<!doctype html>
<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel@2.9.9/wasm/pyxel.js"></script>
<script>
launchPyxel({ command: "play", name: "my_game.pyxapp", gamepad: "enabled", base64: "UEsDBBQAAAAIA…（とても長い文字列）" });
</script>

• ゲームのコードと素材は、すべてHTMLの中に（長い文字列として）入っています。このHTMLファイル1つを置くだけで公開できます。
• Pyxel本体（Web版）は、インターネット上の配信サービス（jsDelivr）から読み込みます。読み込むPyxelのバージョンは、変換したときのバージョン（この例では 2.9.9）に固定されるので、あとでPyxelが更新されても、ゲームの動きは変わりません。遊ぶ人には、インターネット接続が必要です。
• gamepad: "enabled" は、タッチ画面で仮想ゲームパッドを表示する設定です。いらない場合は、この部分を消します。

公開する前に、ブラウザーで確かめる

Pythonに入っている簡易サーバーを使うと、公開したときと同じように、ブラウザーで確かめられます。work フォルダーで次のコマンドを実行し、ブラウザーで http://localhost:8000/my_game.html を開きます。終わったら、ターミナルで Ctrl+C を押して止めます。

.venv\Scripts\python.exe -m http.server

.venv/bin/python -m http.server

HTMLを公開する場所

できたHTMLファイルは、ふつうのWebページと同じように公開できます。

各サービスの画面や利用条件は変わることがあります。公開するときは、それぞれの最新の案内を確認してください。

ほかの方法（Web Launcher・埋め込み・exe）

Pyxel Web Launcher（GitHubに置いたゲームを遊ぶ）

GitHubで公開しているリポジトリなら、URLを作るだけで、ブラウザーでゲームを動かせます。URLの形は次のとおりです。

https://kitao.github.io/pyxel/web/launcher/?play=ユーザー名/リポジトリ名/ブランチ名/フォルダー/ファイル名（拡張子なし）

play は .pyxapp を遊ぶ、run は .py を実行する、edit は .pyxres を Pyxel Editor で開く、という意味です。末尾に &gamepad=enabled を付けると、タッチ画面で仮想ゲームパッドが表示されます。

https://kitao.github.io/pyxel/web/launcher/?play=taro/my_repo/main/dist/my_game&gamepad=enabled

HTMLカスタム要素（自分のページにゲームを埋め込む）

説明文のあるページの中に、ゲームを置くこともできます。HTMLに次の部分を書き、同じ場所に my_game.pyxapp を置きます。

<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel@2.9.9/wasm/pyxel.js"></script>

<div id="pyxel-screen" style="width: 480px; height: 360px;"></div>
<pyxel-play root="." name="my_game.pyxapp" gamepad="enabled"></pyxel-play>

id="pyxel-screen" の div を置くと、ゲームの画面がその中に表示されます。置かない場合は、ページ全体に表示されます。.pyxapp ファイルを読み込むので、確かめるときは上の簡易サーバーを使います（ファイルをダブルクリックして開くだけでは動きません）。このサイトの講座ページにある「完成版を遊ぶ」も、.pyxapp を Pyxel 公式のWeb版（2.9.9）で読み込んで動かしています。

実行ファイルにする（pyxel app2exe）

ダウンロードして遊ぶゲームとして配るなら、pyxel app2exe で実行ファイルを作れます。中では PyInstaller というツールを使うので、先に同じ .venv に入れておきます。

.venv\Scripts\python.exe -m pip install pyinstaller
.venv\Scripts\python.exe -m pyxel app2exe my_game.pyxapp

.venv/bin/python -m pip install pyinstaller
.venv/bin/python -m pyxel app2exe my_game.pyxapp

dist フォルダーの中に my_game フォルダーができ、その中に実行ファイルが入ります。配るときは、my_game フォルダーごと渡します。macOS では、my_game.app というアプリも作られます。

公開前のチェックリスト

公開する前に、次の項目を確かめておきましょう。

• 画像・音・フォントは、ゲームのフォルダーの中にあり、相対パスで読み込んでいる
• pyxel play で .pyxapp を遊び、最初から最後まで動く
• HTMLに変換したあと、簡易サーバーを使ってブラウザーで確かめた
• Pyxelの著作権とライセンス（MITライセンス）の表示を、ゲームと一緒に入れた
• フォント・画像・音楽など、ほかの人が作った素材の利用条件を確かめた
• スマートフォンでも遊んでもらうなら、ゲームパッドのボタンでも操作できる
• 遊び方（使うキーやボタン）を、ゲームの画面か公開するページに書いた

Pyxelは MITライセンスで公開されていて、著作権とライセンスの全文を表示すれば、作者の許可なく配布や販売ができます（公式のよくある質問より）。日本語を表示するゲームなら、Pyxelで日本語を表示する方法の「フォントを入れて配るときの注意」もあわせて確認してください。

この記事で確認したこと

Pyxel 2.9.9 の公式ドキュメント（ユーザーガイド・Web版の使い方・よくある質問）と、package・app2html・app2exe を処理するソースコード（cli.py）、Web版で仮想ゲームパッドの入力を受け取るソースコードを照合しました。.pyxapp とHTMLのファイル名・できる場所、まとめる対象から外れるファイル、HTMLの中身の形、PyInstaller に渡す設定（フォルダー形式）はソースコードで確かめています。

main.py のキーとゲームパッドの入力は、Pyxelの代わりに入力を記録する模擬モジュールで確かめています。実際の変換・アップロード・実行ファイル化の操作と、itch.io・GitHub Pages での公開は、この記事の作成時には行っていません。

Pyxelの使い方ガイド

ほかのガイドも、講座の前後にあわせて読めます。

• はじめ方Pyxelとは？使い方と始め方できること・3つの始め方・最初のコードの読み方と、Pygame・Scratch・Unityとの違い。
• テクニックPyxelで日本語を表示する方法日本語フォントの用意と読み込み、中央寄せ・ふちどり、文字が出ないときの対策。
• テクニックPyxelの当たり判定の作り方四角・円・マス目・タイルマップの4つの判定と、すり抜けを防ぐコツ。
• ジャンル別Pythonでパズルゲームを作る盤面・1手・クリア判定・Undoの基本と、パズル講座32本の難易度別まとめ。