This video demonstrates how I create an animated sprite
with manual anti-aliasing.
I use this to show subtle details in the shape and movements.
I start off by creating the sprite at double resolution.
The reason why is because I want to figure out the sprite's shapes and movements in detail.
This might seem like a waste of effort
but I do have a way to to preserve most of that detail when I render this sprite at half size.
"Rendering" is when I outline and fill the sprite with colors
But first, I need to figure out the shape of this sprite.
I start off by drawing each limb in different colors, as silhouettes.
This particular sprite is going to be an animation of somebody crawling on all-fours.
So to give me a rough idea of the proportions and how large everything should be for this sprite,
I've pulled up some examples of this sprite in other similar poses, to use as reference material.
This also means I already know what color palette I'm going to use.
But in general, I recommend a palette with 4 or 5 skin tones.
This example's using 5. Ignore that white color, we're not going to use it.
Since I'm going to be re-using the head, I don't need to re-draw it.
For this sprite I only really need to know how big it is.
I can represent it with a dark circle.
It might help to start by outlining part of a similar pose.
But if not, you can just wing it and glance at the preview window to see if the body looks the same size.
To figure out the position of the limbs...
I like to place large dots at the start and end points, such as the shoulders and the hands.
These dots should be about the same as the thickness of the arms and legs, but they can be smaller.
Then I animate where the hands are going to be in each frame of animation.
Then I figure out where the joints are going to be.
In this example I didn't realize this until later, so I ended up making things more difficult for myself
by trying to figure out the position of the hand AND the elbow at the same time.
... You learn as you go.
You may think these shoulders look very wide for a female character,
but remember that sprites have very large heads.
When I overlap the reference pose I can see that the proportions actually match.
Like the shoulders, the hips are also going to move,
so I figure out where the legs start in each frame by placing a dot at the hips.
Later on I'm going to redraw the body's hips to move with these dots.
Since the feet are mostly hidden in this particular pose, I'm focusing on where I want to the knee to be in each frame.
Generally speaking, limbs don't noramlly change length, unless forshortening is happening.
If you want the movement to look convincing,
you need to think a little bit about how the human body can and cannot move.
Here I'm making the leg swing outward away from the body while the leg is brought forward.
The reason why is because walking on all-fours is actually very akward for a human being,
so the only direction the knees can go is outward, because there's just no room underneath.
For the rest of the leg's animation I have it recede directly backwards, away from the camera, in 3 dimensions.
So it's going to appear to get slightly shorter because of forshortening.
After placing the dots, you can connect them together with thick lines to create the shapes of the arms and legs.
Legs have a noticeable curve so I use a pair of lines on each side to approximate the shape.
After getting the animation figured out, you'll want to carefully adjust these shapes to be exactly how you want them to look.
These small details will carry over when you outline the sprite with anti-aliasing.
After you have positioned all the limbs you'll want to animate the body to move with them.
The body almost never holds perfectly still, and it's going to look pretty strange if it does.
You'll also want to figure out the shape of the hands and feet.
These details CAN be visible in the final animation, so it's worth figuring them out.
Now for the part I call "rendering"
This is where I draw the outline, fill the sprite, and add the small details
like shadows, anatomical curves, and limb overlapping.
Remember that this sprite is going to end up at half this size,
so I start by using a 2x2 pixel grid with snapping, and I set the brush size to 2 pixels.
This makes it so that every time I click, I place a large pixel.
And it'll always be inside of a grid tile.
When I'm done, the sprite on the left will look like the sprite on the right.
I start with the outlining.
There's a few simple rules I follow in order to create anti-aliasing.
If the shape fills 0 pixels, I use the darkest color.
If the shape fills 1 pixel, I also use the darkest color.
If the shape fills 2 pixels, halfway, then I go a little lighter and use the 2nd darkest color.
If the shape fills 3 pixels, I go even lighter and use the 3rd darkest color.
And if the shape completely fills a grid tile, it's going to use the lightest skin tone.
I'm not going to bother with the last rule yet because I'm still drawing the outlines.
I also have another rule for outlines.
The outline that touches the background should only use the 2 darkest colors,
so when the rules say I should use a lighter color,
I'm also going to add a dark pixel, next to it... on the outside.
The lighter pixel will end up being part of the fill inside of the body.
When limbs overlap, pretend the parts in the background don't even exist.
Just outline the knees as if the feet aren't even there. You can even hide them if that helps.
After you have finished outlining all the forground parts of the body,
then you outline the background limbs, using the same outlining rules.
After outining, fill the body with the lightest skin color.
When you fill the background limbs, use a slightly darker skin tone.
Now we're going to add details.
Use the 2nd lightest skin tone to soften any jagged edges inside the outline and add anatomical details if you want.
You can even add shadows to parts of the body that are tilting downward.
With normal outlining, the hand details tend to get almost completely lost.
You CAN show some of those details if you redraw the hands, but you're going to be improvising,
so keep an eye on the preview window to make sure the shape of the arm and the hand still look right.
This is tricky to pull off. There will be a lot of trial and error.
If it's too hard, you CAN skip it.
The overall result will still look pretty good if you do.
Don't be afraid to make adjustments to the shape of the body or limbs if they look wrong in the preview window.
If it's a big problem you might want to go back and edit the silhouettes and then re-outline those parts.
When you go to the next animation frame, don't copy the previous frame.
Just render what you see. Exactly like before. Outlines... Fill... Details.
The animation will look good in the end, because the outlines are following consistent rules.
So the details of the shape will reliably show through from one frame to the next.
Trust me, this works.
It works REALLY well!
See for yourself.