How to move on right click to position ?

[AntoineDuval]

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 ?

 

Thanks for your time.

Antoine Duval.

 

[mwissink]

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

[Arcanorum]

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.
    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 February 24, 2017 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.