cocos2d-jsでスワイプなどのジェスチャーを取得する方法

概要

cocos2d-jsでスワイプを判定したい。いろいろ探してみたけど、それらしいサンプルがなかったので簡易版ではあるけど作ってみた。

環境

Cocos2d-JS(html5) v3.5 Lite (Full version)

プログラム

イベントリスナーで開始地点を記憶し、閾値（スワイプを判定する距離）を超えたらスワイプを検出するようにしている。

いまソースを見直してみたけど、キチンと距離を計算してないから終了地点（self.touchLastPoint）はいらなかったかも。。

// ----- スワイプ検知（ここから）
cc.eventManager.addListener(cc.EventListener.create({
  event: cc.EventListener.TOUCH_ALL_AT_ONCE,

  onTouchesBegan: function(touches, event) {
      var touch = touches[0];
      var loc = touch.getLocation();

      self.touchStartPoint = {
          x: loc.x,
          y: loc.y
      };
      self.touchLastPoint = {
          x: loc.x,
          y: loc.y
      };
  },

  onTouchesMoved: function(touches, event) {
      var touch = touches[0];
      var loc = touch.getLocation();
      var start = self.touchStartPoint;
      var touchThreshold = 100;             // しきい値

      if( loc.x < start.x - touchThreshold ) {
          cc.log("left swipe");
      }
      if( loc.x > start.x + touchThreshold ) {
          cc.log("right swipe");
      }
      if( loc.y < start.y - touchThreshold ) {
          cc.log("down swipe");
      }
      if( loc.y > start.y + touchThreshold ) {
          cc.log("up swipe");
      }
  },

  onTouchesEnded: function(touches, event){
      self.touchStartPoint = null;
      self.touchLastPoint = null;
  }

}), this);
// ----- スワイプ検知（ここまで）

指がスマホに触れたら（マウスが押されたら）、開始地点（self.touchStartPoint）を記憶し、指を離したらリセットするのがポイント。

マルチタッチを想定してTOUCH_ALL_AT_ONCEを使っているけど、シングルタッチで良ければTOUCH_ONE_BY_ONEを使う。

その際は「onTouchesXXX」のメソッド名を「onTouchXXX」に修正するのを忘れずに。

githubにサンプルを置いておいたので、参考までにどうぞ。