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?

Answer 1

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");
    }