Phaser3で画面遷移 on CodePen

Phaser3で画面遷移 on CodePen

このnoteの続きとして、今回はタイトルにあるようにPhaser3による画面遷移を試してみました。　画面遷移を使用してPhaserのサンプルゲームがもう少しゲームっぽい流れになるように修正してみました。

以下のコードになります。

文字によるリンクの先はコード付きの実行画面で、画像からのリンク先は実行画面のみのフルスクリーン表示画面となります。

Phaser.js v3.15.1 Practice#22 Phaser3 Scene Transition

まず最初にタイトル画面が表示されます。　画面をクリックするとゲーム画面に遷移してゲーム開始します。　タイトルの「Hey Dude」は、大元のPhaserのサンプルゲームについている操作キャラの画像ファイル名に「dude」とついていたので、某曲ともじってテキトーに作成したものですw。

本当はこのタイトル画面の前にローディング画面がありますが、画面をキャプチャするにはあまりに一瞬しか表示されないので画像なしとなっています。

そして、メインのゲーム画面のゲームはサンプルゲームそのままのゲームとなります。　ゲーム内容はサンプルゲームとまったく変わっていません。　

サンプルゲームと同じで、ゲーム内で爆弾に触れるとゲームオーバーとなりますが、修正により「Game Over」と表示されるようにしました。　加えて「Click to Return to Title Screen」とも画面に表示されるようにして、言葉どおり画面をクリックするとタイトル画面に戻る（遷移する）ようにしました。

ゲーム画面で「Game Over」状態で画面をクリックするとタイトル画面で戻ってきますが、そのタイトル画面です。　この戻ってきたタイトル画面で再び画面をクリックするとゲームを再開します。

おまけに「HIGH SCORE」項目にそれまでのゲームプレイの最高得点が表示されるようにしました。

今回の画面遷移機能の実装にあたって以下のサイトを参考にさせていただきました。

・ゲームプログラミングノート2018-11-19　Phaser 3 新機能 : Sceneの取り扱い① 遷移、並列実行

・TypeScriptを使ってノベルゲームを作ろう

・Class: Text Phaser.GameObjects. Text

・Phaser3（TypeScript）を使いたい　②動かしてみる

・Best way to destroy a object

・Phaser入門:HTML5/Javascript 2Dゲームエンジン - catch.jp-wiki

今回のPhaser3プログラムは以上になります。　

次回

関連note
作成したゲーム関連noteまとめ