What is the best way to do 2D animation?

Question

I'm writing a 2D animation class, and I've got TGA pictures in which the player animation is stored. These pictures are 8x8 tiles (so on each row there are 8 frames of a moving character)

However, I don't have a clue on how to animate this in code.

I was thinking about updating it by moving the u-v coordinates each frame and returning only the current frame. How can I do this?

Answer 1

These days if you are on Windows Direct2D is the way to go.

Answer 2

What you are describing sounds closer to video than 2D animation, and you might be better of looking into some video codecs.

But alternatively OpenGL would be a good place to start.

Answer 3

You haven't given enough information about the environment, the planned game design, and your current engine structure to suggest anything specific, so here's the general advice:

There is no one optimal solution. Get something drawing and then use that until it starts to break, then iterate; it's a very game-design related problem, and game design is predicated on iteration, so bringing the iteration down to the engine level(rather than to fret and try to come up with a "perfect solution" out of the gate) ends up being the best way to explore this aspect of gameplay. Some examples of how much your solution may vary:

If you have an anim predicated on just looping through the frames while the "player entity" is in some state(e.g. walk, jump, idle), then you keep a frame counter, increment it with the game's timestep, and draw frames according to the counter.

If you have an anim that needs a lot of contextual information to display properly, like turning towards different facings, grabbing on to ledges, etc., then you add additional state checks along with the frame counter, and if there are enough forms of state you may want to formalize it as a finite state machine run every frame. You might also have some kind of procedural effect tied to entity state: rotation, blink, scaling, shaders...

If anims trigger gameplay events(like throwing a punch) you'll have to decide whether to put that information directly in the animation code or to introduce a data-driven mechanism for "fire this event now, spawn this object, turn on this collision volume..."

Then there are details like origin points, image size(size may change over time for some anims), variable playback speeds....

Like I said up front, don't try for a perfect solution. It just depends on what the game needs.

Answer 4

http://www.sfml-dev.org/index.php ;)

Answer 5

Your question is quite broad, so here a broad response ;)

Since Qt4.6 (one month old) there is an animation framework. It seems very interesting (no time yet to really code with it).

As it's Qt, it means nice API, multiplateform, good documentation and probably decent performances.

http://qt.nokia.com/products/appdev/add-on-products/catalog/4/Utilities/qtanimationframework

Of course, maybe you don't want to depend on Qt.

Answer 6

In terms of actually drawing to the screen, if this is what you are asking for in the questions, SDL is relatively simple to use, and quite powerful, to boot.
Also, Lazy Foo's tutorials are very good, in terms of documentation.

Answer 7

Sup dawg.

Seeing as you're using the UV coordinates of the texture that contains all your animation states, you'll need to convert from pixel coordinates to UV coordinates.

If your sprite is 32 pixels wide and your texture is 256 pixels wide (thus containing 8 frames), you'll want to divide the width of the sprite by the width of the texture, giving you a number between... 0 and 1! This is your offset. To get a frame from your strip, simply do:

float step_size_x = (float)(width) / (float)(texture_width);
float step_size_y = (float)(height) / (float)(texture_height);

float begin_u = step_size_x * step_current_x;
float begin_v = step_size_y * step_current_y;
float end_u = begin_x + step_size_x; // basically, if you want sprite 0, you go from 0 to the x of sprite 1
float end_v = begin_y + step_size_y;

And that's it! Now if you want to copy the portion of the texture, that would be the following in OpenGL:

glBindTexture(GL_TEXTURE_2D, texture_id);
glBegin(GL_TRIANGLE_STRIP);
    glTexCoord2f(begin_u, begin_v);   glVertex3f(x - (width / 2), y - (height / 2), 0);
    glTexCoord2f(end_u, begin_v);     glVertex3f(x + (width / 2), y - (height / 2), 0);
    glTexCoord2f(begin_u, end_u);     glVertex3f(x - (width / 2), y + (height / 2), 0);
    glTexCoord2f(end_u, end_u);       glVertex3f(x + (width / 2), y + (height / 2), 0);
glEnd(); 

Now that I've given you a complete code sample, will you please stop bothering me about your game? :P