Jump to content


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:



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!

Link to comment
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.

Link to comment
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:


Here's the code:


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 :)

Link to comment
Share on other sites

  • 5 months later...

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.

Link to comment
Share on other sites

  • 1 month later...

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);      
Link to comment
Share on other sites

  • 2 months later...

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;
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...