Wilbo

Hey everyone,

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:

Basic premise

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.

Stickman anatomy

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



William

I'm working on getting agents to turn slowly toward a given object, but in order to do so in need to be able to tell them whether they should be turning clock-wise or counter-clockwise, in other words adding or subtracting degrees from their image_angle and/or associated variables. Essentially I'm working on a function that returns a sign which I can multiply and add to the current direction of the agent.

Here's the function I've got so far:

/*Figures out whether a given direction is to the left (1) or the right(-1)
argument0 = Facing (int E [0,360])
argument 1 = Direction to check (int E [0,360])
Returns the correct sign */

var Diff
{
	
	Diff = argument1 - argument0;
	
	if (Diff>0 and Diff<180) 
		then return(1);
			else return(-1);
}

It doesn't work all that well but for the life of me I can't get my head aroun dit - wondering if anyone's good with angles - perhaps I should be using a bit more trigonometry/complex numbers?

Cheers,


William

I've always been a fan of the whole stickman art style because shading and so on has always seemed far too difficult to manage. Recently though I've been having a go at making some nice high quality sprites, and I've hit upon a technique that other people might find useful. Note that all I'm using is
the standard Gamemaker editing program - nothing fancy. I'm limited to 3 images in the actual post so the others will have to be links:


STEP 1 - Choose the image size
We're going to be reusing one of the oldest tricks in the book which is to say shrinking down large images rather than fiddling around wondering how to paint individual pixels. I didn't invent this - it's been around as long as paint. The important thing to note is that for this technique to work you need to draw a sprite 2-4 times bigger than the one you plan to use in game. Also, give yourself some lee-way: you can always crop the image down later.


STEP 2 - Stick man
I'm assuming that anyone reading this knows how to draw a stickman - while they might seem petty they're the bread and butter of drawing stuff that doesn't look wierd. Essentially you decide on your character's pose during the stickman phase - in this case, the character has been knocked flying so we'll draw a basic stickman falling backwards, arms akimbo. You might recognise the pose: I'm lazy so the game I made the for reuses part of the Supersoldat engine.

Stickman

STEP 3 - Silhouette
Here we need to "fill out" the stickman - fancy pants people will call this an undercoat, and since black goes with everything I use black. Don't bother about being uber precise, just use the fattest painbrush size and give some shape to the head, body, arms and so on. We can, and indeed will, fiddle around with it if it looks wierd latter on.




STEP 4 - Colour
Again using the fattest painbrush and a dark colour, go over the various parts of your silhouette before you forget what they're supposed to be. We you start out essentially just colour in, leaving a couple of pixels of black around the edges (don't bother worry about shadows and so on, not until your a bit more comfortable). You'll noticed that I've fiddled a bit with the position of the arms and various other things because it looked a little skwify. This is because I basically just "potatoed" my stickman - I'm not a great artist, I essentially just redo stuff until it looks passable.

Colour

STEP 5 - Detail
Now and only now do we start adding details like a mouth and ears to our potatoes. Not much to say at this point - it's starting to take shape though, and again, if things seem out of proportion, erase that part, redraw the silhouette and then reapply the coloiur.

Detail

STEP 6 - Highlight
This is more or less the key to what makes it look good - uber-nerd that I am I used to paint Warhammer, and as you've probably noticed the whole technique ressembles, well, painting a Warhammer model. Anyway, eye-dropper your previous colours, raising the brightness a few notches and then re-apply them on top, once again leaving a few pixel around the outsides. If you're feeling confident think about raised edges - what would catch the light, etc. If not, just draw a light colour inside a darker colour inside the black.




STEP 7 - Extra Details
Add your finishing touches - ammo belts, pockets, pustules, using the same technique: basecoat followed but dark colour and then light colour: in this case I painted the dark skin colour in splodges, then a dark grey inside these, green inside the grey and dots of white in the centre of this. Finally there's drool and other stuff that probably won't be noticeable once we shrink it down, but nevermind - go for it, have fun!

Extra1

STEP 8 - Crop and Shrink
It's important to remember how much bigger your sprite is than it should be - this one is twice as large, so each time I make a new sprite I shrink it to 50% with excellent quality. If you have a look at the resulting sprite you'll realise how much harder it would have been to create the same thing at that size directly. It might be worth picking out the eyes and teeth (things that attract attentions and are often blurred) but generally that's not even nessecary.


NOTE - Animation
When it comes to animating the finished product - best to protype the movement with stickmen, then silhouette and colour the whole thing before highlighting or adding detail to anything, so as to avoid losing work if something doesn't work out quite the way you hoped. Alternatively you can build your key frames all nice and pretty like and then animate in between them.


Okay, that's all folks - if anyone has trouble getting this right then let me know - remember though that I've never had any formal training when it comes to either drawing or animation.


edit: I've done a second tutorial for those of you who found this one interesting (hey! I can dream can't I!?) Supersoldat style animation

William

SUPERSOLDAT OPEN SOURCE

main site: wilbefast.com/showcase/supersoldat
indiedb: http://www.indiedb.c...mes/supersoldat

Supersoldat is a "character driven" platform game - it's all about the cool things the character can do, and he can do a lot of cool things. The game is unconventional as platform games go because you have extremely limited control of your character's movement while he is airborne - in this sense it is similar to Prince of Persia or the Abe games: to jump you need a run up - likewise for a flying kick to be effective, you need to be flying!



I started building this in my early days of Gamemaker use, but when I didn't know how to use any GML (so no AND or ORs), scripts, parents, particle systems and otherwise a good 90% of the program's potential - I learnt as I built it, and thanks to working harder rather than smarter I managed to create a game that a lot of people have really enjoyed (and been astounded by it's humble foundations), with loads of levels, good enemy AI, stealth, guns, explosives, martial arts attacks, water, switches, animated save point, menu, acid and many more awesome things, all done solely using DnD.

For more information see the game's Original thread.

Links need to be redone now that WillHostForFood has crashed - head over to the game's new homepage for an exe download link, and PM me if you want the source too.




The reason I'm releasing this is that I've now moved on to using all the things I did without, and there's no going back really. I hope this helps those who are just starting to understand what goes into making a game of this complexity, bearing in mind that using GML I can probably rebuild this game better in a couple of months if that, compared to the 2 and a half years I worked on it originally (albeit on and off)

Use this for whatever you want, commerical or not, but let me know if you do - I'm curious to see what people do with this. Also, saying thanks would be nice.

Cheers,

William

ABOMINATION

Take on the role of a bizarre, half corpse, half machine... thing, as it searches for its lost teddy bear. Run, jump, climb up and slide down walls, rebound and hang from the roof. Always remember that Teddy = Good and Pain = Bad.

GM Version: GM7
File Size: 1.51MB
Screen Resolution: Fullscreen 640 x 480
Changes Screen Resolution: no

This has been my main project for a while now - unlike Supersoldat* it's been planned out in advance and is written entirely in GML. We're now up to the second "Surface Demo" - the movement animations and engine and pretty much finished at this point, so I can move on to cooler stuff: there are 20 rooms now, all nicely decorated and with a gradual difficulty slope (new moves are introduced slowly) - the lack of direction is voluntary: I'm trying to make the controls intuitive!

*Supersoldat

to download the game, head over to its new homepage - from there you get get files from ModDB or TheGameHippo.



image2
image3
image4

This is basically an alpha test - no sound or music yet, these will come in time, so don't bother commenting on their absence. I need feedback on:

- Ground movement (friction, acceleration)
- Jumping (height, gravity)
- Spark/Wood Chip/Blood effects (original sparks were part of the sprite, not particles)
- Wall running (climb and slide speed)
- Roof climbing (speed, control scheme)
- Tiles, and embellishments (pillars, spikes, windows, etc)
- Surface mechanics
- Magnetise powerup (buff art, should it be permanent, last longer, etc)
- Animations added so far
- Bugs, crashes, etc
- Teddy


William