Spriting Tutorial by Radnen
From Spheriki
So you made a sprite, and don't know how to animate it? You're finding the motion to be a pain, and would like to know how to do it easily and make it look good? This tutorial should start you off with the basics on animating and spriting a decent sprite. In this tutorial, I'm going to sprite a large 48x64 sprite. But the techniques here can be applied to a sprite of almost any size.
I'm going to first teach the 4-frame walk animation.
Then I'm going to teach the 2 frame animation with a much smaller sprite.
Contents |
4 frame sprite
I'm, going to use my sprite from Tyberia as a guide for this tutorial.
Making a face frame
The first thing I did was draw the basic south facing frame. When drawing a sprite, first lay out the areas where the head, body, legs, and feet go. This is the "shave down" method to drawing a sprite. First you make boxes where the basic body parts go. Then you shave away the boxes until it becomes a more organic person-like shape. Keep shaving until you get it down to hands, feet, shirt, pants, head, and hair.
Also, when building a sprite, don't draw stick figures. Don't have tall people with tiny heads and big hands, keep the drawing proportionate. Generally, you should make them with some thickness, because it'll give you room to detail things out. I would perhaps say to make their height 2.5 times longer than their width. It might even help to draw a rectangle before starting step 1 to make sure you fill it out nicely.
Coloring him in
Then I go to color him in. When doing the outlines, choose a dark color that's close in hue to the inner colors. And when choosing inner colors have at least 3, a midtone, highlight and shade. When doing the shade and highlight select hues, close in proximity to the base color, DO NOT just go up and down on the value scale.
1.) When coloring colors near a midtone, choose Colors close in Hue, not the same hue. Here would be a basic 3 color palette:
<- the middle box is the midtone.
2.) When outlining, use a very dark color close in hue with the three colors above. Do not use black, unless there is a reason for it. And make sure when you are outlining, you don't have any "jaggy" edges.
Then I made a new frame, and copied the last frame. This is where the real animation begins.
South based animation
As you can see here, the right leg has been lifted up while the left leg is kept straight down. The left arm is also tilted inward and the right arm is pushed back behind the sprite.
Here, I continue the animation. The right leg is now only partially raised, and the left leg is slightly pulled back. The arms as you can see here are the same on the left and right sides, there's no motion here. After this frame you are done. To make the two other frames you flip these two horizontally. And that's it. There's no extra work needed.
For the north based directions you would just copy this direction and clear his eyes and change his hair. North and south directions are fairly close in animation. All that changes is usually the head/hair. 4 frame animation made by drawing 2 frames. Seems easy huh?
