Jorichi's Character Animation Method:
I will start this explanation by assuming that you already have a design for your character. I will be using my character Becky as an example.
Usually a character sprite is designed in an idle pose, just standing. In order to start making proper animations like running
or jumping you'd need to either visualize the animation frame by frame or use a reference found on the internet (search
"running animation" on google images for example). Things like this really help:
The amount of frames shouldn't matter unless you limit yourself. I usually find the amount of frames through the references images
I found on a google search, I fill in the spots where I feel the need to add a frame.
Anyways, I break down the idle sprite I made into a "wireframe" (basically just an outline with some important lines here and there).
I make this wireframe out of strong and clashing colors so I keep an eye on every part as I animate it.
From Becky to the wireframe will end up looking like this:
Using this wireframe I start making those running frames one by one according to the reference poses. I use paint.net
with a plugin called AnimationHelper
AnimationHelper allows me to quickly check the sprites in animation with the greatest of ease. I just select the first frame, set the amount of frames and the FPS
and I get immediate results. Check the animation every time you change something, to see if it still looks nice compared to the last one.
Keep an eye out on weird proportion changes or things like that, it will be harder to spot later on.
Touch it up where necessary until you are satisfied with the results and move on to the next frame.
Be sure to double check everything on different speeds, you'll find it easier to spot little flaws on a lower FPS.
Once you're satisfied with the results you'll end up having something like this:
Looks familiar, doesn't it?
In the AnimationHelper plugin's preview on 15FPS it will look like this:
Now that I'm satisfied with the wireframe, I'll start coloring it in as a naked sprite. I do this in order to get the shading right, making it easier for later when I add animation in clothing and such. But before I start clothing I add the eyes and mouth to add more animation to the whole thing:
Make sure to copy and past the wireframe and not color in the only thing you have right now, that way you have something to roll back to.
Also note that I changed the ears up a little, they move with the head just like the eyes and the mouth to give the sensation that her head is moving left to right a bit.
I also kept checking the animated preview to see if anything screwed up. With animations you better check every change you make.
At this point I add everything that doesn't need alternate animations. For Becky that is her boots, shorts and shirt (her vest is animated so I left that out for now):
I changed the shading of the clothes a bit, but not much.
Also here I keep checking the animation if the boots, shorts or shirt didn't make any odd shifts or something.
Now comes the trickiest bit for Becky; her hair. Some characters will have a cape, scarf or hair flapping in the wind, so Becky's hair is a good example for such things.
I break down these animations into several steps. First I do the hair on the top of her head, the bit that doesn't do much moving around.
For such small movement in the lock of her hair I simply used a trial and error method. Flat coloring of these kind of things makes it easy to track their overall movement. I basically did the same for the bottom half of her hair and then shaded it. I tried to follow a wave pattern with the flat colored hair that follows the bouncing up and down of her animation.
The jacket I added in the second row is done by using a second layer. I drew it on that layer, pasted it down whenever I wanted to preview it and used the
undo function whenever I wasn't satisfied with the results (the AnimationHelper doesn't preview mulitple layers for you, so that's why).
The Third row is the final result after fixing all the flaws you guys pointed out in the art thread, thank you guys for that.Feedback is gold.
So a little recap (if helpful at all):
1. Create wireframe.
2. Create animation using wireframe to get basic frames down with help of references, edit where necessary.
3. Color it in. Add small details to face if necessary. Lay down a basic shading.
4. Add colors and details that don't require any or much animation.
5. Add other bigger animations to clothing or hair using simple step by step techniques like using layers or flat colored objects.
So that wraps up my method of animations in characters. I hope you guys enjoyed it and I also hope it will come to use to some of you.