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 a