# How to move on right click to position ?

## Recommended Posts

Hi,

I'm new on Phaser and my english isn't perfect, so i'll try to be careful.

I made a 2D mini game like that : (see screenshot).

What I need is to move my character on right click.

- I handeled my right click (so it's ok).

- I have in an array the path I need the character to use (ex : [[0.0],[0.1],[0.2],[0.3],[0.4],[0.5]]).

My character have got a speed (equals to 1) and I need my character to move from the first point to the last of my array by passing by the others ... like a unit in Warcraft 3, League of legend, etc.

Do you know how i can do that please ?

Antoine Duval.

##### Share on other sites

There is definitely a more efficient method, but this is what I thought of off the top of my head.

``````var animationTime = 60;
if (player.position != pathArray[pathArray.length-1].position) {

player.x = pathArray[player.pathIndex+1].x - (pathArray[player.pathIndex].x *
(player.remainingAnimation/animationTime));
player.y = pathArray[player.pathIndex+1].y - (pathArray[player.pathIndex].y *
(player.remainingAnimation/animationTime));

player.remainingAnimation -= player.speed;

} else {
player.pathIndex += 1;
player.remainingAnimation = animationTime;
}``````

Idk if this works well or not, but it should do it

##### Share on other sites

Use Tweens.

Here's how I would go about something like this. I assume you already have a path calculated to get to a desired point, for example [[0, 0], [0, 4], [2, 4], [5, 3]], where the first and second element of each array corresponds to a column and row in the grid used to generate the path. So [2, 4] would be column 2, row 4.

``````// Create a tween to move this player smoothly to another position.
// playerSprite should be the sprite object used for your player.
// This first tween needs to exist to chain any other tweens on to, and to start the chain.
// A tween should be added for each node in the path to follow.
// When one tween ends, the next one in the chain starts, moving the player to the position of the next node.
// path should be the array that has the path data. For example [[0, 0], [0, 4], [2, 4], [5, 3]].
// [0] gets the first element (for the first node in the path), and [0] or [1] gets the column or row to move to, respectively.
// Multiply the column/row by how far apart each grid node is in your game. In this case 64 pixels.
x: path[0][0] * 64,
y: path[0][1] * 64}
);

// Keep track of the previous tween so the next tween can be added to it.
// Tween 2 is chained onto the end of tween 1, tween 3 onto tween 2, and so on.
var previousTween = firstTween;

// Create a tween for each node in the path. Start at i=1 as the first node is already done.
for(var i=1, len=path.length; i<len; i+=1){
x: path[i][0] * 64,
y: path[i][1] * 64
}
);
// Chain the tween for this node onto the previous tween.
previousTween.chain(nextTween);
// Set the previous tween to this tween, ready for the next tween (if there is one).
previousTween = nextTween;
}

// Start the first tween. When it is done, the second will start, then the first, and so on.
firstTween.start();``````

Edited by Arcanorum
I've just noticed that the JS highlighter is a bit crap. It is colouring keywords that are in comments which messes up everything else.