旧SEによる日曜プログラミング日記

趣味は作曲、自分で一から作りたがりのユーザIT子会社の旧SE(かつてはプログラマー)によるリハビリのための日曜プログラミング日記です。

Phaser3+typescriptでSRPGを開発してみる #001 プロローグ

プロローグ

はじめまして!

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

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

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

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

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

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

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

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

f:id:mtmusic34:20210612093407p:plain
今のところできている画面

Phaser3とは

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

phaser.io

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メソッドのライフサイクル・デバッグモードの作り方