Introduction
In game animation, we spend a lot of time focused on technical elements, such as the structures of rigs, animation pipelines, or AI-driven solutions for having characters respond to the player. But as alluded to in one 2017 GDC Animator’s Bootcamp talk, game industry animators have few opportunities to build lavish motions that our colleagues in the film and animation industries do. Games are simply different than these mediums: while we are “time-based” just like film, we have to think beyond visual presentation and into things like collisions or making sure our characters feel responsive.
Game animation has to be both artistically interesting and functional within the constraints of games, such as snappy controls and collision. For that reason, animators have to juggle art and tech (image source: Tenor.com)
All of this leads to a strange balancing act for game animators, who train rigorously in artistically-focused techniques meant to give a sense of life to their creations. Chief among these techniques are the classic 12 Principles of Animation, developed over many years at the Walt Disney Animation Studios and eventually published in the 1981 book Disney Animation: The Illusion of Life by Frank Thomas and Ollie Johnston.
The 12 Principles of Animation describe techniques for drawing specific motions and interactions so that an animator’s drawn characters can give the impression of life through timing, expressiveness, and other qualities. (Image source – Lachina Creative: Lachina.com)
While I wear many hats in the industry, I’m often called into action as an animator, such as with my current work on Little Nemo and the Nightmare Fiends – an in-development non-linear 2D platformer based on Winsor McCay’s groundbreaking Little Nemo comics. In this role, I’ve had to make difficult choices between serving art or tech. Often, I find myself using the Principles of Animation, but bending them for use in games. I can see the same bending of principles happening around the industry as well, such as in the works of Celeste animator Pedro Medeiros (whose excellent animation tutorial gifs can be found here.)
The trailer from Little Nemo and the Nightmare Fiends March 2021 Kickstarter campaign. Our in-development game uses traditional 2D animation to build an animated comic world based on the original Little Nemo series by Winsor McCay.
When used well, I think that the 12 Principles are a great tool for game animators, but those principles developed for use in film don’t always fit 1:1. Based on some of the cheats that other animators and I have used, this article describes a reconfigured version of the classic 12 Principles of Animation that I’ve used in my work, especially in my current work on Little Nemo.
Historical background - rubber hoses no more
In 1927, members of the animation industry, then focused in the area around New York City, were gathered at a dinner in honor of Winsor McCay, one of the fathers of American animation and the creator of groundbreaking comic and animated works such as Little Nemo and Gertie the Dinosaur. After a few drinks, McCay stepped up to the podium and gave a speech including the line, “Animation should be an art, that is how I conceived it. But as I see what you fellows have done with it is make it into a trade - not an art, but a trade. Bad luck!”
An example of particularly egregious rubber hose-era animation (from one of Disney’s own Oswald the Lucky Rabbit films). Animation like this lacks the “solid drawing” that helps anchor a character in 3-dimensional space, and ignores any sense of mass or scale that helps the character feel more alive. (Image source: YouTube)
McCay’s comment came at the height of a style of animation referred to as “rubber hose”, aimed primarily at getting quick laughs, but which failed to help the characters transcend the ink and celluloid used to make them. While today the rubber hose look has been reclaimed thanks to Cuphead and other works that incorporate the 12 Principles into the style, at the time it was seen as flat or low-brow. This stood in contrast to the work of Fleisher Studios (Betty Boop), who pushed the boundaries of animation in that era. Disney Animation’s carefully crafted work in the 1930’s likewise was a rebellion against the rubber hose look after even they produced several examples of that form.
Winsor McCay’s 1914 film Gertie the Dinosaur featured far-ahead-of-its-time animation that endeared the animated dinosaur to audiences. The film is cited by Thomas and Johnston as a major influence on both the early Disney animators and the industry as a whole.
Why the Principles, and why reinvent them?
The principles are themselves are a framework through which an animator can give qualities to a character that will endear them to their audience: a sense of physical presence in their world, expressiveness, appeal, emotional depth, timing, and motion readable by viewers.
Without naming them outright, animator Ben Fiquet describes choices involving the Principles of animation in his GDC 2018 talk, “The Art of Wonder Boy: The Dragon’s Trap”. For the player’s Lion form, the sprite drags their sword behind them, which creates a more readable character shape. Previous versions though, had the lion hold their sword at their side: this served the need for a consistent collider size, but was harder to read.
Image source: TIGSource Forums:https://forums.tigsource.com/index.php?topic=50899.0
Fiquet’s talk summarizes the struggle between art and trade described by McCay nearly 100 years ago – building expressive animation often comes at the expense of serving technical aspects of the craft. The animators of the 30’s and 40’s addressed this with the classic Principles, but those film-based techniques did not predict the needs of games. They drastically change the body shape or size of a character (bad for collision) or add extra movements to motions (bad for responding to input.) This is why those cheats those other animators and I have used in our own work are so important: they can help us reframe the classic Principles for games work.
12 Principles for Game Animation
To explore this topic, I’m going to introduce each of the classic 12 Principles of Animation, describing what it is, why its important, any issues in translating the Principle to games, and proposed solutions. I will say beforehand that these principles can and should be used in both 2D and 3D games and are not confined the either format. Along the way, I’m going to enlist the help of characters from our in-development game Little Nemo and the Nightmare Fiends, in which I am implementing these reframed Principles (NOTE: anything from the game should be considered non-final and subject to change.)
Squash and Stretch
Our version of McCay’s mischievous clown Flip incorporates lots of squash and stretch in his animation.
The first Principle is squash and stretch, which is when you compress a character (“squash”) or elongate (“stretch”) them to give the character a sense of physical reality. Squash is used often when a character is hitting a surface (as in landing from a jump or reacting to being hit) and stretching occurs when a character his in motion such as during a run or jump. Importantly, you must always animate characters with this principle in such a way that they maintain their volume: when squashing you want to have the character expand in the perpendicular direction, and when stretching in one direction they should get thinner in the same way. This avoids the negative aspects of old rubber hose-style where characters would just gain or lose body mass randomly.
Squash and stretch can be applied in different amounts or in different ways to imply different materials. The ball on the left squashes/stretches a lot because it’s rubbery, but the metal lamp on the right (Pixar’s Luxo Jr.) “squashes” and “stretches” through posing so that it retains its shape.
Squash and stretch are a useful visual shorthand for giving a character the impression of physics or enhancing any physics that you may have happening within a game engine. The amount of squash/stretch you add to a character can also imply different materials: drawing your character with more squash/stretch makes them feel rubbery while less makes them feel as though they are made of harder materials. This applies to different styles as well: film animators use squash and stretch in many characters, not just “cartoony” ones, but vary the amount of it based on art style. As long as mass and volume are maintained, the effect of this principle gives motion an extra visual “punch” that is useful for building a sense of “juice” into your animations.
For game animation, squash and stretch can make collision very difficult: by expanding or contracting a character’s body size to extremes, it’s possible to create discrepancies between a character’s art and collision boundaries. Game animators looking to employ lots of squash and stretch into their work have a few decisions to make (and, if possible, to talk through with their programmers). If employing lots of squash and stretch, consider having it only occur for a few frames so that the squash/stretch frames are over quickly before any meaningful collision change has to occur. Likewise, consider giving only certain parts of the squashed/stretched characters collision – this has an added bonus of “cheating” for the player, which is something many of us do throughout our general design (coyote time anyone?)
Flip sprite with colliders set to hug the sprite’s shape
Flip sprites with consistent collider sizes
As you’ll see through many of these Principles, collaboration and compromise are key to making squash and stretch work in the context of a game.
Anticipation
Anticipation is the principle of showing a short action before a bigger one to signal to the audience that the character is about to move drastically. While this is something that humans do not normally do in their own movement, it’s important in animation so that the viewer’s brain can process the masses of ink, paint, and polygons on screens moving like living creatures. This Principle is perhaps the biggest violator in the awkwardness between film and game animation, as it adds extra time to motions, and is thus difficult to implement well in motions where the game has to react to player input.
As I said, animators use anticipation to signal to audiences that a character is about to move. When humans move, we naturally have small imperfections in the way we carry out motion that lets our brain “believe” what is happening. If a human turns their head, for example, our brains accept that head turn. However, if a cartoon character just turns their head, it can look flat and uninteresting, lacking the signifiers of “life” present in a real human.
When we see a person turn their head in real life, the brain accepts it because our brains are wired to accept the motion as natural. Image source: Pinterest
A head turn animation with no anticipation — the result looks flat despite being “technically” correct. Our brain does not accept this as natural because it’s a drawing. Image source: https://design.tutsplus.com/tutorials/animation-for-beginners-how-to-animate-a-head-turn--cms-26487
