Predefined path for a character (roam mode)

[Batzi]

So I have this demo below before I explain what I am trying to do

 

http://jsfiddle.net/Batzi/abs191e5/19/

 

So I am using the function 'moveToXY()' to move my character. Every 5 seconds it's moving towards a different direction. I am using SetTimeout() as you can see in the code. All animations are applied so everything is working as intended. In the update(), I am specifying when the character should stop (ex: if it reaches a specific x & y).

 

However, I want to declare a predefined path such as this one

var path = [[1700, 800], [1600, 800], [2300, 800]];

and have my character roam around but I don't want to duplicate the setTimeout.

 

How would you approach this problem?

 

PS: Ignore the coordinates in path. They're out of proportions.

[Skeptron]

Why not use Phaser.Timer.loop()?

 

Doc : http://phaser.io/docs/2.4.4/Phaser.Timer.html#loop

[Batzi]

Why not use Phaser.Timer.loop()?

 

Doc : http://phaser.io/docs/2.4.4/Phaser.Timer.html#loop

How would you control when the character stops?

 

So far I am doing something like the code below in the update()

if(flag)  player.body.velocity.set(0);if(player.x==100)  flag = true;

and before firing up a moveToXY(), it is setting the flag to false to enable velocity.

 

If I have a predefined path, will I have to do several ifs or a switch in this case? Is there a more efficient way to do it?

[drhayes]

You can do a bit of math and see how long it'll take the character to get where it's going to go. Since you know the current point, the destination, and the velocity that'll give you the time. If you have the time you can set a timer to a value bigger than that.

 

If you want the route to really be a loop then you could move to the first position in the array, then send that position to the end of the array... so the next time the timer runs, your NEW position will be at the head of the list. Repeat forever or until killed by player. ( =

[Batzi]

You can do a bit of math and see how long it'll take the character to get where it's going to go. Since you know the current point, the destination, and the velocity that'll give you the time. If you have the time you can set a timer to a value bigger than that.

 

If you want the route to really be a loop then you could move to the first position in the array, then send that position to the end of the array... so the next time the timer runs, your NEW position will be at the head of the list. Repeat forever or until killed by player. ( =

Good idea! I will try that and come back after testing! Thanks!

[Batzi]

So I modified the code and did this: http://jsfiddle.net/Batzi/abs191e5/61/

 

Wait 5 secs for the next move.

 

I console logged the player's position. Can anyone tell me why it's not consistent with the ones set in the path array? They're completely out of place.

[Skeptron]

Shouldn't you also move when you reset the count to 0? Because as of now you don't.

 

So this should work better : 

function callMe(x,y){    console.log(player.x+'\n'+player.y);            if(count >= path.length) count = 0;    flag = false;    var x = path[count][0];    var y = path[count][1];                game.physics.arcade.moveToXY(player,x,y,60);    count++;}

[Skeptron]

Oh, just read that in the doc (which might explain your issue) : 

 

moveToXY(displayObject, x, y, speed, maxTime) → {number}

 

Move the given display object towards the x/y coordinates at a steady velocity. If you specify a maxTime then it will adjust the speed (over-writing what you set) so it arrives at the destination in that number of seconds. Timings are approximate due to the way browser timers work. Allow for a variance of +- 50ms. Note: The display object does not continuously track the target. If the target changes location during transit the display object will not modify its course. Note: The display object doesn't stop moving once it reaches the destination coordinates. Note: Doesn't take into account acceleration, maxVelocity or drag (if you've set drag or acceleration too high this object may not move at all)

 

So what you need is this : http://jsfiddle.net/abs191e5/62/

 

Just set the maxTime so that it matches the loop interval. With this fix, your character will arrive exactly at his destination when ordered to move to a new one. I think you could even set maxTime to a lower value if you want the char to wait before changing his destination.

[Batzi]

 

Oh, just read that in the doc (which might explain your issue) : 

 

moveToXY(displayObject, x, y, speed, maxTime) → {number}

 

Move the given display object towards the x/y coordinates at a steady velocity. If you specify a maxTime then it will adjust the speed (over-writing what you set) so it arrives at the destination in that number of seconds. Timings are approximate due to the way browser timers work. Allow for a variance of +- 50ms. Note: The display object does not continuously track the target. If the target changes location during transit the display object will not modify its course. Note: The display object doesn't stop moving once it reaches the destination coordinates. Note: Doesn't take into account acceleration, maxVelocity or drag (if you've set drag or acceleration too high this object may not move at all)

 

So what you need is this : http://jsfiddle.net/abs191e5/62/

 

Just set the maxTime so that it matches the loop interval. With this fix, your character will arrive exactly at his destination when ordered to move to a new one. I think you could even set maxTime to a lower value if you want the char to wait before changing his destination.

 

Thank you so much! That helps me a lot!

 

Quick question though. So if I don't set a velocity like you did in the code, using the maxTime parameter, it will set the velocity depending on how long it takes the object to reach its destination?

[Skeptron]

From the code, yes it does : https://github.com/photonstorm/phaser/blob/v2.4.4/src/physics/arcade/World.js#L1422

 

Do not hesitate to have a look at the code. In the doc for each method/property the corresponding code is always referenced. It's usually very readable and understandable!

[Batzi]

From the code, yes it does : https://github.com/photonstorm/phaser/blob/v2.4.4/src/physics/arcade/World.js#L1422

 

Do not hesitate to have a look at the code. In the doc for each method/property the corresponding code is always referenced. It's usually very readable and understandable!

Thanks!

 

One more thing, let's say I want to make him stop when he reaches a specific [x,y]. Do I have to stop using the loop in this case? Cause it will keep on going and the character won't stop since the flag is always set to false because of the callback function that the loop calls.

 

The ideal scenario is to have him stop for let's say a minute then move on to the next [x,y], stop for another min and so on and so forth.

[Skeptron]

Why don't you set the loop interval to a big number (like a minute) and the maxTime to a small value (like 10s)? This way the char would walk 10s, wait 50s, walk 10s etc.

[Batzi]

Why don't you set the loop interval to a big number (like a minute) and the maxTime to a small value (like 10s)? This way the char would walk 10s, wait 50s, walk 10s etc.

I tried that but it keeps walking until the loop calls the next [x,y].

 

EDIT: So apparently, if you tell it to go to x=100, it never actually stops at exactly x=100. Sometimes it's 101 and sometimes it's 100.XXXXX.

 

so in the Update(), if I do something like

if(player.x==100) flag=true;

It won't work since it's never 100. Depending on the current x value, sometimes it works if you do a toFixed() but it doesn't always work since the problem is not always the decimal part.

[Skeptron]

Interesting. A super ugly fix would be to put a setTimeout() in the loop function... But you might want to look for a better solution.

 

http://jsfiddle.net/abs191e5/102/

[Batzi]

Interesting. A super ugly fix would be to put a setTimeout() in the loop function... But you might want to look for a better solution.

 

http://jsfiddle.net/abs191e5/102/

Well that fixes it! Thank you!