main() blog

プログラムやゲーム、旅、愛する家族について綴っていきます。

【pyxel】pyxelで作ったゲームをネットで公開しよう!

pyxelで作成したゲームをネットに公開する方法を紹介します!
今回はGithubを利用してネットに公開するための手順です。
Pythonのソースは公開しないでビルドしたバイナリで公開するための方法となります。

実際に公開しているテストプロジェクトは以下となります。
https://takezoh-1127.github.io/pyxel-public-neko/

作成したゲームをpyxappに変換する

今回公開したテストプロジェクトの元のプロジェクトは以下のGithubにアップしています。
こちらのリポジトリでpyxelによる実装を行なっています。

github.com

実装しているソースを管理している場所と、実行環境を公開しているリポジトリが異なる場所となっているため公開してみました。
こちらの環境でpyxappに変換します。

以下を実行してneko.pyxappをビルドします。

pyxel package ./ neko.py

appをhtmlに変換する

先ほど作成したneko.pyxappをhtmlに変換します。

pyxel app2html neko.pyxapp

neko.htmlが出力されるのでindex.htmlにファイル名を変更しておきます。
この状態でローカルで実行を確認しておきます。

Githubリポジトリを作成する

Githubの+ボタンからNew repositoryを選択します。

Repository nameに作成するリポジトリ名を入力します。
Add READMEも有効にしておきます。
今回はpyxel-public-nekoとしてリポジトリを作成します。

画面下のCreate repository で作成する。

ファイルのアップロード

作成したリポジトリにファイルをアップロードします。
先ほど作成したindex.htmlとappをアップロードします。

Commit changesを押します。
これでリポジトリにコミットされます。

index.htmlとnoko.pyxappが追加されていることが確認できます。

Github Pagesの設定

ブラウザで公開するための設定を行います。
上部のメニューのSettingsを選択し、左側の項目からPagesを選択します。

Branchでmainを選択してSaveボタンを押します。

Vist siteが表示されれば成功です。
反映までに多少時間がかかるケースがある様ですので、少し時間を空けてから再度ページにアクセスしてください。

ゲームの起動を確認

Vist siteを押すことでブラウザで起動が確認できます。

iPhoneのブラウザからも起動が確認できました。

これで無事に公開することができました。
こちらのURLを教えて色々な人に触ってもらえる様になります。

更新方法

再度pyxappのビルド、html出力を行い、index.htmlと.pyxappをアップロードすることで更新されます。
githubで反映されるのに時間がかかるケースがあるので少し時間を空けてからアクセスしてください。
ブラウザによってはキャッシュで更新が反映されない場合があるので強制リロードを試してください。

参考

github.com