Sprite Rotation to Follow Tween's Custom Path?

[bapho]

Hi,

 

I'm using DeliriousRhino's snippet to get a tween to work with a bezier curve. But what if I'd like to make the sprite's rotation follow that path? How would I go about it?

 

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);

});

 

 

I see this:

http://phaser.io/tutorials/coding-tips-008

 

But I'm not sure how to go about implementing that rotation to the tween.

[Snowy]

Hey Bapho,

Just had this issue myself, but managed to get something working! Take a look.

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

var lastPosition = {x: moveSprite.x, y: moveSprite.y};

var tween = game.add.tween(moveSprite).to({
x: [startX, firstBezierPointX, secondBezierPointX, endX],
y: [startY, firstBezierPointy, secondBezierPointY, endY],
}, 1000,Phaser.Easing.Quadratic.Out, true)

tween.interpolation(Phaser.Math.bezierInterpolation);

tween.onUpdateCallback(function(){
    moveSprite.rotation = Phaser.Math.angleBetweenPoints(lastPosition, moveSprite.position);
    lastPosition.x = moveSprite.x;
    lastPosition.y = moveSprite.y;
), this);
 

Hopefully it helps!

Snowy