Question

我正在研究如何在cocos2d-js中使用滑动手势，并发现在cocos2d中使用了UISwipeGestureRecognizer。但我找不到cocos2d-js。

还有github中的cocos2d-x：

对于cocos2d-js，我发现只有

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

其他事件类型：

onTouchesBegan
onTouchesEnded
onTouchesCancelled

cocos2d-js中的所有帮助是否能够检测向左，向右，向上，向下滑动？

Answer 1

这是我的解决方案，测试了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 2

这是我在cocos2d-js刷卡中的解决方案

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 3

不是一个完整的答案，但是：你可以简单地在onTouchesBegan和onTouchesEnded上的结束位置获取触摸的起始位置，并通过减去位置并查看{{1}来猜测滑动的方向}或X改变了最多（以及在哪个部分）。

如果您正在寻找一个比上/下/左/右更强大的手势识别器，我能想到的只是指向this sample project using dollar gesture recognizer by supersuraccoon，但是必须注意它是旧代码（v2。 2.2？）和事件管理器在cocos2d-html5 v3中有点不同，所以它可能需要一些高于你当前级别的工作。

如何在cocos2d-js中使用滑动手势？

3 个答案: