Basic Animation Tutorial

by Jetrel

Introduction

Animation works by fooling the mind into thinking that a series of still images are one continuously moving object. Certain things have to happen for the illusion to work. The basic principles are as follows, though keep in mind that these are interrelated:

• A moving object can only travel below a certain ratio of "screen space traveled" to "number of frames". If an object travels too far in too few frames, it will not look like it is moving, rather, it will look like it is disappearing from one location, and suddenly appearing in another.
• If the frames iterate too slowly - e.g., less that 5 frames per second, the illusion of motion fails, and the whole thing looks more like a slideshow than an animation. Many 3d videogamers demand a framerate of 30 fps from their hardware, or else they find the game to be too "jerky" and frustrating to play - some, even, demand 60 fps. As a principle, though, animation tends to fall apart somewhere between 5-10 fps.

Wesnoth is able to get away with a lot because we can programmatically create motion, some of the time. When a unit attacks, the code slides the attack image around. This allows us to use single images where we would be better served by multiple images. We can only get away with this in certain situations, however, and part of this is because the code-driven movement is both done at the maximum framerate of the running copy of wesnoth (often in the ballpark of a 3d game; some 30-60 fps), and the code-driven movement is out-of-sync with the hand-drawn animation, seemingly giving us additional frames of animation (even if we don't have a new hand-drawn frame to display, the game will slide the current one around for the fraction of a second until we get to the next frame). A similar principle is used in a lot of cheap animated television shows, where a still-frame of a character will be panned across an animated background to create the illusion of motion. Bad shows will use this to fill multiple seconds of animation. More enlightened shows will actually spend the effort to bring an animation up to a good 15-30 fps rate, and then will use the above trick to make an animation even smoother by providing additional "fake" inbetween frames.

Common mistakes

All of these mistakes are absolutely unacceptable in an official in-game image. Some are very easy to correct, such as alignment, others, such as redrawing hidden surfaces, can make an animation much harder to do, but this is the price you must pay to make something look right. They're the laws of the real world, and fortunately, no one can use "style" as a cop-out for not following them - if you ignore these, your animation will look terrible, and we won't accept it into the game.

As a general principle, whenever you are tempted to use a shortcut to finish something, don't. It will look bad, and in the long run, it won't save any time, because if we end up using the animation, someone will have to pay the time to correct it. We will not use broken, half-hearted attempts at animations.

Moving only the active element

An animator thinks, "Hey, I'm animating a man swinging a sword. That means all I have to do is move the sword arm up and down." The animator then wonders why on earth his animation looks so poorly done.

Even the most subtle human motions will result in adjustments of the entire body, both for balance, and simply because the moving parts are pulling on the rest of the body. Every part of the human body is connected to the rest of the body, and a motion in any part of the body will affect the entire body (just like a soccer ball caught in a net deforms the entire net). When you animate, you need to imitate this; each part of the body moves proportionally to its weight; moving fingers around won't cause a torso to shift, but swinging an entire arm, and a weapon in it, will pull on the entire body, and this needs to be drawn if an animation is to look natural.

Balance needs to be taken into account when animating. If you know what you're doing, you can deliberately make a unit look like they're off balance in the specific frames when they should be. For example, a fencer might look like he's falling forwards during the "lunge" of his attack, and falling backwards during the recovery. This will look right because it's exactly what a real person does; a real fencer would use "being off balance" to accelerate their movements.

It's difficult to visualize how something is supposed to move. In order to get a feel for how the body reacts to doing certain movements, you may need to watch yourself in the mirror, or look at a movie. There are many examples of good, medieval action films which portray common actions in Wesnoth (like swinging swords) - titles such as Braveheart, or Lord of the Rings come to mind. Watch one of those movies, find a point where a character swings a sword, and watch what happens to the rest of the body. It's not subtle at all; you'll see in any motion that the entire body goes into doing any decent-looking movement with a sword.

This first image is how bad things look if you just move the arm around, the second image is how good it looks if you make the entire body shift in reaction to the arm swinging a weapon:

• Wrong:

• Right:

Hidden surfaces must be redrawn

When an object turns, in an animation, and shows a side that wasn't visible before, it must be drawn from scratch. If a man has his back to you, and turns around, his now-visible face will look a whole heck of a lot different from the back of his head, which was visible before. It's obvious that things look different when they're turned around, but this is a really common mistake, because people are afraid of having to draw parts from scratch. It's really hard, and people like to think that there's some shortcut they can use to get away with not actually having to draw something from scratch. (For a lot of beginners, including myself back in the day, the idea of having to redraw things from scratch seemed impossible.) However, this is something you'll have to get used to and overcome. The bright side of this, though, is that redrawing the few newly visible parts is a great source of practice, and is much easier than drawing a whole sprite from scratch; it's a good way to build up to being able to create entirely new sprites from scratch.

A common shortcut, which is selecting body parts in your graphics program, and sliding/moving them around (referred to as "Select and Slide") can only be used for the tiniest motions, or motions in which there is NO rotation. As soon as you're rotating a sprite around the y-axis, things need to be redrawn.

Turned surfaces must be redrawn

After about a 30-45 degree turn of any part of a sprite, the surface of that part has to be redrawn to account for the rotation. If a man is facing you, and turns sideways, his appearance will change considerably - for one thing, there will only be one eye visible where there were two visible before. When this happens, you have to draw it all from scratch. Yes, it's difficult, but it's par for the course. Like I said above, "select and slide" will fail you, here.

You can see this applied to the following bad example. A horse is supposed to be falling down, but because the animator was so terrified of having to actually draw the turned-body of the horse from scratch, the horses body never falls over, and instead deflates like a balloon in the same pose it started out in.

• Wrong:

Misaligned Frames

Each image in a series must line up correctly with the image before it. If they don't, the image shakes around inside the animation, which looks really bad:

• Wrong:

Exaggeration techniques

Traditional animation studios discovered several rules of thumb to liven up a strict representation of movement - that is, techniques that are probably correct to use even if you're not "drawing from life" and witnessing them firsthand. These were especially powerful in the first days of animation, because the drawings made were so simple, and left out a lot of the detail of the natural world - these are some of the first details to put back in. All of these are based vaguely on movement in the real world. If you exaggerate these too much, which you can certainly get away with, it will result in the animation looking cartoony, which is not necessarily a bad thing. These were developed in the first days of animation - in fact, fellows like Walt Disney pioneered them.

Wind-Up/Anticipation

When human beings prepare for a big move, such as swinging a baseball bat, or sword, they tend to give themselves some space to gain momentum. When a pitcher winds up for a throw, he curls back so that the ball will spend more time in his hand, thus spending more time accelerating, and thus have a higher speed. For Wesnoth images, this is a great technique to use on big swords and clubs. If a man is going to throw a punch, he reels back with the arm that is preparing to deliver it. If a cobra is going to strike, it first rears back its head. Think of what "Popeye the Sailor Man" does when he's about to clobber someone, and you have a perfect (albeit slightly exaggerated) example of this. Keep in mind though that you don't need to be afraid of over-exaggeration; we are hurt much more by under-exaggerating a motion, than we are by over-exaggeration, so always err on the side of over-exaggerating things like windups.

Inertia and Air Resistance

Different things are affected by physics in different ways. When a person makes a motion, certain muscles drive the motion, and the rest of the body is pulled by this force acting on it. The most important thing is that different parts of the body will move at different speeds - this is related to my mantra of "move the whole body" - if you do it, things will look a lot more realistic.

Non-rigid Objects

Most objects in the real world flex in extraordinary ways when they move. You don't consciously notice these, and you'd normally never guess that they took place, but they look right when animated because you do subconsciously see them in the real world. For a dramatic example, if you look at a slow-motion recording of baseball being hit by a bat, the baseball gets flattened like a pancake! This happens only for the tiniest moment, after which it oscillates back and forth (like a spring) returning to it's normal shape. In Wesnoth animation, using such a thing only for a single frame can make for a much livelier animation. Consider our thief's idle animation, and how the tossed money bag deforms as it lands in the hand.

Follow Through

Often taught to beginning boxers, a strike given with enough force to damage will often be targeted not at the surface of the opponent, but deep inside and even behind him. This is also related to many situations in which the person performing an action doesn't care where the moving object stops - a baseball player is not concerned with where the bat stops in his swing, rather he just wants to hit the ball as hard as he can, which is why the bat will often swing a full half-circle beyond home plate. In animating Wesnoth images, this is why it looks better if really strong sword strokes go clean through the point where the opponent is standing. As an example, this is why the Elvish Hero's attack looks stronger than that of the Elvish Fighter.

Cycling/Looping

In the real world, points of view do not remain fixed like they do in animations or videogames, but certain motions often get repeated, sometimes almost identically. One of the first tricks that animators used was to make animations of people doing something like walking. Instead of imitating the real world, wherein each step taken is subtly different from the next, as the mind carefully coordinates changing balance and the uneven conditions of the ground "plane", the animators simply drew a single step of the person walking, and lined up the images so that the final frame lined up with the first frame. Though one could not change the point of view on the subject, the animation could be looped indefinitely, and would look convincingly like viewing a person walking from a specific angle. For our purposes, this can be used to link together any repeating animations (such as walking animations).

See Also

• From Base Frame To Full Animation
• Art Tutorials
• Create Art
• Create