ドラッグ・スワイプで動かす
エンティティをドラッグ・スワイプできるようにするには、onPointMove
トリガーを利用します。
凡例
javascript
var rect = new g.FilledRect({
..., // その他のプロパティ
touchable: true // 触れられるオブジェクトにする
});
rect.onPointMove.add(function(e) {
... // エンティティがドラッグク・スワイプされた時の処理
});
エンティティは touchable
プロパティを true
にすることにより、タップやクリックなどのユーザ操作を検出できるようになります。
エンティティをクリック・タップするには g.E#onPointDown
を利用してください。
利用例
次のコンテンツは、矩形をドラッグ・スワイプすると矩形が移動します。
詳細
Akashic Engine ではユーザがタップやクリックするとポイントイベントが発生します。ポイントイベントを受け取るトリガーには以下の 3 種類があります。
トリガー名 | 内容 |
---|---|
onPointDown | 画面に指が触れた。マウスのボタンが押された |
onPointMove | 画面に触れた指が移動した。ボタンが押された状態でマウスが移動した |
onPointUp | 画面から指が離れた。マウスのボタンが離された |
それぞれのイベントに対応するトリガーを利用することで、イベント発生時に処理を実行できます。
下記コードの onPointMove
トリガーに渡した関数の引数 ev
にポイントイベントが与えられています。
javascript
rect.onPointMove.add(function (ev) {
rect.x += ev.prevDelta.x;
rect.y += ev.prevDelta.y;
rect.modified();
});
この変数には下記のプロパティがあります。
プロパティ | 意味 |
---|---|
ev.point.x ,ev.point.y | 最後にonPointDown が発生した座標。座標系の原点はエンティティの座標 |
ev.startDelta.x ,ev.startDelta.y | 最後にonPointDown が発生した座標から、現在のポイント座標までの移動量。ただしonPointDown イベントでは利用できない |
ev.prevDelta.x ,ev.prevDelta.y | 最後にonPointMove が発生した座標から、現在のポイント座標までの移動量。ただしonPointDown イベントでは利用できない |
ただしドラッグするエンティティの祖先エンティティが拡大・回転されていると、ドラッグに追従して動かすことは難しくなります。 (行列計算による座標系の変換が必要になります)
簡単のため、ドラッグするエンティティやその祖先は拡大・回転しないことを推奨します。