Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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.

share|improve this question
1  
What is your question? –  Benlitz Jun 11 '12 at 16:25
    
@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. –  Bruce Collie Jun 11 '12 at 16:27

3 Answers 3

up vote 3 down vote accepted

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;
transform.Identity();
transform.AddRotation(angle);
transform.AddTranslation(m_Position);

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!
share|improve this answer
    
I love the fact that my answer got downvoted by the community, but accepted by the OP. XD –  knight666 Jun 12 '12 at 4:18

I use rotsprite - it was designed for this purpose.

share|improve this answer
2  
What is rotsprite? Are you referring to a utility or a class in some library? A link would be helpful here. –  Jonathan Hobbs Oct 27 '12 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 http://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).

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.