Phaser 3 | シーンを切り替える方法

2019-03-132020-07-11Phaser 3 シーン,Phaser 3

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);