プロローグ

はじめまして！

某シミュレーションRPGが2021年で25周年とか。リメイクがなかなか出ないことにしびれを切らし、理想的なシステムを実現したSRPGを作ろうと決めました。

とはいえ、筆者自身は40オーバーのおじさん。ユーザー系IT子会社の管理職です。思いっきりJava1.4＋Oracle9i世代のため最新のフロントエンドについていけておらず、 typescriptの勉強がてら、ゲームエンジンPhaser3を使って、作り始めました。

どこまで続くかわかりませんが、よろしくお願いします。

一応、すでにマップが表示されたり、カーソルが動いたり、ユニットのキャラが表示されること、このくらいまでは実装できているので、ネタはそこそこあります。

Javascriptの非同期処理、Promiseの使い方、Browser表示におけるnode.jsライブラリの使い方等、すでに何回も詰まって、多分20時間以上費やしてますので、その辺りの解決へのプロセス等、覚えてる限り記録に残せたらと思います。

ということで、最初は環境設定から、、と思いますが、#002で述べたいと思います。

とはいえ、環境設定は未だに完全なものができていない状況。もしかしたら、#003：はじめてのPhaser3から書き始めるかも。。

まあそれもご愛嬌ということで、ご容赦いただければ。

Phaser3とは

(2021/6/20追記) そういえば、Phaser3の説明をしていないことに気づき、今頃、補足です（それも軽めに）。

Phaser3は、HTML5用に使える2Dゲームエンジンです。ゲームエンジンとは、ゲーム用のフレームワークです。ですので、ゲームで使える色々な機能が備わっています。例えば、

タイルセット機能･･･少ない画像をセル単位で繰り返し使い回して画面を作成する機能。スーパーマリオブラザーズに代表される初期ファミコンのような画面を手軽に作成可能
重力空間機能･･･いかにも重力が働いてるような動きを手軽に作り出してる機能。速度を指定できるので、普通の地球上だけでなく、月上とか、海とか、色々表現可能。この連載のように重力設定をしないことも勿論可能
画面遷移機能･･･一つのゲームのように画面を遷移させる機能等があります。

この業界、他にもUnityやUnreal Engineといったゲームエンジンが有名ですが、Phaser3は、Facebookがサポートしていることと、Unityとかは.NET Coreで3D表現も得意ですが、 2D用だけどJavascriptで手軽にコーティングできることが特徴でしょうか。

このブログでは、JavascriptやTypescriptも勉強もしつつ、ということなのでPhaser3でやってみたいと思います。日本語の書籍もないですし。

	タイトル	記載内容
#001	プロローグ	Phaser3とは
#002	環境設定	インストール・ビルド環境設定
#003	はじめてのPhaser3	初回稼働・キャンバス表示
#004	マップ作成	タイルセットの読込、画面手動作成、Sceneクラスのライフサイクル
#005	Tiledの利用	Tiledによる画面マップJSON作成、マルチレイヤーの背景画面
#006	JSONファイルの読込	データのpreload
#007	ファイルのキャッシュ	ゲームデータの管理
#008	データモデル（ユニット編）	SRPGに必要なデータ・管理方法
#009	カーソルの移動	キー受け付け、Spriteの活用
#010	各メソッドのコールと状態遷移	Sceneメソッドのライフサイクル・デバッグモードの作り方
#011	ユニットの移動(1)	Tweenオブジェクト、味方ユニット移動
#012	ユニットの移動(2)	移動可能領域の表示