How to handle and make animations?

Question

I just finished a game for my design class and I ran into a problem that I always have but this time I'm going to learn the right way to do it. I was making the background animation for my menu in photoshop (just moving layers and tweening them)and I ended up rendering out 300 frames as pngs. I always do animations this way because the only way I've learned how to write animation engines is to use a root file name and append 00x on the end to get the current frame or to create an array of images to then loop through. This results in me having large numbers of individual images in my assets folder. Is there a better way to do animations? Both programmatically and in making them. I want to hand draw the frames most of the time but I don't usually want vector images. (So no flash unless its changed recently.)

Thanks! (I'm working off no sleep for three days now so if I need to clarify let me know)

Answer 1

For absolute laziness, it might be possible to just use those images as a background; it may end up being the joke of the class that 20MB of your 20.3MB game is just the menu background, but if you haven't slept for days some people are okay with that.

Some options I can think of for animations:

• Use a spritesheet. This isn't a good idea here, but often for characters people will make one large image, containing each of the possible states of a character. Various rendering systems can then clip out the part of the texture they need to display, for each frame (no copying it; just specifying which section of the texture to draw).

• Apply an animation engine. If the movements of the background are fairly simple, then you could have a rudimentary system of tweening parts of that animation in the game. Or, you could divide its parts into spritesheets to simplify how much is done by code. (For instance: One foreground spritesheet of the game's small hero looking out over a cliff with the wind moving his hair, a static texture of the sunrise in front of him, and another spritesheet of the villain looking down at him)

• If the coding environment easily supports it, you may render the result as a movie. From Photoshop, I think the easiest format would be an uncompressed AVI (which will be way too big!) Then, you can use a conversion tool like Handbrake to turn it into an H.264-compressed MP4 file.

Answer 2

I am working with AndEngine (2D, based on OpenGL) and AndEngine's approach to animation is to have one tiled texture where each tile is a frame. You can have 12 frames in a texture 1x12, 2x6 or 3x4. Because graphics hardware is very capable when dealing with textures, showing a region of the texture is very fast. Based on what engine do you use, or whether you make everything from scratch, you can probably use similar approach.

This is actualy the SpriteSheet that @Katana314 is talking about, but I am not sure why he/she says it's not a good idea here.