mieki256's diary

インストールは以下。

pip install pygbag
or
python -m pip install pygbag

今回は pygbag 0.9.3 がインストールされた。

pygameを使ったスクリプトは、そのままでは pygbag 用にならないので、ほんのちょっとだけ修正が必要らしい。以下を参考にして修正。

_【pygbag】「たった10分で」pygameをブラウザ上で動かす! #Python - Qiita

以下を修正すればいいのかな…？

• スクリプト名は main.py にしておく。
• スクリプトや画像の類は任意のフォルダに入れておく。
• import asyncio を最初のあたりに追加。
• def main(): を async def main(): に変更。
• clock.tick() の直後に await asyncio.sleep(0) を追加。
• main関数を asyncio.run(main()) で呼び出すように変更。

pygbag を呼び出して、Webブラウザで実行できる状態に変換する。スクリプトが入っているフォルダと同階層で以下を打つ。

python -m pygbag フォルダ名

変換終了後、Webサーバが実行されて待ち状態になるので、Webブラウザで http://localhost:8000/ にアクセスすれば、pygameスクリプトをWebブラウザで実行できる。

終了はコマンドプロンプト上で Ctrl + C。

フォルダ名\build\web\ の中に公開用のファイル群一式が入っている。今回は以下が入っていた。これをWebサーバ上にアップロードすればいいのだろう…。

favicon.png
hellopygbag.apk
hellopygbag.tar.gz
index.html

Webサーバが Apache の場合、かつ、このあたりのファイル種類について設定がされてない場合は、.htaccess でファイル種類を指定する必要があるかもしれない。

AddType application/wasm .wasm
AddType application/octet-stream .data
AddType application/octet-stream .apk

.gz が x-gzip に割り当てられてない場合は以下の記述も必要、とAI (Google Gemini)が言っている。自分の環境では指定しなくても動いてくれた。おそらく Apache2 全体の設定で既に指定されているのだろう…。

<IfModule mod_mime.module>
    AddEncoding x-gzip .gz
</IfModule>

AIは、キャッシュを使わないようにする設定も提示してきたけれど、その指定は必要なのかな…。

Webサーバに置いてみたけれど、実行できるだろうか…。

_pygbag sample

ページを開いて、ロードが終わると、Firefoxの場合は「準備できたからタッチせよ」と英文で言ってくるのでページをクリックすれば動く。はず。動くといいなあ…。Google Chrome の場合は、ロードが終わればそのまま実行開始になった。

Firefox 152.0.4、Google Chrome 150.0.7871.4上では動いてくれた。手元の環境、CPU : AMD Ryzen 5 5600X、GPU : NVIDIA GeForce GTX 1060 6GB 上では結構滑らかに動いている。

ソースと画像は以下。 AI(Google Gemini) に作成してもらった。このくらいのスクリプトなら一発で生成してくれるのね…。

_main.py
_image.png