Python向けレトロゲームエンジンPyxelがWebに対応しました！

Pyxel Python

2018年6月に最初のリリースを行ってから、早いものでもう4年。少しずつ機能の追加と改良を重ね、Python向けレトロゲームエンジンPyxelはバージョン1.8になりました。

Pyxel 1.8系のテーマは対応プラットフォームの拡大です。

元々マルチプラットフォーム対応を謳っていましたが、1.8では対応プラットフォームの強化を進め、正式に以下の環境をサポートするようになりました。

そして、現在急ピッチで整備を進めている最後の大物プラットフォームがWebブラウザです。

Web版Pyxelはようやく一通りの機能が動作するようになったところなのですが、すでに様々な応用の可能性が見えてきていますので、今回はWeb版Pyxelの面白いところや、基本的な使い方などをご紹介したいと思います。

レトロゲームエンジンPyxelについて

Pythonを触っていて、Pyxelのことをまったく知らないという方は少なくなりつつあるかと思うのですが（願望）、PyxelはPythonでドット絵タイプのゲームを簡単に作れるゲームエンジンです。

https://github.com/kitao/pyxel/raw/main/docs/images/pyxel_logo_152x64.png

詳細は公式サイトをご覧いただくとして、特長を簡単におさらいすると、

  • シンプルな仕様と簡単なAPIで気軽にゲーム制作が楽しめる
  • グラフィックスやサウンドの制作ツールが同梱されている
  • Pythonモジュールなので他のパッケージと組み合わせて使える

といったあたりになります。

https://github.com/kitao/pyxel/raw/main/docs/images/image_tilemap_editor.gif

おかげさまでGitHubのスター数も1万を超え、スター数で見るとPython向けゲームライブラリとしては人気No.1、オープンソースのゲームエンジン全体でも世界で5〜6位くらいの人気度となり、日本発のゲームエンジンが世界に多少なりとも存在感を見せられて良かったと感じております。

https://github.com/kitao/pyxel/raw/main/docs/images/pyxel_star_history.png

ちなみにフランスではPyxelを題材にした400校以上が参加する大規模なプログラミングコンテストが開催されているそうですので、日本でも何かイベントが行えると良いなと思っている今日この頃です。（どなたか企画案ありましたらご提案よろしくお願いします！）

Web版Pyxelの導入方法

1.8で対応が始まったWeb版Pyxelですが、Web技術の活用により利用の敷居が劇的に低くなりました。

これまでもpip install -U pyxelで、Pythonパッケージとして1コマンドでインストールすることはできましたが、Pythonのインストールやpipコマンドを使える状態にする等の事前準備が前提となっていました。

一方、Web版Pyxelでは、HTMLファイルに次の１行を追加するだけで準備完了です。

<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>

Pythonのインストールもpipのセットアップも必要ありません！

また、Pyxelのコードやアプリ(.pyxapp)をGitHubに置いている場合は、HTMLファイルの作成すら行わず、Pyxel Web LauncherのURLにファイルの置き場を指定するだけで動かすこともできます。

Pythonのコマンドを直接実行する

それでは実際にPythonでPyxelのプログラムを書いてみましょう。

Pythonコードを直接実行したい場合は、HTMLでpyxel-runタグのscript属性に実行したいコードを記述します。例えばこんなファイルを作成して、

<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
<pyxel-run script="
import pyxel
pyxel.init(200, 150)
pyxel.cls(8)
pyxel.line(20, 20, 180, 130, 7)
pyxel.show()
"></pyxel-run>

それをpyxel.html等、適当なファイル名で保存してWebブラウザで開くと、次のような画面が表示されます。

何の準備もなく、いきなりPython＋Pyxelのコードが実行できていることがお分かりいただけるでしょうか。

また、ファイルの形式は通常のHTMLですので、他のWebサービスと組み合わせることも可能です。

例えばオンラインWebプロトタイプ環境のCode Penでコードを入力すると、同様にPyxelを動作させることができます。

See the Pen pyxel-run test by Takashi Kitao (@kitao) on CodePen.

Web (HTML/CSS/JavaScript)のためのサイトでPythonがいきなり動いているところが面白いですね。

Pythonのファイルを実行する

HTMLファイルの中にPythonコードを書くのではなく、別ファイルを読み込んで実行したい場合は、pyxel-runタグのroot属性とname属性を使います。

rootはファイルを検索する起点となるディレクトリ、nameはファイル名になります。ファイル名は起点からの相対パスで記述します。

例えば先ほどのPythonコードをpyxel.pyというファイル名で、HTMLファイルと同じディレクトリに置いた場合は、

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

のように書きます。なお、起点がカレントディレクトリ('.')である場合は、root属性は省略可能です。

ファイルの実行方法ですが、ローカルのHTMLファイルから別のローカルファイルを直接読み込むことは禁止されているため、実行のためのサーバーを立てることが必要になります。

Pythonが使える環境であれば、ファイルを置いたディレクトリで、

python -m http.server
# MacやLinuxの場合はpythonの代わりにpython3を使ってください

と入力すれば現在ディレクトリを起点にサーバーが起動しますので、ブラウザからhttp://localhost:8000/pyxel.htmlのようにアクセスできます。

また、次のように起点となるディレクトリにURLを指定することもできます。

See the Pen pyxel-triangle by Takashi Kitao (@kitao) on CodePen.

こちらの場合は読み込み先のファイルがローカルではないので、サーバーを立てなくてもブラウザで直接閲覧可能です。

Pyxelアプリを実行する

同様にPyxelアプリ(.pyxapp)もpyxel-playタグで再生可能です。

See the Pen pyxel-megaball by Takashi Kitao (@kitao) on CodePen.

他のパッケージを使用する

Pyodideでサポートされているパッケージであれば、Web版Pyxelと一緒に使用することができます。

パッケージをインストールするには、packages="package1,package2,..."のようにカンマ区切りでpyxel-runやpyxel-play要素にパッケージ名を指定してください。

バーチャルゲームパッドを使用する

pyxel-run、pyxel-playタグに次のようにgamepad="enabled"を追加することで、タッチデバイスでバーチャルゲームパッドを使用することができます。

 <pyxel-run name="02_jump_game.py" gamepad="enabled"></pyxel-run>

バーチャルゲームパッドは画面へのタッチ入力を、

  • GAMEPAD1_BUTTON_DPAD_UP
  • GAMEPAD1_BUTTON_DPAD_DOWN
  • GAMEPAD1_BUTTON_DPAD_LEFT
  • GAMEPAD1_BUTTON_DPAD_RIGHT
  • GAMEPAD1_BUTTON_A
  • GAMEPAD1_BUTTON_B
  • GAMEPAD1_BUTTON_X
  • GAMEPAD1_BUTTON_Y

の4つのゲームパッド用ボタンの入力に変換します。

Pyxel Web LauncherでPyxelアプリを実行する。

PythonコードのファイルやPyxelアプリ(.pyxapp)がGitHubに置いてある場合は、Pyxel Web Launcherで直接起動することができます。

Pyxel Web LauncherでPyxelアプリを起動する場合の書式は以下の通りです。

https://kitao.github.io/pyxel/wasm/launcher/?play=<githubのユーザー名>.<リポジトリ名>.<アプリのディレクトリ>.<拡張子を取ったアプリ名>

例えば、ユーザー名がtaro、リポジトリ名がtaro_repo、アプリのディレクトリがdist/games、アプリ名がshooter.pyxappだった場合は、

https://kitao.github.io/pyxel/wasm/launcher/?play=taro.taro_repo.dist.games.shooter

がURLになります。

最後に

現在のWeb版Pyxelのサンプル一覧のリンクを置いておきます。目下のWeb向けの機能は全て使っていますので、参考にしてみてください。

kitao.github.io

Web版Pyxelは簡単に導入でき、色々な組み合わせも可能ですので、「Pyxel向けオンライン開発環境など」アイデア次第で様々なことが実現できます。

みなさんも是非色々なことにチャレンジしてみてください。素敵なご報告をお待ちしております！