pyxelをブラウザ上で実行してみる

2022年9月26日 12:18

pythonのレトロゲームエンジン「pyxel」がブラウザ上で実行できるようになりました。作者のkitaoさんのTwitterからソースコードを拝借し、少し改造してみます。

まず、ブラウザで実行という事はWebサーバーを動かさなければなりません。自分でApacheとかを入れても良いのでしょうが、ここではもっと簡単な方法があります。使ったことはなかったのですがpythonには標準ライブラリとして開発用Webサーバーを起動するものがあるようなのでそれを使います。

僕の環境はAnacondaなのでプロンプトを開きます。そして「ドキュメントルートにしたいフォルダ」に移動したら以下のコマンドを実行。今回は「C:\python\web_test」というフォルダを新規作成しています。
※ドキュメントルートとはサーバーにアクセスされたときに最初に見せるフォルダみたいな感じです。

python -m http.server 8000

成功すると下記のようなメッセージが表示されます。

Serving HTTP on :: port 8000 (http://[::]:8000/) ...

もしも「Python」とだけ表示される場合はコマンドがきちんと通っていません。頭のpythonをpython3に変えたりしてみてください。

この状態でhttp://localhost:8000にアクセスすると下記のような画面が表示されます。

これはドキュメントルートのディレクトリが表示されています。試しに適当なファイルを配置してリロードすると…

ここに「index.html」という名前でファイルを配置すると読み込み時にそれが実行されます。この自動実行されるファイル名は自分で変えることができたり、フレームワークを使うと変わったりいろいろありますがここでは割愛。

まずはkitaoさんのTwitterから持ってきたコードを。

<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel@v1.8.17/wasm/pyxel.js"></script>
<pyxel-run script="
import pyxel
pyxel.init(100, 80)
pyxel.cls(8)
pyxel.line(0, 0, 100, 80, 7)
pyxel.show()
"><pyxel-run>

▲これを「index.html」の名前で該当フォルダに保存します。
ブラウザで見てみると…

コードの中身としては「pyxel-run」のタグで囲まれたところに書いていけば良いみたいですね。それを実行するために頭のjsライブラリ？が必要だということか？
「cdn.jsdelivr.net」はプラグインとかライブラリの配信サイトのようです。

グラフィック周りの描画命令は問題なく実行できそうです。エディターで作ったリソースファイルはうまく読み込めずに断念。

続いて実際のアプリケーションを動かしてみます。
こちらもkitaoさんのTwitterにコードがあるのでまずはそちらを実行。

<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel@v1.8.17/wasm/pyxel.js"></script>
<pyxel-play root="https://cdn.jsdelivr.net/gh/kitao/pyxel@main/python/pyxel/examples" name="megaball.pyxapp"></pyxel-play>

▲頭のscript文は一緒ですね。pyxelを動かす基盤のようなものでしょう、たぶん。その次はこれも同じサイトから何か取ってきています。rootとnameの指定があります。nameに.pyxapp形式が指定していますね。rootは良く分からない。

とにもかくにも実行してみます。

なんか動きました！
ということはnameは実行する.pyxappってことでよさそうですね。rootはおそらくはその.pyxappファイルがある場所？でしょうか。

ちょっと改造してみます。
まずは動かす.pyxappファイルを作成。以前作った迷路ゲームにします。.pyxappファイルの作成方法は下記noteをご参照ください。

作った.pyxappファイルをドキュメントルートに配置します。次はindex.htmlの修正。

<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel@v1.8.17/wasm/pyxel.js"></script>
<pyxel-play root="./" name="pyxel_maze.pyxapp"></pyxel-play>

▲「pyxel-play」の部分を変えています。.pyxappファイルはindex.htmlと同じ階層にあるのでrootは「./」、nameはファイル名そのものです。

ブラウザで見てみます。

表示されました。
画面が変わらない場合はブラウザキャッシュを削除すると良いかもしれません。

しかしこれはすごいです。ゲーム配布の敷居が下がりますし、ポータルサイトのようなものもできるかもしれません。何より自分の作ったゲームがブラウザで動いているのが楽しいですね。

ではではこういうことも出来るのか。

▲ドキュメントルートにフォルダ分けを作成。
それぞれ別の.pyxappファイル、index.htmlを置きました。

これでmazeのリンクをクリックすると…

rpgのリンクをクリックすると…

nameの部分を動的に分けることができればフォルダ分けをしなくとも同じ動きができそうですが、単純に実現するとしたらこんな形でしょうか。

いろいろ面白いことができそうですが、本格的にやるとなるとWebサーバーの方の知識が必要になりそうです。仮想環境でも作ってチャレンジしてみるか、ちょっと考え中です。

今回はここまで。
読んでいただきありがとうございました。

ここまで読んでいただきありがとうございます！