Participating in game jams, 48 hour competitions, and small amateur game productions, I've noticed that a lot of people have trouble creating simple animations. Often programmers feel they do not possess the art skills, or skilled artists don't know where to begin with game animations. Creating simple game animations isn't as difficult as it seems, and most people just need a prod in the right direction.
Thus, here is my introductory directed prod. If you have any tips to add or disagree with anything I say, feel free to comment me here or on twitter, and I'll gladly include your tips in the article - the more we can teach and learn the better!
Running Animations
Often for small-scale operations, a simple 4-frame running animation is sufficient. Here's a little template skeleton for a running animation:
I've highlighted below the arm and leg closest to the screen, so you can see how the two sets of limbs move during a run.
You can draw over this with your character design. Notice that the limb positions are exaggerated. The legs are far forward and far back. When one limb is fully extanded on the ground, it forms a straight line from the back. In the first and third frames the runner is not touching the ground.
Above is a running animation I created for Mindbender a few years ago. This is done with 8 frames of animation. I did the first four first, and then added the in-between poses later.
The red stripe on the leg is a trick I came up with that means that the front and back legs are easily distinguishable. The eye clearly sees the moving red line and sees it as the movement of one leg. Before I added that, it looked more like the image was blinking between two states, as frames 1 and 3 looked very similar. See if you can do this on your own animations - make the front leg clearly distinguishable from the back. The animation should demonstrate that even with only 4 frames of animation the motion is clear.
I always look to Sonic for a good, bold running animation. Sonic's a nice example because he has nice long limbs, and because running is kinda his schtick. Above you can see all 12 frames of his run animation (from Sonic 2 Beta, ripped by Rankles). You can pick out the four key frames that define his animation cycle - they are the boldest, and the poses are pretty exaggerated.
Exaggerate!
A trap a lot of beginners get stuck into is not wanting to exaggerate movements, but the reality is that the way humans move is actually pretty exaggerated. Legs and arms are fully extended at a lot of times, we leap off the ground, and our limbs stick out far from our bodies. Subtle movements are special versions of exaggerated movements, not the other way round.
Jumping Animations
Your next most likely animation you'll want to do is a jumping animation. This is fairly simple, and is just about posing the character correctly. I usually do two poses for a character: going up and coming down.
Above is an skeleton drawing of the jumping animation for my Sonic Forever prototype. Below is the character drawing based on the animation.
There's not much for me to say on this front, other than these two poses always seem to work.
Think big, scale down
Don't fall into the trap of starting drawing in the scale you will use in your game. What if that's the wrong size, and you decide to make the game objects a different size in later versions? What if you want to do fun camera effects, like I did in Sonic Forever?
To scale an image automatically to the correct size, use something like image.scale = intended_height/image.raw_height in your code.
Computers these days can deal with some pretty big image files, so don't worry about taking up space or memory. There's far more processor/memory-intensive activities your computer has to do. Bigger is (in my opinion) better.
Constructing a sprite sheet
Less of a how-to, more of a bunch of tips here. Choose a point to be the centre of your sprite and try to keep that consistent. Usually I choose the belly, as that tends to stay fairly consistent heighwise when you're running.
I like to work with big square frames of animation. The Mindbender sprites above were done in eight 1000x1000 pixel frames. Round numbers are easy to work with. Don't worry about having a lot of whitespace around your sprites. This means that if you draw another animation where the character is particularly tall or wide the programmer won't need to accommodate a different size of frame.
Talk to your programmer about what it is they want. I've had a lot of times where I've failed to properly explain what I've needed from an artist, and had to construct the sprite sheet myself, working around what they'd done wrong. Some programmers may prefer to work differently to me, or they may already have code that requires sprite sheets to take a particular form. Ask for clear specifications from your programmers!
Anything else?
If there's any other tips you'd like to add, or things you disagree with, please let me know!
Otherwise, good luck and happy animating!
