How do I rotate (tween) a sprite in a specific direction?

[swemaniac]

Hi,

 

First off thanks to Phaser. It's awesome.

 

How do I tween a sprite's angle from say 180 degrees to 360 degrees in a clockwise direction? If i just do tween.to({ angle: 360}) the sprite will rotate counter clockwise. In Phaser angles that would be from 180 to -90. Obviously it's because the tween will go down from 180 to -90, but I want it to to go upwards and wrap around i.e. 180, -179, -178 etc. Make any sense?

 

Thanks

[lewster32]

Tweens usually aren't very smart about how they work - essentially all a tweener does is gradually change one number to another, so angles are often problematic. You'd be better off adding something to your update function which increments the sprite.angle by a small amount each frame:

function update() {  if (sprite.isRotating) {    sprite.angle += 1;  }}

Then all you have to do is set sprite.isRotating to true and it'll start turning steadily. Be aware that this is a naive implementation that doesn't account for framerate differences; it'll turn slower with lower framerates. There are easy ways to tackle that if needs be.

[swemaniac]

Ok thanks lewster. Yeah the concept of tweens seems very attractive at first but they don't really fit when you need to do more advanced stuff I noticed.

[lewster32]

If you want advanced tweens which work well with rotation, check out GSAP. It plays well with Phaser, and I tend to use it for larger projects where I need fine control over tweens.