Jump to content

How to move on right click to position ?


Recommended Posts


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 ?


Thanks for your time.

Antoine Duval.


Capture d’écran 2017-02-23 à 11.20.30.png

Link to comment
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.y = pathArray[player.pathIndex+1].y - (pathArray[player.pathIndex].y *

  player.remainingAnimation -= player.speed;

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

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

Link to comment
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.
var firstTween = game.add.tween(playerSprite).to({
    // 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){
    var nextTween = game.add.tween(playerSprite).to({
        x: path[i][0] * 64,
        y: path[i][1] * 64
    // Chain the tween for this node onto the previous tween.
    // 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.


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

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.


  • Recently Browsing   0 members

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