thumbnail
thumbnail

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

updated 2021-8-7

前置き

この記事は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");
  }
}
// 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");
    });
  }
}
// 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,
    ]
  })
);

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

動かすとこんな感じ

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

参考

geocine/phaser3-rollup-typescript