Phaser3でスマホ対応ブラウザゲームを作る

画面をPhaser.Sceneクラスを継承して実装し、Phaser.Scene.scene.start(sceneName)で呼び出す。
Menu画面で画面タップをするとGame画面に繊維するサンプル。

• index.js

import Phaser from 'phaser';
// 実装した画面のクラスファイルをインポート
import Menu from 'menu.js';
import Game from 'game.js';

let config = {
  // scene以外省略
  scene: [
    // インポートした画面を配列でsceneに設定する
    Menu,
    Game,
  ],
};

new Phaser.Game(config);

• Menu.js

import Phaser from 'phaser';

// Phaser.Sceneを継承
export default class Menu extends Phaser.Scene {
  constructor() {
    // Phaser.Sceneのコンストラクタにシーン名をStringで渡す
    super('Menu');
  }

  create() {
    // pointerupが発火したときの処理を指定(第3引数で関数内のthisをバインド)
    this.input.on('pointerup', function () { this.scene.start('Game'); }, this);
  }
}

• Game.js

import Phaser from 'phaser';

// Phaser.Sceneを継承
export default class Game extends Phaser.Scene {
  constructor() {
    // Phaser.Sceneのコンストラクタにシーン名をStringで渡す
    super('Game');
  }
  // 以下略
}