Phaser 3 image animation

Question

Ok guys, I have a game to write with Phaser3 and this is my first experience with Phaser. I need to write a rotating spinner game (where you rotate a spinner and win something). Here is an example image of a spinner for you to get the idea.

So now I need to rotate this spinner to some defined angle in some defined seconds. So my question is, does phaser 3 has some rotation animation where I can say rotate picture to some angle in some seconds? Or do I need to deal with it in update(time,delta) function of Phaser3 and do all calculations by myself?

Answer 1

Yes! You can add a Tween that does the rotation in a specific time for you. Check this documentation for more details.

here's an example of the tween implementation:

this.tweens.add({
    targets: image, //your image that must spin
    rotation: rad, //rotation value must be radian
    duration: 1000 //duration is in milliseconds
});

Answer 2

You can rotate a game object with setRotation in the update method. If you want some of the plumbing written for you, you should use phaser tweens. In your use-case it looks like you’d want a phaser timeline as well, which is just tweens executed sequentially. Stackblitz Example.

The official documentation to tweens isn’t worth looking at. The rex notes site has much better examples for many phaser topics, including tweens and timelines. Rex Notes Tweens.