How can I use swipe gestures in cocos2d-js?

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?

Answers:

Answer

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

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

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.