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.
