I've started working on a 2d game. I wanted to know how animation usually works in 2d games - I know one way is to make a sprite sheet with frames of the animation, but you wouldn't see big sprite sheets on an actual professional game. is this on purpose or is there a different way of creating animation?

  • 1
    \$\begingroup\$ There are plenty of ways. You should do more research. Start with skeletal animation. Here are some related questions: gamedev.stackexchange.com/questions/38427/… gamedev.stackexchange.com/questions/35561/… \$\endgroup\$ – MichaelHouse Feb 20 '13 at 19:42
  • 4
    \$\begingroup\$ to make animation, you should change the colors of pixels during the gameplay \$\endgroup\$ – Ivan Kuckir Feb 20 '13 at 19:52
  • 1
    \$\begingroup\$ Most of the time, the reason you don't see them is the textures are stored in other forms, like binary files, compressed files, or some game-engine-specialized files. \$\endgroup\$ – laishiekai Feb 20 '13 at 19:52
  • \$\begingroup\$ "but you wouldn't see big sprite sheets on an actual professional game." Sure you would, I've shipped several games like that. \$\endgroup\$ – Tetrad Feb 21 '13 at 16:56

To understand how 2D animation works, you should understand how textures are mapped to a surface. When you pass in vertex data along with a texture to the graphics card, UV coordinates are passed in with it, to specify a (usually) normalized position on the texture that the vertex is located at. For instance, when rendering a sprite to a single billboard, you would usually pass in uv coordintes like so.

Vertex01: (0,0), UV: (0,0) Vertex02: (0,1), UV: (0,1) Vertex03: (1,0), UV: (1,0) Vertex04: (1,1), UV: (1,1)

This would map the entire texture to the billboard, which is fine for a single image, but if you want to use a sprite sheet for animation, then you would want to map to a portion of it only.

So lets say you have 4 sprites of even size on a sprite sheet, and you wanted to map the first frame of the sheet to a billboard, these UV coordinates would allow you to do map only 1/4 of the texture to the billboard.

Vertex01: (0,0), UV: (0,0) Vertex02: (0,1), UV: (0,0.25) Vertex03: (1,0), UV: (0.25,0) Vertex04: (1,1), UV: (0.25,0.25)

So if you wanted to change the frame on this billboard, you would update the UV coordinates based on the dimensions of the frame.

On top of this system, you would need to implement the animation framework that updates the animation, at the frame rate you want. Keeping track of the time since the previous frame update, you can ensure you are only changing frames every n milliseconds to achieve the framerate you want.


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