Animation Primer (Part 1): Core Principles
I’ve been meaning to talk about how game animation works in general because it’s such an integral element to contemporary video games. Unfortunately, it’s also one of the broadest and deepest elements in entertainment today, which means that it’s very difficult to talk about any specifics without everyone involved understanding the fundamentals first. There’s a lot involved - animation in games is incredibly complicated, because it builds off of general animation principles (art), as well as technology (engineering), and is used in different ways in games (design). So, over the course of several posts, I’m going to try giving you all a primer on how game animation works. I’ll start from the most basic core principles (the twelve principles of animation), then move on to game-specific animation and how animators deal with it, and finally talk about how the animations work from an engineering perspective.
That said… let’s begin. First off, let’s try to understand - what is animation? The best way I’ve heard it described is “Sculpting Time” - it’s a distinct means of showing something happening in four dimensions (length, width, depth, and time). A punch cannot exist in only two or three dimensions - it must take place over time. Our human brains are very good at taking separate pieces and putting them together into a coherent whole. When we see a whole bunch of distinct, individual images in close proximity to each other, our brains will stitch them together to a single action. That subconscious mental stitching is the foundation of animation.
As artists figured out how this worked, they experimented and discovered ways to make animation look better. Animators took their traditional drawings and experimented with bending and breaking rules, inventing techniques like “smearing” - exaggerating characters in individual frames in order to make the overall motion look smoother - in the process. This is why freeze frames of old Disney animated movies are often so weird looking - they are masters of using this technique.
Generally, a “good looking” animation is one that reads well to the viewer - all animation is constructed for the benefit of the viewer more than anything else. As such, it means that the motion has to convey a story to the viewer. Good animation will convey a clearer story to the viewer than bad, and that translates to “looking better”. The animation pioneers’ wisdom was essentially boiled down to twelve fundamental principles.
Today, I’ll go over the twelve principles. All images taken from @the12principles.
The Twelve Principles of Animation
1. Squash and Stretch. When creatures move, they don’t just move parts of their body through space. There’s a give and take involved, where parts of the body will flatten more and others will stretch further - muscles elongate and contract, bones and joints will change position, and so on and so forth. This doesn’t only apply to living things either - inanimate objects like balls, water droplets, and other things will also change shape as force is applied to it. A baseball hit by a bat is most definitely not round at the point of impact. Humans understand this on a subconscious level, and are keyed to look for it. Seeing bodies contract and expand makes the viewer feel like the motion is more palpable.
2. Anticipation. Humans subconsciously look for clues for something to happen, even if it happens only a fraction of a second before it. By showing the viewers something to clue them in as to what is about to happen, it primes them for when the action actually does happen. Without it, it can feel like the action came out of nowhere. By giving a moment’s notice, the action is conveyed more clearly.
3. Staging. Staging is about clarity of intention. You want the viewer to understand what feeling or emotion is being conveyed by the animated object at all times, and it should be clear through the motion exactly what that feeling is. By providing clarity of feeling, the viewer subconsciously relates better to the moving object.
4. Pose to Pose. This is the idea of having several key poses for the moving object, and then filling in images for what happens in between those key poses. This is a natural extension of computers’ ability to interpolate between numbers and figure out what happens “in between” at a specific time step between two numbers. There is another method of doing this called “Straight Ahead” where the animator creates images from frame to frame without a clear goal of where to end up and that lends itself better to things like morphing shapes or visual effects like fire burning, explosions, water splashing, etc.
5. Follow Through. Action can’t exist in a vacuum. Similar to Anticipation above, Follow Through means that the movement doesn’t just stop. It continues moving because it has weight, and thus has a result. Our brains are primed to look for this. Stuff that just stops moving all of a sudden feel abnormal to the viewer. By allowing the viewer to see the results of the motion, it feels more real.
6. Slow In and Slow Out. This principle means that our brains are primed to see things start slow, end slow, and do most of the movement in between. Slow In and Slow Out is similar to Anticipation and Follow Through but at an even more basic level. It only refers to the speed of the movements at these crucial end points, but it smooths out the transition and helps our subconscious brain because it’s primed to think about things in terms of weight and inertia - we expect things to slide to a stop, we expect things to require more effort to start, and we expect gravity to play a part.
7. Arcs. Circles and arcing motion are pleasant to the human eye. When we move, we tend to move in arcs, rather than straight lines. When we walk, our heads naturally bob and dip, creating an arc. When we gesture, our arms usually move in a circular motion, rather than a straight line. When we speak, we subconsciously adjust for a natural cadence in our voices, rather than maintain a constant monotone. Humans like arcs. In animation, we subconsciously want to see them.
8. Secondary Action. Secondary Action is similar to Follow Through above where we expect to see the results of the motion. Nothing moves alone in a vacuum, after all. This means that the stuff that the moving thing may be touching or interact with should also show effects from that movement. An object on a table might get jostled when the table is bumped, yelling at someone might cause the listener to wince, or firing a gun would cause recoil in the arms of the person firing it. It’s important to incorporate secondary action into motions to make them more believable.
9. Timing. Timing affects how we perceive things to be by watching them move. Observe the two actions animated above. What does this tell you about the big cube that the smaller cubes are pushing? Perhaps the bottom big cube is heavier and requires more effort than the top one? Maybe the top one is on a floor that’s easier to slide things on than the bottom? See how just the timing of the motion affects your perception of it.
10. Exaggeration. We tend to lose a lot of the nuance of natural motion, especially when viewed at a distance. When creating an experience for a viewer, we don’t want to take that risk… so the best way to make sure that the viewer doesn’t miss it is to exaggerate its motion. Arcs become bigger, timing becomes tighter, secondary motions become more elaborate. This helps them read better to the viewer. It might feel like making the motions obvious would be a little hamfisted to the viewer, but it’s actually very useful.
11. Solid Drawing. Solid Drawing means to take the principles of perspective and weight into account when creating the moving object. When an object of a certain size and shape moves, viewers will assume certain characteristics like inertia, weight, and so on. Animation does not inherently carry these sorts of constraints, but the wise animator will still take them into account when creating those motions. An enormous object should treated as if it were heavy. A thin object might bend, flex, or shatter. A round object might roll. A fragile object can break.
12. Appeal. This is kind of tough to describe, but Appeal basically refers to the character being interesting and memorable to look at. Something about the character stands out in your mind and you have a generally good reaction towards it. You should be able to recall the character from memory. Even villains have Appeal - Ganondorf and Ganon are extremely memorable visually, even if they aren’t heroes. But Megatron from Michael Bay’s Transformers movies has too much detail clutter and obfuscates what visually defines him. If you’ve seen the movies, can you remember any sort of visual distinction about him? Could you choose him out of a silhouette? That’s what happens when Appeal is missing.
If you’re observant, you’ll see that actual real-life motion often incorporates these principles in general. These aren’t just suggestions for making animation look better, but an understanding of all of the little details that go into motion in order to make it look believable.
[Art Eater’s blog post on the 12 principles of Animation using Darkstalkers as an example]
Next time, we will go over how 3D animators actually deal with making things move.
Got a burning question you want answered?
Short questions: Ask a Game Dev on Twitter
Long questions: Ask a Game Dev on Tumblr
Frequent questions: The FAQ
theartofmadeline
origamiaround
pixelskylines
snowghoul
baratheonpilled
ellievsbear
discoholicmusic
