Phaser 3 | テキストにクリックイベントを実装する方法

2020-07-11Phaser 3 テキスト,Phaser 3

Phaser 3 | テキストにクリックイベントを実装する方法

phaser3のadd.text()で作成・表示したテキストにクリックイベントを実装する方法です

See the Pen Phaser 3 text set touch events by yochans (@yochans) on CodePen.

テキストにクリックイベントを実装する方法

サンプルコード

//テキストオブジェクトにsetInteractive()を追加して作成
let text = this.add.text(250, 150, 'Click here!').setFontSize(30).setFontFamily("Arial").setOrigin(0.5).setInteractive();

//テキストオブジェクトにon()イベントを追加する
text.on('pointerdown', function (pointer) {
text.setText('OK!!');
}, this);

1、テキストオブジェクトにsetInteractive()を追加する

.setInteractive()はタップまたはマウスカーソルのイベントを許可する機能をオブジェクトに追加します

setInteractive()はsetInteractive(false)で解除、removeInteractive()で削除が可能です

text.setInteractive();

テキストオブジェクトにon()イベントを追加する

on()イベントをテキストオブジェクトに追加します

text.on('pointerdown', function (pointer) {
text.setText('OK!!');
}, this);

よく使うon()イベントのアクション一覧

pointerdown左クリックが押された時
pointerup左クリックが離された時
pointermoveカーソルが上を移動している時
pointeroverカーソルが上に入った時
pointeroutカーソルが離れた時

pointer~もタッチイベントとして機能しますが、以下の機能も使えるかも

gameobjectdownオブジェクトが押された時
gameobjectupオブジェクトが離された時
gameobjectmoveオブジェクト上を移動している時
gameobjectoverオブジェクト上に入った時
gameobjectoutオブジェクトから離れた時