The 12 principles of animation in video games

The following excerpt is the third chapter of "Game Anim: Video Game Animation Explained" by award-winning game animator Jonathan Cooper. 

It was published in January and is available for purchase directly from publisher CRC Press.

Back when video games were still in the Pac-Man era, Disney animators Frank Thomas and Ollie Johnston introduced (in their 1981 book, The Illusion of Life: Disney Animation) what are now widely held to be the core tenets of all animation, the 12 basic principles of animation. They are:

While these fundamentals were written in the pre-computer graphics days of exclusively hand-drawn 2D animation, they translated perfectly for the later evolution to 3D animation, and while some of them less obviously correlate to the interactive medium, some light reinterpretation reveals their timeless value.

Understanding these basics of animation is essential, so it’s time to revisit them again through the lens of video game animation.

Principle 1: Squash & Stretch

This is the technique of squashing or stretching elements of a character or object (such as a bouncing ball) to exaggerate movement in the related direction.

For example, a character jumping up can be stretched vertically during the fast portion of the jump to accentuate the vertical, but can squash at the apex of the jump arc and again on impact with the ground. Ideally, the overall volume of the object should be preserved, so if a ball is stretched vertically, it must correspondingly squash horizontally.

Many video game engines do not support scaling of bones unless specifically required to due to the extra memory overhead (saving position, rotation, and scale is more expensive) and relative infrequency of cartoony games. However, this principle is important even when posing nondeformable rigs, as the theory of characters stretching and squashing their poses comes into play whenever performing fast actions even if not actually scaling, by extending limbs to accentuate stretched poses such as during jump takeoffs and lands.

Principle 2: Staging

Only directly relevant to linear portions of games such as cinematics, where the camera and/or characters are authored by the animator (as opposed to gameplay where both are player controlled), staging is the principle of presenting “any idea so that it is completely and unmistakably clear.”

This involves the use of camera, lighting, or character composition to focus the viewer’s attention on what is relevant to that scene while avoiding unnecessary detail and confusion.

Staging is relevant in gameplay when relating to level design, however, where certain layouts will funnel the player and direct him or her down a corridor or over a hill to reveal story elements laid out there, or the use of lighting to direct the player’s attention. Here, the animator can work with design to best place scenes in the player’s view by using techniques like these without resorting to fully commandeering the camera or characters.

Principle 3: Anticipation

Anticipation is used to prepare the viewer for an action, such as a crouch before a jump or an arm pulling back for a punch. It occurs in the natural world because a person jumping must first crouch with bended knees to give enough energy to lift off the ground, so it is used similarly in animation to sell the energy transfer of an action in a way the action alone cannot.

Anticipation is a controversial topic in video games, with designers often requesting as little as possible and animators pushing for as many frames as possible. Too little and the desired move, such as a punch or sword-swing, will have little weight to it (a key component of player feedback, not just an aesthetic one). Too long and the move will feel unresponsive, removing agency from the player and reducing the feeling of directly controlling the avatar. Ultimately, it will depend on the goals of the project and the value placed on a more realistically weighted character, but there are many more techniques than just extra animation frames to help sell feedback that will be detailed later.

Designwise, anticipation in NPC actions or attacks (called telegraphing) is desirably longer, as it informs the player that they must block or dodge something incoming. There’s not much fun in having to guess what an enemy might do with little warning, so the ability to read their attention is essential in creating satisfying back-and-forth gameplay. Both player and NPC actions tend to follow a balance of longer anticipations for bigger effect (higher damage) and vice versa to promote a risk-vs-reward scenario in performing actions with long anticipation that might leave the player vulnerable.

Principle 4: Straight Ahead & Pose to Pose

Referring purely to the process of animation creation, these two techniques describe the difference between working on frames contiguously (starting at frame 1, then onward) versus dropping in only key poses (called blocking) to quickly create a first pass and massage from there. Again, this has more relevance to linear animation (and especially 2D, where preservation of volume was key to the art of drawing) and essentially describes two philosophies.

In CG animation, there is no need to work in the former, and the realities of production almost demand that animations be done in multiple passes of increasing quality, so pose to pose is the preferable method for most game animation. This is due mostly to the high likelihood of animations being changed or even cut as the design progresses. Key gameplay animations will continuously require iteration, and doing so with a roughly key-posed animation is much easier than with a completely finished one, not to mention the time it wastes to finish an animation only to see it unused.

It is important never to be precious with one’s own work because of this, so keeping something in a pose-to-pose or unfinished state as long as possible not only promotes minimal waste, but allows the animator to create rough versions of more animations in the same time—ultimately, many animations blending together creates a better and more fluid game character than a single beautifully animated animation.

This all goes out the window when motion-capture is employed, where the animator is essentially provided with the in-between motion as a starting point, then adds in key poses and re-times on top of the action from there. There is an entire breakdown of this process later in this book.

Principle 5: Follow-Through & Overlapping Action

Overlapping action covers the notion that different parts of a character’s body will move at different rates. During a punch, the head and torso will lead the action, with the bent arm dragging behind and the arm snapping forward just before impact to deliver the blow. A common mistake most junior animators make is to have all elements of a character start or arrive at the same time, which looks unnatural and draws the eye to clearly defined key frames.

Follow-through, while related, instead describes what takes place after an action (the inverse of anticipation). This can cover actions such as a landing recovery from a jump or a heavy sword or axe embedding in the ground and being heavily lifted back over the character’s shoulder, and also includes the motion of secondary items such as cloth and hair catching up with the initial action. Follow-through is a great way to sell the weight of an object or character, and holding strong poses in this phase of an action will really help the player read the action better than the earlier fast movements. Follow-through has fewer gameplay restrictions than anticipation, as the action has already taken place, though too long a follow-through before returning control to the player can again result in an unresponsive character.

To maintain responsiveness, the animator should be able to control when the player is able to perform a follow-up action by specifying a frame where the player regains control before the end, allowing the follow-through to play out fully if no new input is given by the player rather than having to cut the follow-through short in the animation itself. Game engines that do not incorporate such a feature force animators to finish their actions earlier than desired to maintain responsiveness, losing out on a key tool in the game animator’s belt to provide both great-feeling and great-looking characters.

Related to overlapping action and follow-through is the concept of “drag,” where looser objects and soft parts such as hair or weak limbs can drag behind the main mass of a character to help sell the relative weight of one object or body part to another. Follow-through, overlapping action, and drag on nonanimated objects such as cloth cloaks or fat bellies can be performed procedurally in the game engine by real-time rigging that causes these elements to move with physics. Adding rigging elements such as these, especially those that visibly change or enhance a character’s silhouette, are a fantastic way to increase the quality of a character’s animation with little extra work, not least because their motion will continue whatever the following animation the player performs.

Principle 6: Slow In & Slow Out

This principle describes the visual result of acceleration and deceleration on moving elements whereby actions generally have slower movements at the start and end as the action begins and is completed, often due to the weight of the object or character body part.

This notion can be visualized very easily by a sphere traveling across a distance. Uniform/linear movement would see the sphere travel the same distance every frame, while slow ins and outs would see the positions gradually closer toward the start and end as the sphere’s speed is ramping up and down, respectively.

Importantly, not everything requires a slow in and out, but it is a good concept to grasp when they are required. For example, a rock falling off a beach cliff will have a slow in as it starts at rest, then gains speed during the fall, but will finish with an immediate stop as it embeds in the sand below. Were this to be animated, the rock would feature a slow in and fast out with a steep tangent at the end. Conversely, a cannonball fired high in the air from a cannon would display a fast in and a slower (yet still fast) out if its target were far away and it slowed due to air resistance.

Objects that burst into full speed immediately can look weightless and unrealistic, so it is here again that there is conflict between the gameplay desire to give players immediate response versus the artistic desire to give weight to a character. A sword that swings immediately might look light, so it is the game animator’s task to add that weight at the end in the follow-through, giving the action a fast in but a slow out as the character and sword return to idle.

In the cannonball example, the sense of weight could be displayed by animating a follow-through on the cannon itself as it kicks back, much like a game animator will often exaggerate the kickback of a pistol to show its relative power and damage as a weapon in gameplay, all the while maintaining the instant response and feedback of firing.

Principle 7: Arcs

Most actions naturally follow arcs as elements of the object or character move, such as arms and legs swinging while walking. Body parts that deviate from a natural curve will be picked up by the eye and can look unnatural, so arcs are a great way of honing in on the polish and correctness of an action. Much of the cleanup of making motion-capture work within a game is removing egregious breaks from arcs that naturally occur in human motion, but might look too noticeable and “wrong” when seen over and over in a video game.

Contrary to this, though, animating every element of a character to follow clean arcs can look light or floaty when nothing catches the eye. Much like employing overlapping actions, like most general rules, knowing when to break a smooth arc will add a further level of detail to animation and make it that little bit more realistic. Due to its weight compared to the rest of the body, the head will often snap after the rest of the body comes to a stop following a punch. Having the head break from the arc of the rest of the body is one of many observable traits that extensively working in mocap can reveal, adding an extra level of detail to animation required to look realistic.

Principle 8: Secondary Action

Secondary actions are used to complement and emphasize the primary action of the character, adding extra detail and visual appeal to the base action. While it can be difficult to incorporate more than one action in many gameplay animations due to their brevity, (secondary actions must support and not muddy the look of the primary action), it is these little details that can take a good animation to great.

Examples of secondary actions range from facial expression changes to accompany combat or damage animations to tired responses that play atop long stretches of running. Technologies detailed later in this book such as additive and partial animations allow actions to be combined on top of base actions to afford secondary motions that are longer than the individual animations required for player control.

Principle 9: Appeal

Appeal should be the goal of every animator when bringing a character to life, but is ineffable enough to make it hard to describe. It is the difference between an animated face that can portray real emotion and one that looks terrifying and creepy. It is the sum of an animator’s skill in selling the force of a combat action versus a movement that comes across as weak. It is the believability in a character’s performance compared to one that appears robotic and unnatural.

Appeal is the magic element that causes players to believe in the character they are interacting with regardless of where they lie on the stylized vs realistic spectrum, and is not to be confused with likeability or attractiveness, as even the player’s enemies must look aesthetically pleasing and show appeal. This is owed as much to character design as it is the animators’ manipulation of them, where proportions and color blocking are the first steps in a multistage creation process that passes through animation and eventual rendering to make a character as appealing as possible. Simplicity in visual design and posing on the animator’s part help the readability of a move, and clear silhouettes distinguish different characters from one another.

Principle 10: Timing

Timing is the centerpiece of the “feel” of an animation and is generally invoked to convey the weight of a character or object. Intrinsically linked to speed, the time it takes for an object or individual limb to move or rotate a distance or angle will give the viewer an impression of how weighted or powerful that motion is.

In 3D animation, this is best explained in basic mathematics:

time = distance/speed, therefore, speed = distance/time

That is why every animation curve editor available shows the axes of both distance and time as the main input for animators to visualize the speed of the manipulations they are performing. If we move an object 10 m over 2 seconds, that is faster than doing so over 5 seconds. Similarly, posing a character with arm recoiled then outstretched gives a faster punch over 2 frames than it does over 5.

Referencing slow ins and outs, appropriate timing ensures a character or object obeys the laws of physics. The faster a move, the less weight, and vice versa, which refers back to the game animator’s dilemma of offering gameplay response while still maintaining weight. Having a character immediately ramp up to a full-speed run when the player pushes on the stick will make the character appear weightless without the correct visual feedback of leaning into the move and pushing off with a foot.

Moreover, timing of reactions gives individual movements time to breathe, such as holding a pose after a sword swing before the next so the player sees it; or, during a cinematic moment, the delay before a character’s next movement can illustrate a thought process at work as he or she pauses.

Principle 11: Exaggeration

Real life never looks real enough. If you were to watch a real person perform an action, such as jumping from a height and landing on the floor, and copy it exactly into your animation, the character would likely look slow and aesthetically imperfect. Real movements do not follow perfect arcs or create appealing or powerful silhouettes.

In animation, we are looking to create the hyper-real, a better presentation of what exists in real life. In games, especially, we more often than not must create actions that look great from all angles, not just from the fixed camera perspective of traditional linear media. That is why one of the best tools in an animator’s kit is to exaggerate what already exists. When referencing actions, the animator must reinterpret the movements in a “hyper-real” way, with poses accentuated and held a little longer than in reality.

Obeying the laws of physics completely, a bouncing ball causes a smooth parabola as it reaches the apex, then falls back to the ground with a constant gravity. An animator, however, may choose to hold longer at the apex (creating anticipation in the process) before zooming back to the ground, much like a martial-arts character thundering down with a flying kick.

Similarly, a real boxer might uppercut for an opponent-crumpling KO, whereas the game animator would launch the opponent off his or her feet and into the air to “sell” the action more and make it readable for the player. “Selling” actions via “plusing” them is an excellent technique to ensure a player understands what is happening, especially when the camera might be further away for gameplay (situational awareness) purposes.

Care must be taken to ensure all levels of exaggeration are consistent throughout a project, and it will mostly fall on the animation lead or director to maintain this, as the level of exaggeration is a stylistic choice and inconsistency between actions (or across animators) will stand out and appear unappealing when the player plays through the entire game.

Principle 12: Solid Drawings

While at first seemingly less relevant in the age of 3D animation, one must remember that drawing is an essential method of conveying information between team members, and the use of thumbnails to explain a problem or find a solution is an almost daily occurrence when working with game design. All the best animators can draw to a degree that can easily support or give a direction, and the skill is especially useful in the early stages when working on character designs to illustrate the pros and cons of particular visual elements.

Nevertheless, the “solid” part was essential in the age of 2D animation to retain the volume of characters as they moved and rotated on the page, so a lot of focus was placed on an animators’ skills in life drawing and the ability to visualize a character in three dimensions as they translate to the two-dimensional page. While no longer done on a page, an understanding of volume and three dimensions is still essential for an animator when animating a character in 3D to aid with posing and knowing the limits and workings of body mechanics.

Solid drawings can be reinterpreted as a solid understanding of body mechanics, which covers everything from center of mass and balance to the chains of reaction down a limb or spine as a foot hits the floor. Understanding how bodies move is a core competency of a good game animator, and knowing how they should look from any angle means cheating is out of the question.