Akashic Engine 逆引きリファレンス

ダブルクリック・タップできるようにする

Akashic Engine に直接ダブルクリックを検出する機能はありません。 onPointDown や onPointUp などを組み合わせて実現する必要があります。 いわゆる「クリック」はマウスを離したタイミングで判定されますが、ここでは単純にマウスを押したタイミングで処理を行います。

実現コード

var rect = new g.FilledRect({
  ...,      // その他のプロパティ
  touchable: true // 触れられるオブジェクトにする
});

var isRightAfterClick = false; // クリックの直後か否か。
var doubleClickTimer = null;

rect.onPointDown.add(function () {
  if (isRightAfterClick) {
    isRightAfterClick = false;

    // ダブルクリックされた
    console.log("double clicked!");
  } else {
    // ダブルクリックではない
    console.log("clicked!");
  }
});
rect.onPointUp.add(function () {
  isRightAfterClick = true;
  doubleClickTimer = scene.setTimeout(function () {
    isRightAfterClick = false;
    doubleClickTimer = null;
  }, 300);
});

次のコンテンツは、矩形をダブルクリック・ダブルタップした場合に矩形の色が変わります。

解説

この例では、 onPointUp トリガーで isRightAfterClick を true に設定し、タイマーにて一定時間後に false に戻しています。 onPointDown トリガーでマウス押下・タップを検出した時、isRightAfterClick が true であれば、前回のクリックから一定時間以内なのでダブルクリックとして扱います。

タイマーの時間を変更することで、ダブルクリックとして認識する時間を調整できます。

関連情報

前 (ドラッグ・スワイプで動かす) | 目次 | 次 (画面全体をクリック・タップできるようにする)