Follow predefined path

[eGGzy]

I'm wondering what would be the best way for a sprite to follow a predefined path like:

 

 

I don't need pathfinding algorithm since the path is always the same. I was thinking to attach tile location callback in the corners and with them change sprite's velocity, but I'm not sure if that's the best way of doing this.

[valueerror]

i'd say... chained tweens.. have a look at the examples

[eGGzy]

i'd say... chained tweens.. have a look at the examples

 

I tried it, I get weird bugs with group members and healthbars disappearing.

[rich]

I would use path finding for this, sorry, I know you said you didn't want to But it seems the most sensible. Or you could use tile waypoints. So set tile markers down (on the page, not the walls) and then just move the sprite towards the next available waypoint. You'd place them in order sequentially.

[eGGzy]

I would use path finding for this, sorry, I know you said you didn't want to But it seems the most sensible. Or you could use tile waypoints. So set tile markers down (on the page, not the walls) and then just move the sprite towards the next available waypoint. You'd place them in order sequentially.

I've added easystar plugin and pathfinding works all right, but I still don't understand how to move sprite by the found path

[george]

Hey,

so you want to tween that sprite. It's no user controlled sprite? What about the following idea.

 

Create your path in a designated data structure to read it from there. I'm thinking of an array with let's say 100 points which build up your path. Those points should be equally distributed. Now you could just tween a value from 0 to 1 and read the appropriate value from your array in the form of pointArray[pointArray.length * tweenProgress]. This will give you a point at every moment of your tween.

 

Your tween should tween a variable from 0 to 1. You could use a phaser tween for that purpose.

Here an example with the help of svg to get the points.

 

Code Pen Version:

http://codepen.io/anon/pen/solIc/

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });function preload(){  game.load.image('bunny','assets/bunny.png')}function create() {  //create your path in whatever data structure you want.  //I use the help of an svg element here  var path = document.createElementNS("http://www.w3.org/2000/svg", "path")  path.setAttribute('d', 'M148.185,118.975c0,0-92.592,39.507-80.247,79.013,s79.012,143.21,129.629,124.691s64.198-113.856,120.988-100.755s118.518,30.384,116.049,109.397s-82.715,118.519-97.53,201.235,s-92.593,139.505,0,159.259')  var totalPathLength = path.getTotalLength();  var startPoint = path.getPointAtLength(0)  //we will move the bunny from phaser examples  bunny = game.add.sprite(startPoint.x,startPoint.y,'bunny');  bunny.scale.set(0.25)  bunny.anchor.set(0.5)  //let's draw the path  debugPath = game.add.graphics(0,0)  debugPath.lineStyle(1,0xff0000)  debugPath.moveTo(startPoint.x,startPoint.y)  //a little tween helper so we can tween  //a single variable  tweenHelper = {progress: 0}  tweenHelper.onUpdate = function(tween, value){    p = path.getPointAtLength(totalPathLength * value)    bunny.position.x = p.x    bunny.position.y = p.y    debugPath.lineTo(p.x, p.y)  }  //tween it!  tween = game.add.tween(tweenHelper).to( { progress: 1}, 5000).start()  tween.onUpdateCallback(tweenHelper.onUpdate)}

[jdnichollsc]

Woww George, excellent example! One question, Can I create a tween timeline in Phaser like it http://greensock.com/timelinelite ? 

 

Regards, Nicholls

[george]

Hi Nicholls,

there is no timeline functionality included in phaser. Feel free to use greensock's timeline library. Phaser & Greensock play wonderful as a team if you need more than phaser can provide.

[horkoda]

I tried it, I get weird bugs with group members and healthbars disappearing.

 

I'm using the same technique since v1.6 to move units and I'm not getting these bugs.

If it's a Phaser bug, could you provide a small example of this happening? 

[jdnichollsc]

Woow George, you're absolutely right, it is very easy! http://codepen.io/jdnichollsc/pen/ZYeWEr *-*

 

haha thanks my friend! 

[ForgeableSum]

I've added easystar plugin and pathfinding works all right, but I still don't understand how to move sprite by the found path

 

Here's what I did. Put a function in update which stops a sprite when it reaches the final destination and changes the moveToXY when it reaches a non-final destination. To check if a sprite has reached a non-final or final destination, use distanceToXY. 

 

What I did was store the path in an array stored in the sprite object itself (like sprite.path). That way, you'll have access to the sprite and its path in update. Like so: 

 

if (path[0] != undefined) {        for (var i = 0; i < path.length; i++) {            var goingX = path[i][0];            var goingY = path[i][1];            //   console.log('go to ' + goingX + 'X and ' + goingY + 'Y');            if (sprite.path.length > 0) {                sprite.path.push(goingX, goingY);            } else {                sprite.path = [goingX, goingY];            }        } }

The function which sets a new moveToXY when a sprite reaches a non-final destination would then remove the coordinate in the array with unit.path.shift(), so the next one could be processed when it reached another coordinate. 

 

Keep in mind that my path array in the example above is the one returned using pathFinding.js. The one returned by easystar might look different.

[27thColt]

On 1/13/2015 at 4:31 AM, feudalwars said:

 

Here's what I did. Put a function in update which stops a sprite when it reaches the final destination and changes the moveToXY when it reaches a non-final destination. To check if a sprite has reached a non-final or final destination, use distanceToXY. 

 

What I did was store the path in an array stored in the sprite object itself (like sprite.path). That way, you'll have access to the sprite and its path in update. Like so: 

 

if (path[0] != undefined) {        for (var i = 0; i < path.length; i++) {            var goingX = path[i][0];            var goingY = path[i][1];            //   console.log('go to ' + goingX + 'X and ' + goingY + 'Y');            if (sprite.path.length > 0) {                sprite.path.push(goingX, goingY);            } else {                sprite.path = [goingX, goingY];            }        } }

The function which sets a new moveToXY when a sprite reaches a non-final destination would then remove the coordinate in the array with unit.path.shift(), so the next one could be processed when it reached another coordinate. 

 

Keep in mind that my path array in the example above is the one returned using pathFinding.js. The one returned by easystar might look different.

I was trying this method since I wanted a sprite to pathfind to the player. Only problem is, I keep getting this error:

 

play.js:83 Uncaught TypeError: Cannot read property 'x' of undefined

 

Here is the code that I used (I basically copied the code said):

testenemy.forEach(function(item) {

	let tilemap = teststageMap;

   	 pathfinder.setCallbackFunction(function(path) {
        item.path = path || [];

        if (item.path[0] != 0) {
      		for(var i = 0; i < item.path.length; i++) {
				goingX = item.path[i].x;
				goingY = item.path[i].y;

				if (item.path.length > 0) {
        			item.path.push(goingX, goingY);

        		} else {
        			item.path = [goingX, goingY];
        		}
        	}
        }


    });

	pathfinder.preparePathCalculation([Math.round(item.x) / 32, Math.round(item.y / 32)],        [Math.round(testplayer.x / 32), Math.round(testplayer.y / 32)]);
    pathfinder.calculatePath();

}, this);

As you can tell, the problem is at goingX and goingY. I replaced the item.path.[0] with item.path.x (same with goingY) since the path stores each tile in an object, not as a 2d array. However, for some reason I keep getting that same error even though it works just fine when in the console.

[Vii]

On 03/06/2016 at 1:59 AM, 27thColt said:

I was trying this method since I wanted a sprite to pathfind to the player. Only problem is, I keep getting this error:

 

play.js:83 Uncaught TypeError: Cannot read property 'x' of undefined

 

Here is the code that I used (I basically copied the code said):

testenemy.forEach(function(item) {

	let tilemap = teststageMap;

   	 pathfinder.setCallbackFunction(function(path) {
        item.path = path || [];

        if (item.path[0] != 0) {
      		for(var i = 0; i < item.path.length; i++) {
				goingX = item.path[i].x;
				goingY = item.path[i].y;

				if (item.path.length > 0) {
        			item.path.push(goingX, goingY);

        		} else {
        			item.path = [goingX, goingY];
        		}
        	}
        }


    });

	pathfinder.preparePathCalculation([Math.round(item.x) / 32, Math.round(item.y / 32)],        [Math.round(testplayer.x / 32), Math.round(testplayer.y / 32)]);
    pathfinder.calculatePath();

}, this);

As you can tell, the problem is at goingX and goingY. I replaced the item.path.[0] with item.path.x (same with goingY) since the path stores each tile in an object, not as a 2d array. However, for some reason I keep getting that same error even though it works just fine when in the console.

dude did you solve this, i am stuck with it for a 2nd day ;(  using this  https://github.com/mfoncho/AsyncPathingFinding plugin, it find the path and debuger even draw it, but have no clue how to make them move