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

Text

phaser3で表示したテキストにクリックイベントを実装する方法です

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

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

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

text.setInteractive();

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

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

サンプルコード

let text = this.add.text(250, 150, 'Click here!').setFontSize(30).setFontFamily("Arial").setOrigin(0.5).setInteractive();
    
text.on('pointerdown', function (pointer) {
text.setText('OK!!');
}, this);

実装・表示サンプル

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

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

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

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

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

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

Text

Posted by Yousuke.U