Phaser3で画面遷移 on CodePen

2020年10月15日 10:03

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」とも画面に表示されるようにして、言葉どおり画面をクリックするとタイトル画面に戻る（遷移する）ようにしました。