シーンを切り替える方法

Phaser 3でシーンを切り替える(移動・移行)する方法です

See the Pen Phaser 3 Chenge Scenes by yochans (@yochans) on CodePen.

シーンの切り替えにはシーンを移動するイベント内でthis.scene.start()を利用します

this.scene.start('シーンのキー名');

this.scene.start()で指定するシーンのキー名とはclass名ではなくsuper()で定義した名前になります(class名と同じ場合は気にしなくて良いです)

サンプルではchangeという名前のテキストオブジェクトをクリックした場合にシーンA、シーンBを行き来する様にしてあります

//Scene A
class SceneA extends Phaser.Scene {

  constructor (){
          super({ key: 'SceneA' });
   }

  create(){
    
    let sceneName = this.add.text(150, 70, 'SceneA').setFontSize(30).setFontFamily("Arial").setOrigin(0.5).setInteractive();
    
    let change = this.add.text(150, 130, 'Change Scene!').setFontSize(20).setFontFamily("Arial").setOrigin(0.5).setInteractive();
    
    change.on('pointerdown', function (pointer) {
    this.scene.start('SceneB');
     }, this);
   }
};

//Scene B
class SceneB extends Phaser.Scene {

  constructor (){
          super({ key: 'SceneB' });
   }

  create(){
    
    let sceneName = this.add.text(150, 70, 'SceneB').setFontSize(30).setFontFamily("Arial").setOrigin(0.5).setInteractive();
    
    let change = this.add.text(150, 130, 'Change Scene!').setFontSize(20).setFontFamily("Arial").setOrigin(0.5).setInteractive();
    
    change.on('pointerdown', function (pointer) {
    this.scene.start('SceneA');
     }, this);
   }
   
};

//config
let config = {
  type: Phaser.AUTO,
  parent: 'canvas',
  width: 300,
  height: 200,
  scene: [ SceneA,SceneB  ]
};

//game
let game = new Phaser.Game(config);

シーン

Posted by Yousuke.U