【Python】pygameをjavascriptで動かす

2019年5月30日

最近はスマホで pythonの開発が行えるということで、スキマ時間にコツコツとゲーム開発できる環境としてpython + pygameを検討しています。

デスクトップアプリなどは普通に作れますが、せっかく作るのであればブラウザ上でも動かしたいという欲求がでてきたので pythonコードを javascript に変換する方法を探してみました。

調べたところ、残念ながら日本語の情報を見つけることができなかったので英語の記事を探って試してみたことを記録しておきます。

Pyjsdl

pygameのAPI設計を踏襲したjavascriptのライブラリを作ってくださっている方がいました。

本家 GATC

Pygame 公式からもリンクがされていました

ちなみに Java 版のPyJ2Dというライブラリもあるようです。

なお、本家の方が新しいバージョンが公開されています。以下のリンクかgithubのソースをダウンロードします。※pipでは配布されていない様です。

本家の説明によるとPyjs というPythonコードをJavascriptコードに変換するコンパイラを使用して変換するとのことでした。

ダウンロードしたpyjsdlのソースコードをみると、pygame APIのインターフェイスに習ってAPIが定義されています。その中身は、Pyjs の HTML5 Canvasの機能で描画するコードが書かれていました。

なるほど、それならブラウザで動くわけですね。

もし、WebGLに対応した javascriptコンパイラーがあれば同じような形でPyjsdl に代わるGlueコードを自作すれば描画の高速化が狙えるかもしれないですね。(本格的にブラウザゲーム作りたくなったらやってみるかも)

Pyjsdlのサンプルソースをダウンロード

動作検証の為、本家のサンプルソースをダウンロードしてみました。リンク場所がわかりにくいですがこちらです。

サンプルソース https://s3.gatc.ca/files/Pyjsdl_App.zip

青くなっている script の部分がリンクになっています。Launchをクリックするとゲームが遊べます。

zipを任意の場所に解凍すると、serpentduel.py というソースがあります。

サンプルソースの中でポイントになるのは、pyjsdl を pygameの名前でインポートする部分です。

import pyjsdl as pygame     #pyjsdl import

APIの定義(インターフェイス)が同じなので、この最小の変更で javascript へ変換する準備ができたことになります。

Pyjsdlのインストール

本家ページのダウンロードリンク

githubのリンク

インストールと言っても zipファイルを展開し、フォルダ名を pyjsdl にしてサンプルソースのプロジェクトに突っ込みます。

※私が最近 pythonを勉強しはじめたばかりなので pip install に相当するインストール方法があるのかもしれないです。

ただ、pip は使えず、setup.py も含まれていないので次節で Pyjsにコンパイルさせる為に直接プロジェクトフォルダに入れる方法をとりました。

Pyjsのインストール

似た様な名前が続きますが(笑)、これが Python => javascript に変換するコンパイラです。

pipのコマンドでインストールできます。

pip install git+https://github.com/pyjs/pyjs.git#egg=pyjs

これで pyjsbuildコマンドが使えるようになるので サンプルの serpentduel.pyを指定して、js にコンパイルします。

pyjsbuild <対象ソース>.py

するとカレントディレクトリにoutputというディレクトリが作成されて、そこに依存関係のあるソースと共に js に変換された web ページ一式が出力されますので、動作確認用に適当なサーバーにアップします。

※ローカルマシン上で実行しようとすると[Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame.]というエラーが吐かれて動きません。

これはセキュリティ的に危険なクロスサイトスクリプティングを防止する為のエラーで、ブラウザ起動時などに引数を与えることで開発時のみ一時的に許可できる様です。気になる方は調べてみてください。

個人的には実際の動作を確認する意味でも検証用のスペースは用意しておいた方が良いと思います。

メモ:Pyjsdlのリソース一覧

https://gatc.ca/projects/pyjsdl/resources/

上記を私が試した試した結果

サンプルプロジェクトを自分でコンパイルしてアップロードしたものです。

http://nora-soft.sakura.ne.jp/sample/js/output/serpentduel.html

まとめ

クロスプラットフォーム開発のできる環境として、UnityもWebGLに対応しているのですが、最近の生活の中で mac book 片手に開発する余裕がないので、スマホでもコツコツアプリを作れる環境として python を調べ始めたのが今回の記事を書くきっかけでした。

個人的には javascript にはどうも慣れないし、できれば同じソースを元に作りたかったということで、python => javascript に変換できる環境は魅力的でした。

需要は高い気がするのですが、これらの技術については、まだ発展途上の印象も受けています。より手軽に低コストで開発できる様に技術が発展していくことを願っています!