Move a sprite along a path

[Lucky]

Hi all

I'm a newbie to phaser and i wonder if there is some clever way to move a sprite along a predefined path?

 

/Lucky

[rich]

Not yet, but it's something we're working on a plugin for. Until then you'll have to roll your own I'm afraid (or use a combination of tweens, etc).

[Lucky]

Thanks for your answer administrator!

 

I'm currently working on a war map of the great war and  I whold like to have the troupes move and folow a elipse like path.

 

Look at the two first slides in this presentation from BBC

http://www.bbc.co.uk/history/interactive/animations/western_front/index_embed.shtml

 

What is the best way to have sprites move like that

 

anyone?

[lewster32]

GSAP has a bezier plugin which will do this kind of thing until Phaser supports it natively. Some people prefer GSAP's syntax and functionality, especially those coming from a Flash background, as GSAP was traditionally the tweening engine of choice there.

[rich]

Phaser has bezier tween support as well

[InsaneHero]

I recommend Hermite curves if you have to roll your own.  They're easier to get your head around than the full Bezier system, and the maths is correspondingly simpler.

[lewster32]

Phaser has bezier tween support as well

 

It does? Cool! I've not seen any examples of this?

[Lucky]

Thanks

[alexcurtis]

I couldn't seem to get the bezier interpolation working correctly in 2.0.4:

var tween = this.game.add.tween(obj).to({ x: 600 }, 2000)            .to({ y: 300 }, 1000, Phaser.Easing.Exponential.InOut)            .to({ x: 100 }, 2000, Phaser.Easing.Exponential.InOut)            .to({ y: 100 }, 1000, Phaser.Easing.Exponential.InOut)            .interpolation(Phaser.Math.bezierInterpolation)            .loop()            .start();

Many Thanks.

[alexcurtis]

After a bit of messing around and debugging through Phaser's code (this stuff isn't too well documented). It looks like the to construct needs changing to an array based format:

 

var tween = this.game.add.tween(obj.sprite).to({    x: [300, 800,  900, 0],    y: [600,  600, 200, 0],    angle: [360]}, 5000).interpolation(function(v, k){    return Phaser.Math.catmullRomInterpolation(v, k);});

[DeliriousRhino]

This worked for me

 

var moveSprite = this.game.add.sprite(startX, startY, 'spritekey');

var tween = game.add.tween(moveSprite).to({

x: [startX, firstBezierPointX, secondBezierPointX, endX],

y: [startY, firstBezierPointy, secondBezierPointY, endY],

}, 1000,Phaser.Easing.Quadratic.Out, true).interpolation(function(v, k){

    return Phaser.Math.bezierInterpolation(v, k);

});