[PlayCanvas] Buttonの入力イベント(修正)

はじめに

PlayCanvasにはクリックやタップなどの入力に反応してイベントを発火させる事が出来るButtonというものがあります。
これにはHover, Pressed, Inactiveという項目があり、それぞれ未入力時、押下時、非活性時のボタンのビジュアルが設定できます。
基本的な実装方法は割愛しますが、これにより以下のようなものが実装できます。

本題

先の動画には問題があり、Blackと書かれたボタンは非活性状態にしているものなのですが、動作しています。
非活性にしているということは本来動作してほしくない部分のハズです。

想定している動作はこのようになります↓

これを実装する方法は3つあります。
1. Button ComponentのActiveの項目を見て処理を行うか判断する。
2. Element ComponentのUse Inputのチェックボックスを外す。
3. this.entity.button.onを使用する。

1. Activeの項目をチェックする

自前のスクリプト上で制御する方法です。
this.entity.button.activeがtrueの場合は活性状態なので、処理を実行する、といった感じの実装をしてあげればいいです。

var Button = pc.createScript('button');

Button.prototype.onPress = function() {
    if( this.entity.button.active ){
        /* 活性時の処理 */
    }
};

2. Use Inputをfalseにする

Element ComponentのUse Inputの項目をfalseにする事で、入力イベントそのものを受け取らない様にする方法です。
実装としてはこちらがメインになります。

3. this.entity.button.onを使用する

Button Componentにイベントを登録する方法です。
この方法では自動的にActiveの状態をチェックします。

var Button = pc.createScript('button');

Button.prototype.initialize = function() {
    this.entity.button.on(pc.EVENT_TOUCHSTART, this.onPress, this);
};

Button.prototype.onPress = function() {};

おわりに

最後の方法はなぜか公式マニュアルに書いてない。