Moving Pixels

Animating is hard, so I thought I'd go through what I do when creating sprite animations. Sprite work is great because although it takes a while, the results are really nice looking. And who doesn't like a bit of retro. In this case I tried to make a simple 3 combo attack animation as seen in many platforming fighter games like Henry Hatsworth and the Megaman games.

Creating a simple reference sprite is really useful to work with because it really reminds you of the proportions and ratios everything as you create each frame - something I've always had a problem with. To help deal with this I tend to begin animations with really simple stick figure. Stick figures are also great for prototyping ideas in your head and getting the right poses due to their nature of being really easy to draw. It also helps to have seen all those stick man fighting animations like the Xiao Xiao series.

This choreograph is loosely based on a similar series of attacks used by the games mentioned above.

The sprite work is done in Fireworks since unfortunately I haven't quite got the hang of using Photoshop for none-photo related things yet. The vectors of the stick man are done simply using the brush tool in Adobe Flash. I also tend to do this in Fireworks itself, but I personally find drawing with vectors a bit easier.

Next up is adding all the circles and things that you always do when tracing the skeleton. Since I'm working with pixels, I find it useful to keep any details to a minimum since the circles and boxes aren't very clear when you scale it down to draw pixels over.

*Bladed weapon for display only, not available for purchase.

After this begins the long and somewhat arduous task of figuring out where the pixels dun go to. I tend to do a really basic outline with block colours indicating individual objects on the character. In this case, the objects are the pairs of segments that make up the arms, the chest and waist armour pieces, hands, feet, head and hair.

I prefer starting with the most static parts; head and chest, since they change the least, followed by the extremities to make sure they are positioned correctly. For this character the loose areas coloured in a blue shade I tend to draw on last, along with the hair.

This part usually takes the longest, since it often requires nudging pixels a lot until it looks about right. This animation sequence in particular is awkward since the character turns, so it always look a bit odd and you can't recycle parts like the head. However, once this bit is done the shading comes next which isn't too hard, especially if you keep the detail low and only use two extra shading colours (for lighter and darker than the base).

Looks almost done, but its missing a something, mainly that the hair doesn't swoosh. Hair that swishes about looks great (but moving about too much is bad because of the TOO MANY animations, just look at Vent's spritesheet in ZX Advent). The minor adjustments of pixels here and there a few intermediate frames where the animation pauses really makes them look smooth.

More so when you ramp up the FPS. Also I'm too lazy to draw a weapon but it would probably look cooler.