表示モード

ドラッグ・スワイプで動かす ​

エンティティをドラッグ・スワイプできるようにするには、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イベントでは利用できない

ただしドラッグするエンティティの祖先エンティティが拡大・回転されていると、ドラッグに追従して動かすことは難しくなります。 (行列計算による座標系の変換が必要になります)

簡単のため、ドラッグするエンティティやその祖先は拡大・回転しないことを推奨します。

関連情報 ​