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?

 

Thanks in advance!

Share this post


Link to post
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 this post


Link to post
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

 

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

Share this post


Link to post
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 this post


Link to post
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 this post


Link to post
Share on other sites

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;
 
....

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.