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.
And also for cocos2d-x in github:
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:
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");
}
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;
}
});
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.