How to add touch gestures, swipe, tap, click

[eguneys]

I want to enable touch controls for my menu. What is the best way to do this with Phaser.

For example I want to select a menu item by clicking it, and activate it by tapping.

Is this a good approach to controlling menu items with touch gestures?

 

Secondly, for game play i need to detect a swipe action.

 

I thought about there are two ways of doing this. Should I detect a

swipe on a particular sprite, or should i detect a swipe on the whole game area.

 

How to detect a swipe on the game area, and is it possible to detect it for a particular sprite?

 

In particular, I have 5 columns, and when a user swipes a column, I want to be able to detect that. (Which column user has swiped).

[eguneys]

Omg, anybody cares to help me with this? I will spam this site until someone responds.

[kidos]

Up to the last version, Phaser doesn't provide touch gestures by default.

You may create your own gesture mechanics though with Phaser pointers or you could just use hammerJS (http://hammerjs.github.io/).

[eguneys]

kidos, I need to detect which sprite is being swiped. Do you think I should detect a swipe, and calculate its coordinates to detect where that lands on phaser objects? I s that the best solution, do i have any alternatives?

 

I don't mind using hammer.js or building something up, though Phaser should remove "mobile" from the homepage. It Sucks. I'm done.

[kidos]

Sure, you can detect swipe by the distance of the active pointer.

Take a look at this example which works perfectly:

http://www.html5gamedevs.com/topic/3862-swipe-to-jump/?p=24478

[eguneys]

I created a gesture manager, that handles swipe, hold and tap. Use it in your states like this:

create: function() {   this.gestures = new Gesture(this.game);   this.gestures.onTap.add(this.tapped, this);   this.gestures.onHold.add(this.holded, this);   this.gestures.onSwipe.add(this.swiped, this);},update: function() {  // don't forget to call it's update function.  this.gestures.update();},// handle the gesture eventstapped: function(e, position) {}