Rough Guide to Sprite Animation

Animation Basics for Sprites!

In this tutorial I intend to cover the basics of animation for battle sprites specifically. You may want to check out my previous tutorial on spriting. All these sprites were created in Photoshop.

-Animation ABCs
-Animation in makers
-Basic Moves
-Tips and tricks


ANIMATION ABCs

Animation is the illustrated illusion of movement caused by a sequence of images appearing in quick succession. Each individual illustration is called a frame.

There are two basic animation processes. One process you might be familiar with is called Frame-by-Frame animation. The motion is planned and broken down into a set number of frames. It starts with the first frame as the first extreme pose of a motion. (Key1) And ends with the ending extreme pose (key 2).The motion is then broken down into what happens inbetween those two extremes. Take for example my pendulum swing.

The other process, is call free flow animation. This is not done in the industry because it's easier for a team to work frame-by-frame. (A Key Animator draws the Key Frames.) Free flow is how you would probably animate a flipbook. Your first drawing is the first pose. Then you move it a little bit in the next drawing. And you continue to make little changes to the previous drawings until you have reached a final pose.

Either method will work for sprite animation, so do whatever you are more comfortable with. It's good to try both. I find for Sprite animations, it's more efficient to use the Free Flow process, because I mostly just copy and paste my previous pose to change it.

ANIMATION FOR RPG MAKERS

For map sprites, you are limited since they have to fit into a specific format. You get only three frames for a walk cycle...four if you have XP or VX. This means movement will be limited and choppy.

In RM2k3 you have three frames of animation for a battler. The animation sequence goes 1-2-3-2-1.
Here is an example of a 2k3 animated battler. (Made by me)

I only have enough frames to make two Key frames and ONE Inbetween Frame.
The left and right frames are the two extreme points in a running animation. The middle frame is the mid-point between the extremes.
Here's what the run animation looks like. It's very choppy but it still communicates the idea of a character running.


In XP and VX, battlers do NOT have animations except for special effects and cheap magic tricks. However, there are some Custom Battle Systems that require animated battlers. The next sample is based off the Minkoff template.


This one allows four frames of animation. It's still not a lot but it will make it slightly smoother than my 2k3 version. Let's look at the running animation.


This animation is much, MUCH smoother. One frame of animation makes a world of difference. Look at the two side-by-side


However, animating a run with 4 frames is trickier than with 3. I've animated many walk and run cycles by hand (and have a stash of Animation books on hand to reference) so knowing what poses of animation will work is easier. I will now show some basic moves.
(Some references of Animation cycles are included at the end of this tutorial).

BASIC MOVES

You have seen my two samples of run cycles. I inted to show a battle stance and a punching motion. My character Lucius will serve as our example.

I will first show you how I made this stance animation for 2k3.


First create/find a “default” body that I will use as a base.

This will also be the first frame of my animation for the stance. For Lucius' stance, I did not just want him to bob up and down. It's not his style. Lu is a cocky s.o.b. So I wanted to make that apparent in his stance. Shifting his weight back would be more his thing.

I start with the legs. The first frame has his weight mostly over his right foot. So the third frame needs it over the left foot. I could just flip the legs but that's cheating and you can't cheat in animation if you want it to look good. I select and shift pixels until the left foot is straighter and the right foot is angled. Also his whole top have need to shift one pixel to the right. Do NOT move the feet. (I accidently did in this example. :P)

Once I have the basic motion down, I can edit the frames to add the clothes, a little movement to his fist.

Now onto the Punch.

Normally, Lucius is left handed, but his right hook turned out better in this case. Here's a look at the frames.


There are three major body moves in a punch. Obviously there is arm movement, but more subtly there is movement in the leg and a rotation in the torso. Yikes. That's a lot of things to pay attention to! But don't worry. We can break the movement down. I start with my “standard” naked pose.


If you look at the default battler sprites in 2k3 you will notice that the punch animations face forward like this in the 3rd frame. So my standard will be the base for the final frame...the extreme extent of the punch. I started with the arms and fist because they basically have to be pixeled from scratch. So I erase the arms on my naked sprite and redraw my extreme punch hand. One arm fully extended and one pulled back.

Then I make the second frame. I move the arms a bit. Then I got to the first frame to creat the starting point for the arms.

For the punch motion there's also a shift in weight (which I demonstrated before and a turn of the torso. Moving the facial features and shifting pixels on the torso make this effect.

TIPS AND TRICKS

Trick: For Minkoff battlers you get one extra frame of animation. Sometimes it's still not enough to make a smooth transition. There's a trick to make it seems smooth. That's blurring.
Here are the frames for this animation. The third fram is “blurred”. This let's me skip some inbetweens and make it look like a fast slash. It would probably look smoother if I had two blurred frames instead of one.

Tip 1: Work off a base pose. Unlike hand drawn animation, you don't have to redraw everything. Alter a single pose by selecting parts and moving them or redrawing them. If you look at the above four frames the first two are very similar. That's because I just copied the first frame over and shifted her arm a bit for the next pose.

Tip 2: For complicated movement work in sections. Start with the most important motion. For example, the thrust of an fist in a punch is the important motion. The shift of weight on the legs is next. Having one foot slide a little makes it more powerful, but the foot with all the weight on it should be anchored.
If your character has extra parts like long hair or a cape or a tail, add some shifting in the clothes and little details.

Tip 3: Look at examples! You can base your animations on a lot of base work and save yourself a lot of trouble figuring out how to animate something. Or even better, find templates to work off of. The animation work is done for you mostly.


Tip 4: If you have photoshop, gimp or other layer based art program, work in layers.
If working in MSpaint it's better to create the whole sprite first instead of using a naked base.

Tip 5: Look at samples/tutorials of traditional animation. There are several principles that can prove useful such as “squash and stretch” or “exaggeration” or “blurring”.
http://www.idleworm.com/how/anm/02w/walk1.shtml
http://www.darlingdimples.com/?page_id=79
http://gas13.ru/v3/tutorials/sywtbapa_brea...nto_sprites.php
http://gas13.ru/v3/tutorials/sywtbapa_anim...asic_attack.php
http://www.create-games.com/article.asp?id=1874

Tip 6: This will take you many hours to do. For the XP full sheet it took me several hours over the course of three days.