# Directional swipe

## Recommended Posts

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?

##### Share on other sites

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.

##### Share on other sites

@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

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

##### Share on other sites

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.

##### Share on other sites

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);      `

##### Share on other sites

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;

....

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.