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

2019-01-102020-07-11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);

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

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

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

text.setInteractive();

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

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

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

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

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