ID:1528140
 
If you're not a very experienced animator, this will likely help. If you are, then you probably know all of this and this tutorial isn't really going to do you any good. Just a forewarning before any assumptions are made. I did say "basic" for a reason.

One thing I've noticed in a lot of games (I mean, a LOT of games on this website) is that the general sprite animation is very... amateur, if I'm allowed to use that word.

The animations look something worse than this most of the time!

If they're even animated at all!

Let's get started.

First things first, we're going to need a base sprite to animate.

This is Punchman; he's going to be our example. He's not very well drawn, but then again, it's only a demonstration.

The pose I'm going for in this sprite is a fighting pose; we'll be animating a quick jab. Only something about 4 frames.

Now that we have our base sprite, what you need to do is draw him again at the apex of the punch; the final pose where he's actually executing the attack.

An important tip to know is that you shouldn't be afraid to completely redraw your sprite. A lot of people try to take the easy way out and attempt to cut and paste the arms into different spots or to just redraw the least little bit they can. Cheating like this can be fine sometimes with simple animations, but as you noticed in the first image of the poorly animated punch, this is the result you'll get when you try using that method on a more complex action.

I'm not suggesting you need to be a physics major, but understanding to a basic degree how an object moves while it's performing an action is fairly essential.

You'll notice in the first image that he's in a fairly condensed stance, almost like a spring, ready to explode with his fists at a moments notice. As you look at the apex pose, he's fully extended, the spring no longer cocked and is now fully released. You can see the line of action is leaning forward with the fist, suggesting that he's put some of his mass behind that punch, moving slightly it with it.

That's pretty much it for the hard stuff, the next part is the easy/tedious section, depending on how many frames you have in your animation.

The frames that connect one pose to another are called in-between frames or just in-betweens. This is likely going to be the bulk of any animating you ever do. Unfortunately, it's a necessary step into creating a well animated sprite.

When animating in-betweens, BYOND's in-house icon editor is just not going to cut the mustard. What you need is some software that supports layer transparency or onion skinning. Onion Skinning allows you to set layers up in such a way so that you can see the frames before and after the one you're working on, giving you a much better idea of how to position the sprite in order to smoothly transition into the next frame.


Now, let's see how our three sprites look together.

Looking great! Now let's pattern them like this and see how they look together.

Alright, so we've drawn the sprites for it, the sprite's been animated, it looks good... right?

As you may have noticed, the sprite just doesn't feel like he's carrying a heavy jab. One thing you might say to yourself is, "The animation's just too slow!" which seems like a logical assumption, but that's not the issue. Speeding up something that hasn't been properly animated won't help it at all.

This is the point where it's important to understand when to use in-betweens and how many in-betweens to use. When you think of a punch, you really want it to hit hard and fast. You want the punch itself to be faster. No other part of the action has to be as explosive as it, so instead of making the whole animation faster, let's just speed it up by removing the first in-between.

Bingo! You can tell a huge difference in how the action is carried now. The punches seem to roll out smoothly and Punchman looks like he can finally kick some ass.

I hope this was helpful for at least a few, thank you.
I enjoyed the read. I'm no artist by any means, however I'd like to be capable of such things one day. Thanks for the information, I'm sure this will be plenty of use to me. :)
Hmmm, do topic creators have some kind of metric that shows them how many people are following the topic/ have newly followed? Just thinking that'd it'd be good to let people know there is interest, even if the viewer hasn't yet read enough to comment anything substantial/ just doesn't want to comment only to show support/ add a '++', or some other variation.
Kudos, this is useful. Do more if you can. Maybe on where I go for basic physics animation lessons like this?
When you get into the physics of animation, it's really an entirely different skill set. There are things you have to take into account such as the object's rigidity, flow and weight.

There are volumes of books written on using physics in animation and is really too much information to cover. Honestly, my suggestion would be to watch other animator's work and experiment on your own.

If you want to get really good at animating sprites, start with an easier model such as Adobe Flash or simple frame-by-frame programs. Drawing a simple ball bouncing animation can really give you some insight on how objects behave and what looks most natural.

Once you have some experience in the traditional animation field, you can easily apply the exact same concepts to any medium, be it traditional, 3D and even pixel art. This is what's happened to me. I go from typical 2D frame-by-frame and just use pixel art instead. Same methodology and the same result. The only change is the image I'm animating.
Interesting
Everyone should be using graphics gale for animation in pixel art. Onion skin is magical.
Nice tutorial. I'd like to add that having the fully-extended frame as the first frame is only good when you expect the action to happen immediately. For example, when firing a gun you expect it to go off as soon as you press the button, and the muzzle flash is at full intensity immediately.

On the other hand, actions that have a delay (like a wind-up punch) should reflect that in the animation. Maybe that's all just common sense but I have totally seen games where you shoot a fireball and the thing's already halfway across the screen before the character sticks her hands out...


This tutorial has been a big help to my animation. Thanks!
In response to Magicsofa
Magicsofa wrote:
Nice tutorial. I'd like to add that having the fully-extended frame as the first frame is only good when you expect the action to happen immediately. For example, when firing a gun you expect it to go off as soon as you press the button, and the muzzle flash is at full intensity immediately.

Absolutely. My example with the punch called for an intense first frame, but you're correct. Most animations are going to have a smooth progression from one base frame to the other.