Phaserノススメ

Phaserを知っていますか？
Javascriptベースの2Dのゲームエンジンです。

Phaser - A fast, fun and free open source HTML5 game framework

前にUnityのDonwload Fee問題で移行先のゲームエンジンについて議論が活発になっていましたが、Phaserの名前はなかなか出ませんでした。残念。

最近、Phaserでつくったゲームをリリースして、そのゲーム開発体験がとてもよかったので、紹介したいと思います。

Soul Chain by hiraski

BASICという古のゲーム開発環境

少し昔話を。
その昔、BASICという言語がありました（今もあるけど）。

BASICはあらゆるPCで動作し、若干の機種依存性はあったにせよ、大抵は同じ記述で動作しました。

それゆえ、他のPC向けに書かれたBASICプログラムは、別のPCでも少し手を加えるだけで動作しました。

私が最初に手に入れたPCは、親が会社からお下がりでもらってきたN5200という、当時PC98が全盛だった時代に誰も持っていない業務用PCでしたが、BASICはついていました。

当時マイコンBASICマガジン（ベーマガ）という月刊雑誌があり、パソコン野郎たちがつくったプログラムが毎号何本も掲載されていました。

ベーマガにはN5200用のプログラムは掲載されていませんでしたが、文字しか使えないPC-8001などのプログラムに少し手を加えれば、N5200でも動かすことができましたので、面白そうと思ったプログラムを入力して楽しんでいました。

BASICの良いところは、LOCATEという文字を表示する場所を制御するコマンドと、PRINTという文字を表示するコマンドで、INPUTという入力を受け付けるコマンドですべてを表現しないといけないところです。手段の少ないことが、逆にツールをすぐ使いこなすことにつながり、自分の思い通りに動くプログラムをつくることができました。

BASICっぽいPhaserというゲームエンジン

Phaserを触っていると、BASICっぽいなと思います。
Phaserそのものは単なるフレームワークで、JavaScriptという言語がそもそもBASICっぽいからというのもあるのですが、Phaserの手触りがBASICっぽいなと思います。

    class Example extends Phaser.Scene
    {
        preload ()
        {
            this.load.setBaseURL('https://labs.phaser.io');

            this.load.image('sky', 'assets/skies/space3.png');
            this.load.image('logo', 'assets/sprites/phaser3-logo.png');
            this.load.image('red', 'assets/particles/red.png');
        }

        create ()
        {
            this.add.image(400, 300, 'sky');

            const particles = this.add.particles(0, 0, 'red', {
                speed: 100,
                scale: { start: 1, end: 0 },
                blendMode: 'ADD'
            });

            const logo = this.physics.add.image(400, 100, 'logo');

            logo.setVelocity(100, 200);
            logo.setBounce(1, 1);
            logo.setCollideWorldBounds(true);

            particles.startFollow(logo);
        }
    }

これはPhaserのサンプルコードですが、指示したものがそのまま表示される、とても直感的なコードです。

インストールが簡単

JavaScriptなので、npmかyarnで一発でインストールできます。

具体的な方法は以下などでどうぞ。

Phaser 3 + Webpack + Typescript でゲームを作る - Qiita

JavaScriptなので、Githubでも簡単に構成管理できますし、他のPCで開発することになった場合でも簡単に環境を再現できます。

フレームワークが簡単

フレームワークというと、膨大で全体の把握が難しいものというイメージがあるかもしれませんが、Phaserはとても簡単です。

基本はSceneというクラスでシーンを記述していきます。
フレームワークとしての作法はありますが、1クラス内ですべての振る舞いを書ける感じがBASICっぽいです。

UnityもUEも統合環境上で作業し、コードを書くことはメインではありませんが、Phaserはコードを書かないと動作しません。
逆に言うと、コードで書ける範囲で把握できればよいということです。

日本語の情報はまだまだ少ないですが、サンプルもたくさんありますし、簡単に動かせますので、いろいろいじってみればすぐ分かるでしょう。
サンプルコードがあって、それをベースに動かしていけるところも仕組みが簡単だからであり、Phaserの良さだと思います。

アセット管理が簡単

本格的なゲームでのアセット管理はまた別ですが、ちょっとしたゲームをつくる上でも、アセット管理は結構面倒なものです。
コンテンツパイプラインを用意したり、アセットバンドルを用意したり。

Phaserはただ画像ファイルや音楽ファイルをassets/ディレクトリに置けばよいだけなのでとても簡単です。
統合環境ではないので、素のファイルをいじることもできます。

凝ったこともできる

簡単なだけだと、何もできないゲームエンジンなのかと思われてしまいますが、パーティクルやFX、Tweenや物理エンジンなど、一通りの機能はそろっています。
ただ2D専用なので、3Dの機能はありません。

簡単なゲームをすぐつくれる

ゲームが飽和している今の時代は、シンプルなゲームに魅力があるか分かりませんが、どんな時代、どんなジャンルでも自分で歩み出す最初の一歩は特別だと思います。

Phaserならキャラを動かしたり、テキストを表示したりも簡単にできます。
簡単なゲームならすぐつくって動かせるでしょう。

最初の一歩が簡単であることは、その後に歩み続ける助けになってくれると思います。

ぜひ、Phaser、触ってみてください。

Phaser - Making your first Phaser 3 game