Phaser 3 | 複数のシーンの作成する方法とコンフィグ設定

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

Phaser 3でシーンを作成する方法とコンフィグ設定にシーンを追加する方法です

利用するシーンをコンフィグに設定する

scene:[シーン名]とする事でコンフィグに利用するシーンを設定できます（ひとつの場合は配列じゃなくてもOK）

複数のシーンを設定する場合は、scene: [ シーン名,シーン名]とカンマ区切り記述していきます

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

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

定義したシーンの最初のシーン名がnew Phaser.Game(config)時に読み込まれます

複数のシーンを作成する

class シーン名 extends Phaser.Scene{}としてひとつのシーンを作成

constructor()内でsuper({key: 'シーンのキー名’ })としてシーンのキー名を定義する必要があります

class名のシーンとsuper()で定義するシーンのキー名は同じものでなくてもOK

configで読まれるシーン名はclass名のシーン、super()で定義するシーンのキー名はシーン移動などで使われます

必要に応じて、preload()、create()、update()を記述していきます（使わないものは記述不要です）

//Scene A
class SceneA extends Phaser.Scene {

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

  preload(){}
  create(){}
  update(){}

};

//Scene B
class SceneA extends Phaser.Scene {

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

  preload(){}
  create(){}
  update(){}

};

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

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

See the Pen Phaser 3 Create multiple scenes by yochans (@yochans) on CodePen.