How to Animate Sprites

[Aikin]

Now, we've all seen ugly sprites, and even uglier animations. I thought I could at least help out with the animation part. Now animating sprites is typically used for web site desine, Forum banners/avatars, sprite comics, and some sites are collections of animated sprites. Not only that, but I think if one enjoys to edit/create sprites, one should know how to animate one's own creations.

Alright, let us assume you already have a GIF animator. Not sure where to get one? Check out this this thread: http://www.sprites-inc.co.uk/forum/showthread.php?t=759

First thing first, pick out a sprite you wish to animate. Hey how about Kitarou from your favorite game Gegege no Kitarou? Sure! Here is the sheet, and you can fallow along:
http://tsgk.captainn.net/?p=showgame&t=sy&sy=4&ga=423

First, let us try a simple standing sprite doing something, like Kit using his trusty whip. Now, the first thing to do when animating is to set your frame delay to 0.1. This is a good speed for many sprites you will be dealing with. Any thing faster should be reserved for more complex sprites. (Think Zero Slashing from MMX4)

Now, this is a common problem I see: http://img.photobucket.com/albums/v2...hS/Kitbad1.gif

You can tell he's wiggling around and such, right? I purposely did this to show what I commonly see; people trying to eye ball the sprite. Never try doing that. First, make sure you want to have a 'steady ground', a line where the bottom of the sprites will always touch so they line up on a vertical plane. Like here http://img.photobucket.com/albums/v2...hS/kitshop.png. Next, line the sprites up horizantally, I like using the head or feet as a guide.

In this case, the sprite actually takes a step forward. Now look at the sprites; which part of the body does not move much? Why his front leg of course! Use this as a guide. Always try to line up the sprites from each frame to 'front foot' of the sprites in the case. Doing so will make the sprite look more natural.

Now delay is another part I wish to touch on. Kit here leaves the whip out for three frames, and each one he is a slightly different place. To shave down the size an compexity of the GIF, just make the delay for the sprite with the whip out to 0.3. Also, in this case, I like to add a delay in the beginning. Simply set the first sprite to a delay of 1. Now, your sprite should look like this: http://img.photobucket.com/albums/v2.../Kitbgood1.gif

See? Now Kit is a happy sprite because he was animated nicely. He's not having an epileptic siezure or any thing like that.
The last part is clean up and saving. Try and make the GIF as small as possible, but still include the sprite. Bring the canvas right up to his most vertical and horizantal pixels. This will save some space and makes him look trim. Next, save the GIF in a transparancy. Having a large white boarder is a big no-no, as it just makes the animation look sloppy. Well, thats it for today, I'll show you how to do moving sprites next.

[Aikin]

Ok, on to moving sprites! Now, to be honest this is going to be short, yet important nonetheless.
Alright, now We'll start with running/skipping/walking/floating what ever your character does for locomotion. If there are no running sprites...well... have fun editing! Again, we'll turn to the super-special-awesome, fan girl loved, nearly pantless wonder; Kit! http://tsgk.captainn.net/?p=showgame&t=sy&sy=4&ga=423

Ok, We'll first take a crack at his running sprites which, if running in place, Kit should look like this when strung together:

Oh, he's so cool, I bet he can beat Sonic in a race. Now animating a moving sprite is much like animating a stand sprite, just that you move the sprite forward each frame. The farther you move the sprite, the faster it seems like its going. Also, you should watch your speed; Kit here shouldn't look like this:
http://img.photobucket.com/albums/v2...phS/Kitrun.gif

Instead of using your eye, use his feet as a guide to determine how far each sprite should be. Now, you don't have to be perfect, a few pixels off and it will still look ok. Once against, setting the Frame delay to 0.1 is a good start. Anything faster should be left for more complex sprites.(Think Megaman running in MM IIX)
Now here is a picture how far each sprite should be in this case: http://img.photobucket.com/albums/v2...ephS/Kitgo.png

See? One does not have to go that far to get a good speed. Now, I did two animation cycles and you should try and do the same. Ol' Kit starts to look something like this: http://img.photobucket.com/albums/v2...Kitrungood.gif

If it looks as smooth as mine, then you are in good shape! If not, no biggy; animating is all about trial and error.
Now Jumping/Dashing/Digging/Flying/What have you is quite similar. Find a good pace (typically faster than running) and instead of going horizontal, you go vertical more or less. Now what you don't do is move one pixel at a time, other wise the sprite is going to move S-l-o-o-o-o-o-w-w m-o-o-o-o-t-i-o-n-n-n. (I've seen that a bit to often, so I thought I would mention it.)
Next I'll talk about how to make a fighting/dance off/animated comic/ what have you! Pretty much how to get backgrounds, interaction between sprites, and a few more do's and don'ts. Happy animating!

[Mikado]

Thread like this already exist.

[Aikin]

Yeah, but I don't like his animations.

[rickysio]

Its a she. Quickie's a she.
And yes. Quickman's more about introducing Animation programs.
Aikin's more about HOW to animate decently, and accurately.

[Nightmaresplody]

Huh... Never knew that about Quick...

[Dead Panda]

You didn't? Just because her forum name is QuickMan
doesn't mean she's a guy...

[Aikin]

Ok, now for the last one; interaction. This one will be big, so pay attention! Now before I continue, you should be comfortable in animating. You should already have a good number of animated sprites/drawing you've done under your belt.
I also suggest you have a healthy background in editing and even customizing sprites to make the animation look clean and flow well. By customizing, I mean by making limbs, turning heads, and so on. Not just by giving sprites a new paint job, different hair, and a set of different clothes. After all, you may find your self wanting to have your sprites performing an action not included in its sheet. If you are not good at customizing on that level...well experiment! (that’s how I did it) It’s all in good fun after all.

Now before we get down to business, let me give you a few sprite resources you may or may not have:

http://www.newwavemugen.com/~xenozip/

http://pages.prodigy.net/kws_games/Disgaea2/

http://tsgk.captainn.net/

http://vgmaps.com/

VGmaps is perhaps the most important, as it includes one of the largest selections of ripped maps I found so far, and you’re going to need them for backgrounds.
Now, before we start I should lay a few things down. For one, I prefer to work with 8 and 16 bit era sprites for projects like this, most have a low number of sprites for animation and are easy to manipulate. Although some 16 bit era sprites can have extensive animations, and may appear slow on some GIF animation programs. You can help this by cutting out a few sprites here and there, but be careful about which ones you toss and keep. If you want to go with more frames, I suggest a beefier animation program or just use flash. (although if you do choose that route, I do have some pointers about directing.) Oh and don’t mix and match sprite bits… it just turns out ugly in the end.

Now don’t think that you can ONLY use megaman sprites, or only 8 bit era, or that the sprites have to fight! You can have more than two, have them dance off, play soccer, what ever! I’m just using my fighting GIFs as an example.
Ok, the first step is finding the sprites and having a rough idea of what is going to happen. For example, in my Cut V Metal GIF it was a request, but I typically say “Ok, those robots are cool, lets watch’em fight.” I like to pick sprites with similar styles, other wise it’s going to look a bit out of place. After you pick the contestants, get a background up.(after all white space can be boring.) in the case of Cut V Metal, I choose Iceman’s stage because the mostly red (warm colored) sprites stood out against the blue (cool colored) background. I suggest you do the same, because the last thing you need are sprites that are tough to differentiate from the background. At this point I suggest you start editing the sprites. Give them actions you think you’ll use during the fight. Punching, kicking, flips, falls, damaging, all of this needs to be thought out. If you’re good, you can turn a meager 12 sprite sheet into a 40 sprite behemoth. All it takes is time, and I’m pretty sure you have that to spare if you’re taking up one of these. Next I would clean up the background if need be.

Ok, next I would set the background up. Place the background in your animator as the first frame and use a “set background” function, as I’m sure most animators have this function. This way, you do not need to keep copying and pasting the background. Although if you want to use scrolling, you want to copy and paste the background as it will allow you to scroll by simply moving the background around which ever way you wish. Also, when you place sprites up, cut away the white in the animation program. (it should have something called “Cut out” or something.) This will remove the sprite’s ugly white block. Ok, now you’re pretty much done with all the technical stuff. Now you have to use a pinch of creativity and style to move things alone.

Directing a GIF can be easy or hard. This all depends on you.
Now first thing is first; don’t make a GIF where one character just beats the living crap out of another… for the most part this is boring. (Unless you have a cat that takes down Godzilla or something funny like that.) Also, DBZ fighting (huge energy bombs, blur fighting, every one has super speed, going into a super saiyin mode…) is also boring, redundant, and requires little effort on your part. Big Blasts may be cool for a finisher or something that leaves one sprite open, but beyond that I would steer clear of it. You want to make audience keep guessing who really has the upper hand, that way when one sprite gets blown up, it’s pretty cool. Also, try not to plan that one character will triumph over the other, just go with the flow and see what happens. One last thing; keep it active! Stalling, speeches, long transformations suck!
Ok, now if you’re making a fighting GIF, contact is a big part. For me, I like to invert the damaged sprite and move it up and/or back a bit. It shows the impact of the attack and looks good. I also like to have more than one damage sprite; that way things don’t always look the same. You don’t have to do the same thing I do. There are many other ways to show damage, you just have to be creative. Now here is a good example of damage, right here I have Cut hooking Metal shown in a few frames;
http://img.photobucket.com/albums/v224/JosephS/ouch.png
See how Metal was pushed back a few spaces? It shows that Cut’s punch has, well punch! The weaker the attack, the less you want the knock back to be. The stronger the attack, the more it pushes back the target. (after all, there are no life bars here! ) Also, look at the delay; see how Cut leaves his hook out at the end for just a bit? That helps the animation look smooth and natural. Other wise the attack will look choppy. After all, you don’t want your animation to look like a blitz of random sprites. You also want to keep the attacking sprite’s arms, legs or what ever in front of the damaging sprite’s; that way the attack looks like it hits.
Sliding is another important part of fighting. A powerful attack should knock another on the floor, and it really helps when the body slides and slowly comes to a stop. Just make the difference between each frame for the sliding sprite less and less until you come to a stopping point. Jumping also has similar physics. At the very top on the jump, the character should slow down a wee bit before coming back down. It looks natural and the extra bit of detail goes along way.
Ok, now a typically animation like this goes on for about 170+ frames. I like to put some delay at the beginning or end to help show that its over. If you do have a 170+ animation, DO NOT use it for a sig! It is really big and distracting. Although if you want a fight in your sig, I suggest something smaller and that constantly loops. A few tricks for a smaller animation is to start the animation in the middle of the fight; make no clear distinction between beginning and end. That way, when you feel that is long enough, you can have the characters start to move were they started from. Although try and make it look natural, like in this GIF: http://img.photobucket.com/albums/v2...S/Banner11.gif

Well, that’s it. If you have any questions, just ask, I'll love to add to what I already put down. Now get spriting!

[Rainbow Dash]

Stickied to avoid it dieing, as it looks quite useful.

[Worenx]

And I thank you for that, Seahorse. I'm using Movie Gear and the 'Help' menu isn't helping me at all. I want to make the background transparent without making the animation look... well... BAD...

Like that... >.> Anyone familiar with Movie Gear?

Edit: Never mind; I figured it out.

See?

[Infinitiver.EXE]

Hmm, to bad I didn't look at this before, it would've been easier to make the animation in my sig...

[shoop man]

I use pivot 3.0 beta

[Jaden]

You can either use many decorated pieces of material (either hologram or sticker panel) and hook it up with either sequencers, selectors, or timers. Hook it up in the proper order to have a smooth affect. You can make it more complex and have different buttons on a controllinator activate different sequenced animations.