phaserで、オブジェクトを生成し、クリックイベントに関数を指定しておき
その関数から、インスタンス変数にアクセスしようとした場合
export class xxxxxx {
constructor(scene, rnd) {
this.scene = scene;
this.data = [];
}
init(){
// オブジェクト生成
this.#createObject();
// データ生成(略)
this.createData(); // ここでthis.dataにデータを追加する
}
#createObject(){
// オブジェクトを生成(実際はもっとちゃんといろいろ設定している)
const obj = this.scene.add.rectangle(100, 100, 100, 100, 0x000000, 0); //透明なクリック検知プレート
obj.setInteractive();
obj.on("pointerdown", this.#clickAreaClick);
}
#clickAreaClick(pointer, localX, localY){
console.log(this.data); // undefined
}
}
#clickAreaClickメソッドがイベントハンドラとして登録されると、
そのメソッド内でのthisは、initインスタンスを参照せず、
イベントのターゲット(この場合はclickArea)を参照します。
そのため、this.tileDataがundefinedになります。
解決策(アロー関数を使用)
obj.on("pointerdown", (pointer, localX, localY) => {
this.#clickAreaClick(pointer, localX, localY);
});
解決策(bindメソッドを使用)
obj.on("pointerdown", this.#clickAreaClick.bind(this));