Phaser3 : event

今回はEventを使用してみます。

Events

EventはPhaser.Events.EventEmitterから作ることができます。

create() {
    //イベントエミッタ
    this.emitter = new Phaser.Events.EventEmitter();
}

onでエミットするイベントのkeyと実行する処理を設定し、emitでキーを指定して実行します。

create() {
    //イベントエミッタ
    this.emitter = new Phaser.Events.EventEmitter();

    //イベントを登録
    this.emitter.on("text", ()=>this.AddText(true), this);

    //イベントを実行
    this.emitter.emit("text");
}

またeventsはオブジェクトにも設定することができます。
textからさらにイベントを実行してtextを作成するAddText関数を作成しました。

public AddText(flg:boolean) {

    let text = this.add.text(this.sys.canvas.width / 2, this.sys.canvas.height / 2, "event");
    text.setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);

    if (flg) {
        //テキストにイベントを登録してエミット
        text.on("text", () => this.AddText(false), this);
        text.emit("text")
    } else {
        text.y += 50;
        text.text = "more";

    }
}

実行結果がこちらです。 f:id:Phaser_3:20190121154837p:plain

今回のソースはこちらです。

/// <reference path="../app.ts" />

namespace MyGame {



    export class MyScene1 extends Phaser.Scene {

        public emitter: Phaser.Events.EventEmitter;

        constructor() {
            super({ key: 'MyScene1', active: false });
        }

        preload() {
            
        }

        create() {
            //イベントエミッタ
            this.emitter = new Phaser.Events.EventEmitter();

            //イベントを登録
            this.emitter.on("text", ()=>this.AddText(true), this);

            //イベントを実行
            this.emitter.emit("text");
        }


        public AddText(flg:boolean) {

            let text = this.add.text(this.sys.canvas.width / 2, this.sys.canvas.height / 2, "event");
            text.setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);

            if (flg) {
                //テキストにイベントを登録してエミット
                text.on("text", () => this.AddText(false), this);
                text.emit("text")
            } else {
                text.y += 50;
                text.text = "more";

            }
        }
    }
}