Basic Animation Tutorial

by Jetryl

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 travelled" 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 - eg, 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 30fps from their hardware, or else they find the game to be too "jerky" and frustrating to play - some, even, demand 60fps. As a priciple, 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-60fps), and the code-driven movement is out-of-synch with the procedural animation, seemingly giving us additional frames of animation.

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.

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 down in his hand." 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, for balance. Human beings occupy what is known in physics as an "unstable" equilibrium point. If you set a pen on its point, it will fall over - amusingly enough, human beings are built, balance-wise, much like a pen. If we make any movement, we need to make an appropriate counter-movement, or we will fall on our face. Because of the way the human body is constructed, this generally means a rotation or movement of the entire torso, which makes anything connected (which is, the entire body) move with it.

In order to understand how something is supposed to move, you may need to look in the mirror, or look at a movie. There are many examples of good, medieval action films - 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.

Wrong:
Right: (ignore the dithering (dots))

Hidden surfaces must be redrawn

When an object turns, in an animation, and shows a side that wasn't visble 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. This is obvious! However, this is an often-repeated mistake, because people are afraid of having to draw parts from scratch. Cutting and pasting body parts, and moving them around can only be used for the tiniest motions, or motions in which there is NO rotation. The good news is, this is a great way for people to practice drawing parts of sprites, because here, they only have to draw a part of the unit's body, rather than the whole thing.

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. Like I said above, DO NOT CUT AND PASTE. It simply will _ not look right.

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.

Wrong:

Exaggeration techniques:

Traditional animation studios discovered several techniques along the way to "procedurally" 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 were likely those who 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'll have good example of the "cartoony" range of things.

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, ways that you would never guess, but which are clearly percieved by the "subconcious," and thus look right when animated. For a stunning 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.

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).

Some examples

Taken from Zhukov's edit of the orcish grunt

	The base frame for an Orcish Grunt
	Wind up - note the exaggerated pullback
	Strike - note the whole body has moved, and most (but not all) of it has had to be redrawn.