A couple of people have asked me about the sprites I made for Supersoldat, what program I used, how they were made, how they were animated, as well as asking me if I can provide some sort of resource. Most recently rad-x asked me to make some sort of tutorial, so I've decided, perhaps unwisely, to do so - so, without any further ado, here is How to Draw and Animate Stickmen:
I've always used the Gamemaker IMP so animation is done frame by frame: you draw a bunch of seperate images and the program turns them into an animated .gif file that can be used in the game.
I made Supersoldat knowing full well that I couldn't draw for peanuts with a mouse - something a lot of commerical developers forget though is that the true life of a character comes from how he or she moves, not the basic static model - the easiest way to fall into the uncanny valley is to have a perfectly photo-realistic character that moves like a robot. Thing is, the more complex your model, the harder it will be to animate - in my view you can't go wrong with something that is more or less a coloured stickman, as this is exceedingly simple to draw and cab be very expressive.
A stickman is made of 9 straight lines and a circle : People are probably already yelling at me for stating the obvious here but I'd also like to stress that there's an order to how they're draw, as shown below:
The stickman grows outwards like a tree - this basic idea is important because animation essentially involves drawing and re-drawing the character over and over again, and most often all you're doing is rotating the different lines slightly - if you start by the bottom of the legs though you'll end up with something that looks queer when you try to join it all up: better to start in the middle and work outwards.
The last image is Sieben - all I did was to fill out the stick a little and colour it in - filling it out or colouring it in differently could give you a completely different character, but the stickman anatomy remains the same.
* NB for Supersoldat the Orderly was litterally just a "reskinned" Sieben
Brute force animation
I don't use any clever software so Supersoldat's animations were essentially done by copy pasting the original image (say the one above), editing it, and then copying starting again with that image. I trick I learned was to redraw important parts of the character over the top in a different colour, then use "change all pixels" to get rid of the old image - here's a simple kick animation:
Below is the same technique used for some slightly more advanced sprite work:
WARNING - gore-iness
* NB - certain parts of the body like the head have a tendency to move around and yet if they're drawn even slightly different people will notice (we all look at faces) Sieben's head is the part of him I redrew the least - each time it had to move I drag selected it and moved it to the new position.
Eat your protein pills
Depending on personal preference you may want to make your whole animation with black stickmen before going back an editing each frame to add details, buff-itude and clothes. I often do it all at once but I wouldn't reccomend that to anyone who's starting - I guess you start skipping steps once you've gone through them all about a bagillion times.
Remember to go easy on the details - you'll have to redraw them over and over again so unless you keep them to a minimum you will either go insane, or get lazy and stop animating as well (and as I said before, good animation makes up for bad modeling, not the other way round).
Here's a schematic that shows a way to more or less systematically add clothing to a character: you can include all (cloak) or none (skin tight) of the details - essentially cloth has a habit of drooping. Remember that:
WARNING - sharp edges
When in doubt, cheat
Often you'll have trouble getting your head around something - kicks are easy but realistic walk cycles are trickier than you'd think. Luckily you can always stand up and walk around the room to get some of idea of how your legs move. Of course, for something like a dog it's more tricky (unless you yourself are a dog - in which case well done using a computer) - in this case you'll want to look for studies on the internet.
You can take inspiration from these, try to copy them by hand or go the whole nice yards and save the image, crop, shrink and paint over it - take the following image for example:
WARNING - cartoon child walking
We can extract the following stickman skeleton and repaint it for use as something else - all that and technically it isn't even stealing (technically is such a beautiful word):
That being said I try to avoid using this cheat - Supersoldat had only 4 (Dog run, Sieben run, Sieben walk, Sieben sneak) that were based on examples, and Abomination and my (not so) secret project are 100% my animations
Anyway, hope somebody finds this helpful and that it will satisfy those who've asked
Comments or suggestions? Own an image I've ripped off and want to sue me?
edit: Ah yes, this is my second amateur tutorial - here's the first Simple Sprite Making Technique
Edited by Wilbo, 03 June 2009 - 07:41 PM.