How can I use swipe gestures in cocos2d-js?

Question

I am researching how to use swipe gestures in cocos2d-js and found that in cocos2d UISwipeGestureRecognizer is used. But I couldn't find it for cocos2d-js.

Gestures in cocos2d

And also for cocos2d-x in github:

CCGestureRecognizer

For cocos2d-js I found only

        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ALL_AT_ONCE,
            onTouchesMoved:function (touches, event) {
                event.getCurrentTarget().processEvent(touches[0]);
            }
        }, this);

with additional event types:

onTouchesBegan
onTouchesEnded
onTouchesCancelled

Is this all the help that is there in cocos2d-js to detect swipe left, right, up, down?

score 2 · Accepted Answer · answered May 24 '14 at 06:30

Here is my solution, tested for cocos2d-js 3.0a2:

   if( true || 'touches' in cc.sys.capabilities ) { // touches work on mac but return false
        cc.eventManager.addListener(cc.EventListener.create({
            event: cc.EventListener.TOUCH_ALL_AT_ONCE,
            onTouchesBegan: function(touches, event) {
                console.log("onTouchesBegan!");

                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(),
                    start = self.touchStartPoint;

                // check for left
                if( loc.x < start.x - self.touchThreshold ) {
                    // if direction changed while swiping left, set new base point
                    if( loc.x > self.touchLastPoint.x ) {
                        start = self.touchStartPoint = {
                                x: loc.x,
                                y: loc.y
                        };
                        self.isSwipeLeft = false;
                    } else {
                        self.isSwipeLeft = true;                        
                    }
                }

                // check for right
                if( loc.x > start.x + self.touchThreshold ) {
                    // if direction changed while swiping right, set new base point
                    if( loc.x < self.touchLastPoint.x ) {
                        self.touchStartPoint = {
                                x: loc.x,
                                y: loc.y
                        };
                        self.isSwipeRight = false;
                    } else {
                        self.isSwipeRight = true;                       
                    }
                }

                // check for down
                if( loc.y < start.y - self.touchThreshold ) {
                    // if direction changed while swiping down, set new base point
                    if( loc.y > self.touchLastPoint.y ) {
                        self.touchStartPoint = {
                                x: loc.x,
                                y: loc.y
                        };
                        self.isSwipeDown = false;
                    } else {
                        self.isSwipeDown = true;                        
                    }
                }

                // check for up
                if( loc.y > start.y + self.touchThreshold ) {
                    // if direction changed while swiping right, set new base point
                    if( loc.y < self.touchLastPoint.y ) {
                        self.touchStartPoint = {
                                x: loc.x,
                                y: loc.y
                        };
                        self.isSwipeUp = false;
                    } else {
                        self.isSwipeUp = true;                      
                    }
                }

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

            onTouchesEnded: function(touches, event){
                console.log("onTouchesEnded!");

                var touch = touches[0],
                    loc = touch.getLocation()
                    size = self.size;

                self.touchStartPoint = null;

                if( !self.isSwipeUp && !self.isSwipeLeft && !self.isSwipeRight && !self.isSwipeDown ) {
                    if( loc.y > size.height*0.25 && loc.y < size.height*0.75 ) {
                        (loc.x < size.width*0.50)? self.isTouchLeft = true : self.isTouchRight = true;
                    } else if( loc.y > size.height*0.75 ) {
                        self.isTouchUp = true;
                    } else {
                        self.isTouchDown = true;
                    }
                }

                self.isSwipeUp = self.isSwipeLeft = self.isSwipeRight = self.isSwipeDown = false;

                //location.y = self.size.height;
                //event.getCurrentTarget().addNewTileWithCoords(location);
            }
        }), this);
    } else {
        cc.log("TOUCH_ALL_AT_ONCE is not supported");
    }

this.touchThreshold is undefined. Could you tell me, what is this.touchThreshold? — Sudhakar, May 22 '15 at 09:43
@Sudhakar That is a pixel value. I think, I used 10 for it. Not sure. But anyway it depends on your needs. Just try different ... — Michael, May 22 '15 at 13:33

score 1 · Answer 2 · answered Aug 27 '15 at 07:03

Here is my solution in cocos2d-js swiping

var cambaglayer = cc.Layer.extend({
                              ctor:function () {




                              this._super();
                              var size = cc.winSize;

                              touchCounter = 0;
                              if( true || 'touches' in cc.sys.capabilities ) {


                              cc.eventManager.addListener(cc.EventListener.create({
             event: cc.EventListener.TOUCH_ALL_AT_ONCE,
             onTouchesBegan: function(touches, event) {
             console.log("onTouchesBegan!");
             touchMenu();
             var touch = touches[0];
             var loc = touch.getLocation();
             this.touchStartPoint = {
             x: loc.x,
             y: loc.y
             };
             this.touchLastPoint = {
             x: loc.x,
             y: loc.y
             };
             },
             onTouchesMoved: function(touches, event) {
             var touch = touches[0];
             var loc = touch.getLocation(),
             start = this.touchStartPoint;
             console.log("onTouchesMoved!");
             console.log("onTouchesMoved!"+ touchThreshold);
             if( loc.x < start.x - touchThreshold ) {
             console.log("left!");
             if( loc.x > this.touchLastPoint.x ) {
             start = this.touchStartPoint = {
             x: loc.x,
             y: loc.y
             };
             this.isSwipeLeft = false;
             } else {
             this.isSwipeLeft = true;
             cc.log("swiping left side") 
             }
             }
             if( loc.x > start.x + touchThreshold ) {
             console.log("right!");

             if( loc.x < this.touchLastPoint.x ) {
             this.touchStartPoint = {
             x: loc.x,
             y: loc.y
             };
             this.isSwipeRight = false;
             } else {
             this.isSwipeRight = true;
             console.log("Swiping Right side");
             }
             }
             this.touchLastPoint = {
             x: loc.x,
             y: loc.y
             };
             },
             }
             ), this);
                              } else {
                              cc.log("TOUCH_ALL_AT_ONCE is not supported");
                              }
                              return true;
                              }
                              });

score 0 · Answer 3 · answered May 23 '14 at 16:21

Not a full answer but: you could simply get the touch's starting position on onTouchesBegan and the end position on onTouchesEnded and guess the direction of the swipe by substracting the positions and looking wheter X or Y changed the most (and in what section).

If you are looking for a more powerful gesture recognizer than just up/down/left/right, all I can think of is referring you to this sample project using dollar gesture recognizer by supersuraccoon, althought it must be noted that it's old code (v2.2.2?) and the event manager is a bit different in cocos2d-html5 v3, so it will probably require some work above your current level.

How can I use swipe gestures in cocos2d-js?

3 Answers3