PlayCanvasではモバイル向けの実装を手軽に行うためのAPIが多数用意されています。
ここでは簡単なタッチインタフェースのサンプルと共に使い方を紹介します。また、コード全文を最後に記載しておりますので参考までにお使いください。
サンプルプロジェクトでは、オブジェクトがタッチ部分に追従し、フリック操作で投げることができます。※モバイル端末からお試しください
全画面表示はこちら
PlayCanvasで実装されているモバイル端末タッチインタフェース
PlayCanvasでは、
- 指が触れた瞬間
- 触れた指が動いた瞬間
- 触れた指が離れた瞬間
- 触れている指の数
- それぞれの触れている指のディスプレイ座標
が取得可能です。
使い方
記述方法はほとんどマウス入力と同様です。マウス入力のドキュメントはこちら。
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"
となっているので、これらの文字列を直接代入してもかまいません。
これらのイベントを組み合わせることで、押しっぱなし等の実装も可能です。
コード全文
コメント
0件のコメント
サインインしてコメントを残してください。