Directional swipe

[kpowgames]

Hello everyone,

I'm fairly new to Phaser, and I'm just starting to figure things out.

 

I made a simple prototype that uses "game.input.keyboard.createCursorKeys()" to listen and process the keyboard's cursor keys.

Basically I have a sprite that moves up, down, left and right depending on input.

 

Now I'm trying to achieve the same using touch events: when I swipe left, the sprite moves left; when I swipe up, the sprite moves up, etc.... but with no success.

 

I've managed to detect swipe using a solution that user @imshag posted in this topic:

http://www.html5gamedevs.com/topic/3862-swipe-to-jump/?hl=%2Bswipe+%2Bphaser#entry24473

 

It detects swipe, but doesn´t give me info on the direction of it. I could really use your help... How can I detect the direction of a swipe, and limit it to "up", "down", "left" and "right?

 

Thanks in advance!

[Wavertron]

You'll need to compare the start and end points.
 

Here's what I would try (note: below is untested):

changeX = endPoint.x - startPoint.x;changeY = endPoint.y - startPoint.y;if (Math.abs(changeX) > Math.abs(changeY)) {//The change in X axis was greater than the Y axis, so treat as a horizontal swipe//Now determine if left or right    if (changeX > 0) {        //its a swipe right    } else {        //its a swipe left    }} else {//The change in Y axis was greater than the X axis, so treat as a vertical swipe//Now determine if up or down    if (changeY > 0) {        //its a swipe down    } else {        //its a swipe up    }}

It will only give you one direction (ie up OR right OR ....).

This code will likely break if the startPoint and endPoints move into negative co-ordinate space, so it would need some refinement. But the basic approach, comparing the start and end points remains the same.

[kpowgames]

@Rudy, thanks for the reply After some tinkering I managed to achieve what I wanted, using a similar solution to the one you posted.

 

You can test it here:
https://dl.dropboxusercontent.com/spa/n21w18yffe5br95/rgb_proto01/rgb_proto01.html

 

Here's the code:
https://dl.dropboxusercontent.com/spa/n21w18yffe5br95/rgb_proto01/js/game.js

 

I'm using the Arcade Physics Engine and I'm having some trouble with the collisions between the 3 diamonds... sometimes they overlap and I really didn´t want that to happen.

The goal is to have them as solid objects that don´t bounce or overlap when colliding... Any ideas?

 

Thanks again for the help

[efusien]

Hi,
Your code uses the state "update" function, which is called 60 times each second.

I think it's better to use an input down/up listener.

 

Here is a simple function to listen swipe:

listenSwipe(function(direction) {	console.log(direction);});function listenSwipe(callback) {	var eventDuration;	var startPoint = {};	var endPoint = {};	var direction;	var minimum = {		duration: 75,		distance: 150	}	game.input.onDown.add(function(pointer) {		startPoint.x = pointer.clientX;		startPoint.y = pointer.clientY;	}, this);	game.input.onUp.add(function(pointer) {		direction = '';		eventDuration = game.input.activePointer.duration;		if (eventDuration > minimum.duration) {			endPoint.x = pointer.clientX;			endPoint.y = pointer.clientY;			// Check direction			if (endPoint.x - startPoint.x > minimum.distance) {				direction = 'right';			} else if (startPoint.x - endPoint.x > minimum.distance) {				direction = 'left';			} else if (endPoint.y - startPoint.y > minimum.distance) {				direction = 'bottom';			} else if (startPoint.y - endPoint.y > minimum.distance) {				direction = 'top';			}			if (direction) {				callback(direction);			}		}	}, this);};

I just listen the pointer on input down, and compare it with the pointer on input up.

If we match the minimum duration and distance for each point coordinates, we fire a callback.

 

So just add the listenSwipe(onSwipeCallback) in your state "create" function to listen events.
Hope this is helpful for someone else.

[Sam]

Very very basic, but works:

 

    var swipeCoordX,        swipeCoordY,        swipeCoordX2,        swipeCoordY2,        swipeMinDistance = 100;    game.input.onDown.add(function(pointer) {        swipeCoordX = pointer.clientX;        swipeCoordY = pointer.clientY;        }, this);    game.input.onUp.add(function(pointer) {        swipeCoordX2 = pointer.clientX;        swipeCoordY2 = pointer.clientY;        if(swipeCoordX2 < swipeCoordX - swipeMinDistance){            console.log("left");        }else if(swipeCoordX2 > swipeCoordX + swipeMinDistance){            console.log("right");        }else if(swipeCoordY2 < swipeCoordY - swipeMinDistance){            console.log("up");        }else if(swipeCoordY2 > swipeCoordY + swipeMinDistance){            console.log("down");        }    }, this);      

[spencerTL]

There's also a tutorial here which uses directional swipes:

http://www.emanueleferonato.com/2014/11/13/html5-swipe-controlled-sokoban-game-made-with-phaser/

[markware]

or you can add this

 

        if (eventDuration > minimum.duration) {

            endPoint.x = pointer.clientX;

            endPoint.y = pointer.clientY;

 

  currVelocitySqr = (startPoint.x+endPoint.x)*(startPoint.x+endPoint.x)+(startPoint.y+endPoint.y)*(startPoint.y+endPoint.y) ;

        vy=endPoint.y - startPoint.y;

       vx=endPoint.x- startPoint.x;

            angle = Math.atan2(vy, vx);

            vx = Math.cos(angle) * 0.15 *eventDuration;

            vy = Math.sin(angle) * 0.15 *eventDuration;;

           

         //  player.body.data.velocity[0] = -vx;

         //  player.body.data.velocity[1] = -vy;

 

....