I'm making an online game, and I had been using a blank square as the character until recently. Now I want to add a real, animated character.

I downloaded a free sprite sheet which has 12 (3x4) character sprites.

What is the general method to animate the character?

I see why having all the character animations in one file can be useful, but I don't understand how it would be done. I don't want code or anything, I just want to know how you normally use the sprite sheet to animate a character so I code it afterwards.

  • \$\begingroup\$ possible duplicate of 2D graphics - why use spritesheets? \$\endgroup\$ May 24 '11 at 10:41
  • 2
    \$\begingroup\$ @The Communist Duck: I think the question is not about the why but rather about the how to use a sprite-sheet. \$\endgroup\$
    – bummzack
    May 24 '11 at 13:39

The answer to why to use a sprite-sheet has already been answered in this question.

How you use a sprite-sheet in your game is quite simple. Usually you have a class that keeps track of the elapsed time and displays another frame once a given threshold has been reached (eg. if 1/25th of a second has passed or similar).

How to display a new frame depends on your underlying graphics API. You might have to copy the new pixel data to a pixel-buffer, or modify UV coordinates of a quad, so that it shows another portion of the sprite-sheet.


Usually, to animate a sprite, you have to keep track of three things: time of course to handle animation speed, current animation (which can be the 'line' in an unoptimized sheet) and current frame in animation (which can be the 'column' in an unoptimized sheet).

Depending on your needs, you might also have a variable 'hotspot' which is the reference point from which the sprite will be drawn. This is useful especially for human character walk and run animations, to avoid 'sliding' effects.

Now, to actually draw your sprite, you want to draw only a region of your sprite sheet, which will be either computed (x = current frame * frame width, y = current animation * frame height), or stored in some data structure created by a tool.

Anyway, at this point, you should have a mapping from state (animation + frame) to a rectangle in your sheet. Depending on your technology stack, you might draw a clipped version of the image (GDI+, Java, etc...) or texture a quad with the proper UVs (OpenGL, ...), or use SpriteBatch with a source Rectangle (XNA).


Simply stated, to animate a sprite using a sprite sheet you divide the sprite sheet into all its columns and rows then draw each individual column & row comination in a series at a given speed(rate of switching between sprite positions) and when you loop all that it gives the appearance of animation.

Also you can slow or speed the rate of switching between these columns and rows to give the appearance of a slow walker or a scurrying character and you can increase/decrease the x and y coordinates of the sprites position on the screen to add motion to the animation.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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