開発環境構築

Last update: 2021/01/12 by 管理人

このページでは、Phaser の開発環境構築について記載しています。

基本的な環境構築

公式ページのチュートリアル、GettingStarted にて、環境構築方法の紹介がされています。
基本的に、こちらの内容通りに進めて開発環境を作ることができます。

ゲームを動かすにはサーバーを立ち上げないといけません。
チュートリアルの内容では以下のサーバーの例が紹介されています。

その他オプションとして以下が上げられています。難しい

Linux 上での開発にある程度慣れている方！
ネットの構築例では、サーバーには Express を使う例が多いようです。

管理人も初期の頃は Express で構築していました。
ただ、構成上仕方ないですが、プロジェクトフォルダ内の Express 関連のファイルがちょっと邪魔です…😅

webpack でバンドルを行うついでに、webpack server を実行して動かすという手段もあります。
以下の Typescript 環境構築では、webpack server または webpac-dev-server を利用しています。

公式は Typescript のスターターテンプレートを用意しています！
コーディング中に PhaserAPI の型情報が参照できるため、かなり便利です。

このスターターのバンドルには rollup.js が使われています。
rollup.js は設定が分かりやすいのがメリットです。
ただ、webpack よりもビルド速度は劣ると感じました。

公式以外でも、開発環境のテンプレートを公開されている方がいます。
利用する場合、最後にメンテナンスされたのがいつなのかをチェックしましょう。
JS/TS,webpack 関連は進化が早いので、古い環境だと、思わぬビルドエラーが発生するかも知れません。

日本語情報もいくつかあります。
比較的最近のものを紹介します。

Typescript で構築する記事
- webpack 構成です。丁寧な解説です。
Qiita の記事おすすめ
- Phaser 3 and TypeScript を改造した感じです。詳細に内容を解説しています
- tslint や prettier にも踏み込んでいるので、結構実践的な内容です

参考になるかは分かりませんが、現在(2020/12)の管理人の開発環境を記載します。

下記の Github リポジトリに置いてあります。
何かの参考にして下さい。

この構成で動作するゲーム画面のデモは以下で見れます。