Phaser入門：JavaScriptゲームフレームワークで最初の1本

Phaserを選ぶ理由と向き不向き

Phaserの最大の強みは、ブラウザ完結で動き、外部プラグインなしに物理演算や衝突判定が使える点です。出力はHTMLとJavaScriptのファイルだけなので、アップロードするだけで公開できます。公式ドキュメントとコミュニティが充実しており、日本語の解説記事も増えています。

一方で、3Dゲームには向きません。3Dを作りたい場合はThree.jsやBabylon.jsを検討するほうが合理的です。また、Phaserはバージョン3（Phaser 3）と、それ以前のバージョン2系（CE）で書き方が大きく異なります。現在新しく始めるならPhaser 3を選んでください。バージョン3はシーンという単位でゲームの状態（タイトル・プレイ中・ゲームオーバーなど）を分けて管理する設計になっており、コードの整理がしやすくなっています。

RPG・アクション・パズル・シューティングなど多くの2Dジャンルで実績があり、個人制作のブラウザゲームで広く使われているフレームワークです。

環境を整えて最初のファイルを作る

開発に必要なものは軽量です。テキストエディタ（VS Codeが一般的です）と、ローカルでファイルを配信できる簡易サーバーがあれば始められます。

Phaserのファイルはいくつかの方法で用意できます。

1. CDNを使う：HTMLの<script>タグにPhaserのCDN URLを書くだけで読み込めます。ファイルのダウンロードが不要で、手早く試したいときに向いています。
2. ローカルファイルを使う：公式サイトからJSファイルをダウンロードしてプロジェクトフォルダに置きます。オフライン作業や、バージョンを固定したいときに選びます。
3. npmで管理する：npm install phaserでインストールし、バンドラー（ViteやWebpackなど）と組み合わせます。プロジェクトが大きくなったときに向いています。

最初の1本を試すだけなら、CDN方式が最も手順が少なくて済みます。ローカルサーバーはVS Codeの「Live Server」拡張や、Node.jsが入っていればnpx serveコマンドで立ち上げられます。単純にHTMLファイルをブラウザで直接開くと、画像などのアセットがセキュリティ制限で読み込めない場合があるため、サーバー経由でアクセスするのが確実です。

最小構成のシーンを書く

Phaserのゲームは、Phaser.Gameのインスタンスを作るところから始まります。設定オブジェクトに画面サイズ・物理エンジンの種類・シーンのクラスを渡します。

ゲームの中身はシーンクラスとして書きます。シーンには主に3つのメソッドがあります。

• preload()：画像や音声などのアセットをここで読み込みます。this.load.image('player', 'player.png')のように書きます。
• create()：ゲームオブジェクトをここで配置・設定します。スプライトの生成、当たり判定グループの設定、キーボード入力の登録などがここに入ります。
• update()：毎フレーム呼ばれ続けるループ処理です。キー入力に応じたキャラクターの移動、スコアの更新などをここに書きます。

最初に動く状態として「背景色のある画面に画像を表示して矢印キーで動かす」だけを目指すとよいです。物理演算を使う場合は設定でphysics: { default: 'arcade' }を指定し、this.physics.add.sprite()でスプライトを生成します。Arcadeフィジクス（単純な矩形・円での衝突）はPhaserに組み込まれており、追加インストール不要です。

よく迷うポイントが2つあります。ひとつは座標系です。Phaserのデフォルトでは左上が原点（0, 0）で、右・下方向に値が増えます。スプライトの位置は中心点で指定するため、画像の左端を原点に合わせたい場合はsetOrigin(0, 0)を使います。もうひとつはアセットのパスです。preload()で指定するパスはHTMLファイルからの相対パスではなく、サーバーのルートからの相対パスになります。ファイルが見つからずにエラーが出た場合、ブラウザの開発者ツールのNetworkタブでパスを確認してください。

ゲームらしくする：入力・衝突・スコアの最低ライン

動くだけで終わらず「ゲームの形」にするには、プレイヤーが何かに触れたときに起きる処理、スコアや残機を表示するUIが必要です。

衝突判定はArcadeフィジクスではthis.physics.add.overlap()またはthis.physics.add.collider()で設定します。overlapは重なり検知（貫通する）、colliderは物理的に押し合う判定です。コールバック関数を渡すことで、触れたときの処理（アイテムを消す、スコアを増やすなど）を記述できます。

テキスト表示はthis.add.text(x, y, '文字列', スタイルオブジェクト)で追加します。スコアを更新するときはtextオブジェクト.setText('Score: ' + score)のように呼び出します。

シーン遷移はゲームオーバーやクリア後に必要です。this.scene.start('GameOverScene')のように書くと指定したシーンに切り替わります。シーン間でスコアなどのデータを渡したい場合は、start()の第2引数にオブジェクトを渡し、遷移先でthis.scene.settings.dataから受け取ります。

完成後の公開と次のステップ

ゲームが動いたら、HTMLファイルと関連ファイル（JS・画像・音声）をZIPにまとめてアップロードすれば公開できます。アソバースはZIPファイルの直接投稿に対応しているため、特別なサーバー設定なしにブラウザゲームとして公開できます。

次に学ぶ内容としては、タイルマップ（Tiledというソフトで作ったマップデータをPhaserで読み込む方法）、アニメーションの設定（スプライトシートからコマを指定して再生する）、モバイル対応（タッチ入力と画面サイズへの対応）などが実用的です。Phaserの公式ドキュメントには「Examples」セクションがあり、機能ごとに短いサンプルコードが揃っています。実装したい機能を探してそのまま動かして確認するのが、習得の近道です。

次の行動

Phaserの公式サイトにある「Getting Started」ガイドと「Examples」を参照しながら、まず「キャラクターが矢印キーで動くだけ」の最小構成を手元で完成させてください。その状態のファイルをZIPにまとめてアソバースに投稿すると、ブラウザ上で動く状態を他の人にも確認してもらえます。次の機能はそこから1つずつ足していくと、詰まりにくくなります。

参考資料

• Phaser 公式ドキュメント（Phaser.io）
• Phaser 公式 Examples（labs.phaser.io）