【Pyxel】「たった10分で」Pyxelで作ったゲームをブラウザ上で動かす！

はじめに

　先日Pyxelで作ったゲームを公開したので、その公開方法をこの記事で紹介しようと思います。難しいことは一切ないですので、記事を見ながら手順通りにやってみてください。タイトルについてですが、手際よくやれば読みながらでも10分くらいで行けるかもしれませんが、記事を読んだ後、この方法なら、10分くらいで実践できるよという意味です。もちろん読みながらやっていただいても構いません。

公開までの手順

　Pyxelで作ったゲームを公開したい人向けに書いているので、Pyxelはpipしてある前提で進めていきます。また、GitHubを使うので、アカウントを持っていない人は、GitHubのアカウントを作って戻ってきてください。面倒なものでもないので、アカウント作成については省略します。

一応筆者の環境も置いておきます

OS 名:                  Microsoft Windows 11 Home
OS バージョン:          10.0.22631 N/A ビルド 22631
Python バージョン:      3.11.3
開発環境:               IDLE (Python3.11.3)

手順１：リポジトリを作成する

　GitHubって全部英語だから、最初は威圧感ありますよね？筆者も最初は全くどこを押せばいいか分からなかったので、GitHubを使ったことがない人のために、ここからは画像付きで手順を説明します。慣れている人は自分で進めてもらえればOKです。

　リポジトリの名前は自由ですが、Publicにチェックを入れるのを忘れないようにしてください。名前を入力したらCreate a new repositoryを押してください。

手順２：index.htmlを作る

　index.htmlっていうのは、そのサイトにアクセスするときに、ファイル名まで指定されていなかったら暫定的に開かれる奴ですね。今回はこれ以外にhtmlファイルを作らないので、別に気にしなくていいです、とにかくindex.htmlという名前でファイルを作ってくれればいいです。

この画面でCreating a new fileを押してください。

　作ったらファイル名にindex.htmlを入力して、エディタに以下の二行をコピペしてください。main.pyの部分は自分のファイル名に書き換えてください。こちらはindex.htmlとは違い、固定ではないので、むしろ変えないとファイルが見つからずエラーが出ます。

<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
<pyxel-run name="main.py" gamepad="enabled"></pyxel-run>

コピペ出来たらCommit changesで適用してください。確認が出てくるのでもう一度Commit changesを押したらOKです。

ゲームパッドが要らない人はgamepad="enabled"の部分を削除してください。この後紹介するサンプルで試す人はそのままでお願いします。

手順３：必要なファイルをすべてアップロードする

Add fileのUpload filesを押します

ローカルに用意してあるフォルダから必要なファイルをすべてドラッグアンドドロップすればいいです。アップロードしたらCommit changesで変更を適用してください。ゲームが入っているフォルダの中身を全部入れておけば間違いないです。ただし、バックアップのためにコピーしたファイルとかは、見栄え悪いのでなくした方がベターです。

手順４：公開する

　なんともうこれが最後です。Settingsタブに移動して、PagesでBranchをNoneからmainに変えてSaveします。

あとはちょっと待ってから画面を更新すると、上の方にURLが出てくるので、アクセスして動作確認したら終わりです。

サンプル

main.py

import pyxel
class App:
    def __init__(self):
        pyxel.init(256, 256)
        self.x, self.y = 48, 48
        self.color = pyxel.COLOR_RED
        pyxel.run(self.update, self.draw)    
    def update(self):
        #十字キー
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_DPAD_UP):
            self.y -= 2
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_DPAD_DOWN):
            self.y += 2
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_DPAD_LEFT):
            self.x -= 2
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_DPAD_RIGHT):
            self.x += 2
        #日本でいうところのAとB、XとYがそれぞれ逆なので注意
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_B):
            self.color = pyxel.COLOR_RED
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_A):
            self.color = pyxel.COLOR_GREEN
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_Y):
            self.color = pyxel.COLOR_YELLOW
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_X):
            self.color = pyxel.COLOR_CYAN
        
    def draw(self):
        pyxel.cls(7)
        pyxel.rect(self.x, self.y, 32, 32, self.color)
if __name__ == '__main__':
    app = App()

特に作りたいものは決まってないけど、動作確認だけしたいよーという人のためにサンプルを置いておきます。自分のファイルが動かない場合の比較対象としてもご活用ください。特にGAMEPAD「1」を忘れたりとか、ボタンの配置とかが気を付けたいところです。（個人的な感想）

こんな感じに動きます

その他の注意点

モジュールについて

　外部モジュールが使えないので、PyxelUniversalFontが使えません...(これは痛い...)。Pyxelの標準のフォントだけでどうにかするか、リソースを自作するしかないですね。png形式とかの画像を読み込む機能もPyxelにはあるので、タイトル画面とかだったら、PyxelUniversalFontで作った画面をスクショするとか、そういうパワープレーで何とかなったりします。

こちらが実際に何とかしたものです（一応ゲーム自体に興味を持ってくれた方のために操作説明も置いておきますが、ちょっと難易度調整ミスってるみたいで、難しすぎるらしいです。https://qiita.com/Prosamo/items/e94548b124e703583f25 ）

マウス操作について

　一般的な問題か分からないのですが、筆者の環境だと、pyxel.mouxe_xとかで取得するマウス操作の座標が、全画面表示になるとずれるんですよね。（画面はぴったり全画面になってるけど、判定は整数倍でしか調整されてないっぽい？）この方法だと全画面表示になるので、必然的にこの問題に直面します。まあレトロゲームを作る目的でPyxelを使ってると思うので、ゲームパッドで代用できる仕様に変更するのが一番かなと思います。

まとめ

• リポジトリを作成する
• index.htmlを作成する
• 必要なファイルをアップロードする
• 公開する
• 動くか確認して終了！

最後に

　ここまで読んで下さりありがとうございました。そこまで難しい操作ではないのですが、筆者はGitHubを初めて使ってゲームをアップしたときに、いろいろ不安を感じながら操作していました。この記事を読んで、GitHubを使う心理的ハードルが少しでも下がっていればいいなと思います。注意ですが、この記事はあくまで動かすことに重点を置いて、できるだけ最低限の操作にしています。実際上GitHubでちゃんとプログラムを公開するなら、READMEとかを付けるのが良いです。

参考

宣伝

pygame版こちら