今回は、ブラウザですぐ動かせるシンプルな構成でゲームを作っていきます。
使用する技術は Phaser 3 です。
本日利用するソースコードはこちらからダウンロードできます。
採用した技術
フレームワーク：Phaser 3.60（CDN）
Phaser 3 は、2Dゲームを手軽に作れるJavaScript向けのゲームフレームワークです。
今回は CDNで読み込む方式 を採用し、Vite や webpack などのビルドツールは使いません。
この構成にした理由
今回の目的は、できるだけ手軽にゲーム開発を始めることです。
CDNを使えば、ライブラリをインストールしなくても、HTMLファイルに script タグを1行書くだけで利用できます。
また、アセットが少ないシンプルなゲームであれば、この方法だけで十分に開発できます。
環境構築に時間をかけず、すぐに画面を動かして試せるのが大きなメリットです。
採用しなかった案
今回は次の案は採用しませんでした。
- Vite + npm
セットアップが必要になり、最初のハードルが少し上がるため - vanilla Canvas API
Phaserには Scene、Tween、Physics など便利な仕組みがあり、ゲーム開発を進めやすいため
影響範囲
この決定による影響はとても小さく、主に index.html に CDN の script タグを追加するだけです。
必要に応じて type="module" を使い、ES Modules でコードを書くこともできます。
まとめ
今回は、「まず動くものを早く作る」 ことを重視して、
Phaser 3.60 を CDN で読み込む構成 を選びました。
シンプルな構成からスタートすることで、ゲームのアイデアや仕様の検討に集中しやすくなります。
今後はこの土台の上で、少しずつゲーム画面や操作機能を作っていきます。