モバイル端末対応・タッチインタフェース

PlayCanvasではモバイル向けの実装を手軽に行うためのAPIが多数用意されています。

ここでは簡単なタッチインタフェースのサンプルと共に使い方を紹介します。また、コード全文を最後に記載しておりますので参考までにお使いください。

サンプルプロジェクトでは、オブジェクトがタッチ部分に追従し、フリック操作で投げることができます。※モバイル端末からお試しください
全画面表示はこちら

PlayCanvasで実装されているモバイル端末タッチインタフェース

PlayCanvasでは、

1. 指が触れた瞬間
2. 触れた指が動いた瞬間
3. 触れた指が離れた瞬間
4. 触れている指の数
5. それぞれの触れている指のディスプレイ座標

が取得可能です。

使い方

記述方法はほとんどマウス入力と同様です。マウス入力のドキュメントはこちら。

initializeメソッド内でthis.app.touch.on()メソッドを呼び出し、引数にはイベントと、イベントが起きた際のコールバック関数を指定します。

if(this.app.touch){
this.app.touch.on(pc.EVENT_TOUCHSTART,this.start,this); //指が触れた瞬間
this.app.touch.on(pc.EVENT_TOUCHMOVE,this.move,this); //触れた指が動いた瞬間
this.app.touch.on(pc.EVENT_TOUCHEND,this.end,this); //触れた指が離れた瞬間
}

コールバック関数内では、引数からタッチのオブジェクトが取得可能です。

Script.prototype.start = function(event){
//指が触れた瞬間コールされる
event.changedTouches[0].x //最初に触れた指のx座標
event.changedTouches[0].y //最初に触れた指のy座標
}

注意事項

this.app.touch.on()メソッドを宣言する場合、直接initializeメソッドに記述すると非モバイル端末で実行した場合エラーが出ます。
モバイル端末を使用する開発の際は、this.app.touchでモバイル端末かどうかを確認して記述する必要が有ります。またこれを使うことで端末を特定することも可能です。

this.app.touch.on()メソッドの第1引数はstring型のイベント名を代入します。PlayCanvasではあらかじめpcオブジェクト内にイベントのプロパティが格納されているので、pc.EVENT_..でコード補完から入力することがお勧めです。

プロパティの中身はそれぞれ

• pc.EVENT_TOUCHSTART = "touchstart"
• pc.EVENT_TOUCHMOVE  = "touchmove"
• pc.EVENT_TOUCHEND    = "touchend"

となっているので、これらの文字列を直接代入してもかまいません。

これらのイベントを組み合わせることで、押しっぱなし等の実装も可能です。

コード全文