Jump to content

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


Recommended Posts



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? :)



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...