I'm going to be creating a game soon, and part of it involves spinning sprites. The sprites will be spinning around the Y-Axis (imagine a spinning plate on top of a stick, where the stick stands up vertically.

The main way I've thought of is to have a series of sprites for various rotation values that I blur between as the 'plate' rotates (the sprite is more complex than a plate, though).

The game will be for iPhone, but I'm open to using any 2D gave development library for it.

  • 1
    \$\begingroup\$ What is your question? \$\endgroup\$
    – Benlitz
    Jun 11, 2012 at 16:25
  • \$\begingroup\$ @Benlitz sorry if that wasn't clear, I was wondering if there is an 'accepted' way of doing this or if anyone could point me in the right direction. \$\endgroup\$ Jun 11, 2012 at 16:27

3 Answers 3


This answer will help if you want to use a textured quad, but not if you want to use a series of pre-rotated sprites.

First, determine the pivot point of your sprite. If your sprite is 32x32 and you want to spin the sprite around its center, then its pivot point will be (16, 16). Simple.

const tb::Vec2& pivot = m_Sprite->GetPivot();
const tb::Vec2& dim = m_Sprite->GetDimensions();

Then, create a 2D matrix. In your case, you want:

tb::Mat3x3 transform;

2D matrices are really easy. Here's what the final matrix looks like from the inside:

float rads = tb::Math::DegToRad(m_Rotation);

values[X1] = -tb::Math::Sin(rads); 
values[Y1] =  tb::Math::Cos(rads);
values[WX] =  0.f;

values[X2] =  tb::Math::Cos(rads); 
values[Y2] =  tb::Math::Sin(rads);
values[WY] =  0.f;

values[TX] =  m_Position.x;
values[TY] =  m_Position.y;
values[CZ] =  1.f;

Construct four corner points in object space. That sounds difficult, but it looks like this:

tb::Vec2 pos_ul = tb::Vec2(m_Position.x - pivot.x,         m_Position.y - pivot.y        );
tb::Vec2 pos_ur = tb::Vec2(m_Position.x - pivot.x + dim.x, m_Position.y - pivot.y        );
tb::Vec2 pos_ll = tb::Vec2(m_Position.x - pivot.x        , m_Position.y - pivot.y + dim.y);
tb::Vec2 pos_lr = tb::Vec2(m_Position.x - pivot.x + dim.x, m_Position.y - pivot.y + dim.y);

Using your matrix, you can transform those corner points:

pos_ul = transform * pos_ul;
pos_ur = transform * pos_ur;
pos_ll = transform * pos_ll;
pos_lr = transform * pos_lr;

And now you can use those coordinates for a textured quad.

For future reference:

  • Any transformation can be done with a matrix.
  • Try getting the end result you want without a matrix first and then try to turn it into a single matrix.
  • Math is your friend!
  • \$\begingroup\$ I love the fact that my answer got downvoted by the community, but accepted by the OP. XD \$\endgroup\$
    – knight666
    Jun 12, 2012 at 4:18

I use rotsprite - it was designed for this purpose.

  • 2
    \$\begingroup\$ What is rotsprite? Are you referring to a utility or a class in some library? A link would be helpful here. \$\endgroup\$ Oct 27, 2012 at 23:39

The normal way of rotating graphics on iOS is to add a translucent border to the image to have antialiased borders. There are many questions like these on SO, like https://stackoverflow.com/questions/8285354/line-is-not-smooth-on-layer-border-when-its-rotated, which includes a link to http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/ (most answers do).


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .