Phaser 3 新機能 : Sceneの取り扱い① 遷移、並列実行

今回はPhaser 3で追加された新機能、Sceneを紹介いたします。
SceneはPhaserのコンポーネントを簡単に一括管理できるので非常に便利です。

前回の記事、 gpnotes.hatenablog.jp 内のサンプルコードでは「Phaser3」を出力するSceneを作っています。
今回はこのコードを基にSceneの登録、実行などの基本的な扱い方を勉強していきます。

シーンを作る、登録する

前回のサンプルコードを少し変更しました。
シーンを複数記述する場合、呼び出すためのキーを設定する必要があるため、 コンストラクタ内で設定を記述しています。

class MyScene1 extends Phaser.Scene {
    constructor() {
        //Sceneを拡張してクラスを作る際にコンストラクタでSceneの設定を渡します
  //keyでシーンのキー、activeでシーンの自動実行を設定できます
        super({ key: 'MyScene1', active: true });
    }
    create() {
        let text = this.add.text(100, 100, 'Phaser 3').setFontSize(64).setColor('#ff0');
    }
}


クラス名をMyScene1に変更したので、GameConfig内のsceneの中身も変更します。

var config: GameConfig = {
    parent: 'content',
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [MyScene1],

}

実行すると、前回と同じ"Phaser 3"が出力されました。 f:id:Phaser_3:20181119150707p:plain

start()で遷移、launchで並列実行

今度は自動実行をオフにしたMyScene2クラスを作り実行してみましょう。
※configへの追加も忘れずに!

class MyScene2 extends Phaser.Scene {
    constructor() {
        //自動実行をオフに
        super({ key: 'MyScene2', active: false });
    }
    create() {
   //文字が重ならないようにy座標を少しずらして色も変更
        let text = this.add.text(100, 300, 'Phaser 2').setFontSize(64).setColor('#00f');
    }
}

自動実行がオフになっているので、表示されるのはMyScene1の"Phaser 3"だけですね。 f:id:Phaser_3:20181119152310p:plain

この状態からSceneを実行するにはstartかlaunchを使います。 遷移(切り替えながらの実行)をしたければstartを、 呼び出し元のSceneと並行で実行したければlaunchを使います。

startによる遷移

まずはstartを試してみましょう。 MyScene1のcreate関数の中に

this.scene.launch("MyScene2")

を記述してみます。

class MyScene1 extends Phaser.Scene {
    constructor() {
        //Sceneを拡張してクラスを作る際にコンストラクタでSceneの設定を渡します
        //keyでシーンのキー、activeでシーンの自動実行を設定できます
        super({ key: 'MyScene1', active: true });
    }
    create() {
        let text = this.add.text(100, 100, 'Phaser 3').setFontSize(64).setColor('#ff0');
        //MyScene2の実行
        this.scene.start("MyScene2")
    }
}

MyScene1から遷移でMyScene2を呼び出したので、MyScene1で作成された文字は見えなくなっています。 f:id:Phaser_3:20181119153653p:plain

launchによる並列実行

次はlaunchです。 今度は簡単に先ほどの関数のstartをlaunchに書き換えるだけです。

class MyScene1 extends Phaser.Scene {
    constructor() {
        //Sceneを拡張してクラスを作る際にコンストラクタでSceneの設定を渡します
  //keyでシーンのキー、activeでシーンの自動実行を設定できます
        super({ key: 'MyScene1', active: true });
    }
    create() {
        let text = this.add.text(100, 100, 'Phaser 3').setFontSize(64).setColor('#ff0');
        //MyScene2の実行
        this.scene.launch("MyScene2")
    }
}

並列実行なのでMyScene1の文字とMyScene2の文字が同時に表示されています。 f:id:Phaser_3:20181119153939p:plain

総括、サンプルコード全文

以上、シーンの基礎の基礎として登録と実行の方法を紹介いたしました。
基礎の基礎なのでまとめるほどの内容でもないかもしれませんが、 実行で肝要なのは

  • コンストラクタでキーを設定
  • GameConfig内でシーンを登録しておく *startで遷移しながらの実行、Launchで並列実行

というところになると思います。
次回からはシーン間の値の受け渡し、活用方法などを紹介していきます。
今回のサンプルコードの全文は以下になります。

class MyScene1 extends Phaser.Scene {

    constructor() {
        //Sceneを拡張してクラスを作る際にコンストラクタでSceneの設定を渡します
        super({ key: 'MyScene1', active: true });
    }

    create() {
        let text = this.add.text(100, 100, 'Phaser 3').setFontSize(64).setColor('#ff0');
        this.scene.launch("MyScene2")
    }

    update() {
    }
}

class MyScene2 extends Phaser.Scene {

    constructor() {
        //自動実行をオフに
        super({ key: 'MyScene2', active: false });
    }

    create() {
        let text = this.add.text(100, 300, 'Phaser 3').setFontSize(64).setColor('#00f');
    }

}

var config: GameConfig = {
    parent: 'content',
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [MyScene1, MyScene2],

}

window.onload = () => {
    new Phaser.Game(config);
}