【Phaser3入門】簡単なシーン切り替え方法

2021-8-7

meko

前置き

この記事はvite+phaser3のライブラリを使用しています。
プロジェクトの作成前の場合にはこちらの記事を先に読むことをお勧めします

シーン切り替え

Sceneはsrc/scenesのなかにファイルを作成して、src/index.tsで呼び出すことでゲームライブラリに認識させます
まず、NextSceneを作成して、GameSceneから遷移させてみます

// src/Next.ts
import Phaser from 'phaser';

export default class Next extends Phaser.Scene {
  constructor() {
    super('NextScene');
  }

  create() {
    const text = this.add.text(320, 300, 'You Winner!');
    this.cameras.main.setBackgroundColor("#e6c000");
  }
}
Copy

// src/Game.ts
import Phaser from 'phaser';

export default class Demo extends Phaser.Scene {
  constructor() {
    super('GameScene');
  }

  create() {
    const text = this.add.text(200, 400, 'Move Event');

    text.setInteractive();
    text.on("pointerdown", () => {
        this.scene.start("NextScene");
    });
  }
}
Copy

// src/index.ts
import Phaser from 'phaser';
import config from './config';
import GameScene from './scenes/Game';
import NextScene from './scenes/Next';

new Phaser.Game(
  Object.assign(config, {
    scene: [
      GameScene,
      NextScene,
    ]
  })
);
Copy

GameSceneにtextを用意してsetInteractiveとonでクリックイベントを与えています NextSceneで背景画像を眩しいくらいの黄色にしました index.tsでNextSceneを登録したので、GameSceneからthis.scene.start("NextScene")で呼び出せるようになっています

動かすとこんな感じ

眩しい黄色が勝利を祝ってくれていますね

参考

geocine/phaser3-rollup-typescript