1.「btn-states.js」のダウンロード

ここ

から「btn-states.js」をダウンロードします。

2.「btn-states.js」をインポート

ダウンロードした「btn-states.js」を自分のプロジェクトに追加します。

3.ボタンの配置

ヒエラルキーに「2D Screen」を追加します。
「2D Screen」の配下に「Image Element」を追加します。
この「Image Element」をButtonにします。

スクリプト「btn-states.js」をアタッチし、画像を配置してください。

またインスペクターのELEMENTのUseInputにチェックをつけてください。
このチェックがないとクリックなどのユーザ操作を受け付けなくなります。

4.ボタンのイベントを制御する

既にスクリプト「btn-states.js」にはボタンをクリック、もしくはタップしたときの処理が記述されています。

// When we press the element assign the active texture
BtnStates.prototype.onPress = function (event) { 
    event.element.textureAsset = this.activeAsset;
};

この関数にプログラムを記述することでボタンの処理を実装できます。
ただ、ここに直接プログラムを記述してしまうと、ボタンの種類ごとにスクリプト「btn-states.js」が必要になります。
複数のボタンに対応する方法は以下の通りになります。

5.スクリプト「btn-states.js」の修正

次の関数を宣言します。

BtnStates.prototype.pressAction = function() {};

onPress処理を修正します。

// When we press the element assign the active texture
BtnStates.prototype.onPress = function (event) { 
    event.element.textureAsset = this.activeAsset;
};

から

// When we press the element assign the active texture
BtnStates.prototype.onPress = function (event) { 
    event.element.textureAsset = this.activeAsset;

    this.pressAction();
};

これでクリック、もしくはタップ時に関数「pressAction」が呼ばれるようになりました。
次は外部からこの関数を上書きし、ボタンの種類ごとに処理を切り分けるようにします。

6.ボタンを管理するスクリプトを用意する

このスクリプトを仮に「GameManager」とします。
ヒエラルキー上に空のオブジェクトを配置し、スクリプト「GameManager」をアタッチします。

ボタンをアタッチする属性を追加します（仮にStartButtonとTitleButtonとします）。

GamaManager.attributes.add('startButton', {
    type:'entity'
});

GamaManager.attributes.add('titleButton', {
    type:'entity'
});

ヒエラルキー上の「GameManager」に各種ボタンをアタッチしてください。

以下の処理でボタンごとに関数「pressAction」を上書きします。

// initialize code called once per entity
GamaManager.prototype.initialize = function() {

    var startButtonStates = this.startButton.script.btnStates;

    startButtonStates.pressAction = function() {
        console.log("start button press");
    };

    var titleButtonStates = this.titleButton.script.btnStates;

    titleButtonStates.pressAction = function() {
        console.log("title button press");
    };
};

おまけ　スクリプト「btn-states.js」を一切さわりたくない場合

クリック時のイベントを追加します。

// initialize code called once per entity
GamaManager.prototype.initialize = function() {

     this.startButton.element.on('mousedown', function(event) {

         console.log("start button press");

     }, this);
};

ただ、これだと別途タップ時の処理を追記する必要があります。
個人的に元のスクリプトを修正したほうが操作しやすいと感じましたので今回の方法を残しておくことにしました。

【Playcanvas】Buttonを追加する