TIMING - The 12 Principles of Animation in Games.

Hello! My name is Dan, I’m an animator, and this is New Frame Plus, a series about video game animation. When you’re trying to develop your critical eye for this stuff, it really helps to be familiar with the fundamentals of the craft. And it doesn’t get much more fundamental than the 12 Principles of Animation.

For those of you who have not heard of them before: what we call the 12 Principles of Animation were first laid down in a book called The Illusion of Life, written by some ex-Disney animators named Frank Thomas and Ollie Johnston.
These 12 Principles were essentially a collection of techniques that were established by the animators of those earliest Disney feature films, and these principles form the foundation for the art of animation as we know it.

Every animator working today has spent their career trying to master these basic fundamentals. And in this episode, I just want to talk about the first one, which is: Timing. Animation is a time-based craft. And that makes Timing the most fundamental, foundational principle of the 12.

It’s about measuring change over time. Timing is the speed or tempo at which an action takes place. ANY action. It could be how long each successive bounce of a rubber ball takes before it slowly comes to rest. It could be the rhythm of a character’s steps.

It could be the time it takes for an enormous colossus to get to its feet. Some actions have fast Timing, like the rapid punches in a fighting game. Or the sharp kick of a fired gun. Or the quick blinks of a character’s eyelids. Other actions have slow Timing, like the leisurely descent of a paraglider.

The ominous opening of a Dark Souls door. Or the facial expression of a sloth very very slowly getting the joke. On a surface level, this is a straightforward, obvious rule. Fast things happen quickly, slow things take a longer time... obvious, right? But this is the foundation upon which all of animation works, and it gets more interesting as you start to build upon it.

Because you can use Timing to communicate all sorts of stuff. Like, for example, size. Consider the action of standing up from a seated position. Let’s say it takes a person about two seconds to do that. But what if you wanted to make that person feel like an enormous colossus? To communicate that sense of scale and weight, you could time the action to take much longer, like maybe five or even ten seconds.

But this goes beyond just physics. You can even use Timing to communicate character and mood. If you speed up the Timing of that standing action, you can make the character seem excited or maybe startled. Or, if you slow the timing down, you can make them feel tired, or maybe depressed.

See, this is what makes Timing so fundamental: it may be simple, but it influences EVERYTHING. Now, you can think of Timing in terms of seconds or half seconds, but an animator is going to find it much more useful to think of Timing in terms of frames.

The frame is the animator’s standard unit of measure. For an old school pencil and paper animator, a ‘frame’ essentially meant a drawing. Film runs at a constant 24 frames per second, so - assuming they were making a new drawing for every frame that’s 24 drawings per second.

The more frames or drawings an action takes to happen, the longer that action appears to take. Now, a lot of you might be used to thinking of ‘frames’ in terms of a game’s frame rate, where the number of frames that the game renders per second is variable, but that's a fundamentally different, separate thing.

For the game animator’s workflow, we still need a way to measure time in constant units, so when we’re actually animating characters, we’ll think of “frames” just like those 2D animators did back in the day; as a constant unit for measuring time. At the rate of 60 frames per second, this attack animation is 48 frames long Snake drawing his assault rifle takes about 14 frames.

This conversational hand gesture from Geralt takes roughly a 140 frames. You get the idea. Honestly, it’s just easier than switching to milliseconds. Another important animation concept to understand in relation to Timing is Spacing. Spacing isn’t technically one of the 12 principles, but it is very closely linked with Timing, to the point that these two concepts are almost always taught together.

In simplest terms, if Timing describes WHEN, Spacing describes HOW. In animation, Spacing is about how far something moves or changes from one frame to the next. The bigger the change in position, the faster that movement will appear. So, say we have a ball and it’s going to move from one side of the screen to the other side of the screen and it’s going to take 60 frames to get there.

So, okay, we know the Timing, 60 frames, but HOW will it move from point A to point B? It could travel with very even spacing, where it covers the same distance each frame and appears to move at a very linear speed. But what if the spacing started out being much closer together and then got further apart over time? That spacing would make it so the ball appears to accelerate, starting much slower and reaching full speed by the end.

And we could use the same technique to make it appear to decelerate at the end as well. By altering the amount of change you see from one frame to the next, you can make some pretty significant alterations to the feeling and perceived speed of the movement.

One of my favorite examples to point to when explaining this principle is Shadow of the Colossus, because Timing plays such a huge role in shaping that game’s aesthetic. Obviously the colossi themselves are large creatures and the slow, heavy timing of their movement is instrumental in making them feel so enormous, but that’s just the tip of the iceberg.

Look closer, and you’ll find that there’s almost never a sharp, quick movement anywhere in this game. You're not going to find any of that snappy, nearly-instantaneous Smash Bros timing in here. In this game, even the small characters don’t dart around.

Everything moves with a softness and a serene sort of nobility. And that aesthetic choice results in the ENTIRE game having this sense of majestic scale and importance, even when there’s no colossus in sight. That sense of majesty is achieved almost entirely through Timing, through making everything in the game move just slightly slower, just enough to make it feel a little grander.

The animation timing in Red Dead Redemption 2 tends to be relatively slow as well, but in a more naturalistic way, aimed at making its world feel more grounded in reality. And some folks may have expressed frustration at that slower timing, especially when it comes to actions that you've got to perform frequently but others have argued that this slower, more thoughtful pace is what makes the experience feel so faithful to the western genre, both in terms of aesthetics AND gameplay.

And when you’re creating animation for games, you HAVE to consider the gameplay effect your animation’s Timings going to have. For example, most fighting game animations have very FAST timing. A lot of the attacks seem to happen in the blink of an eye.

Look at how few frames it takes for Ryu to go from idling to his elbow connecting with the opponent… That’s like 3 frames! 1/20th of a second! And that fast timing is what makes fighting game characters feel immediately responsive, but it also means that players have almost no chance of seeing an attack animation coming in time to react to it.

The average person just cannot see and react to something in the span of 3 frames. And this creates a scenario where players often aren’t reacting to the opponent character’s animations, but PREDICTING what their opponent is about to do based on positioning and instinct.

Animation Timing has not only shaped how these games handle, but fundamentally defined how they’re played. But then on the opposite side of that spectrum, you have games like Dark Souls. Dark Souls combat animations have relatively slow timing with LONG recovery phases.

Just look at the startup time for this basic attack with a longsword… that’s about 30 frames from idle to the sword connecting. TEN TIMES slower than Ryu’s basic attack. And the lengthy recovery time that comes after every one of these attacks adds a degree of risk to each move.

To commit to an attack is to potentially leave yourself vulnerable, so it’s in your best interest to watch your opponent carefully, choosing to attack only in the moments where you believe they will be vulnerable AND won’t have a chance to punish you for that attempt.

Dark Souls teaches you to watch your opponent’s animation carefully and strategize around it. And, again, that’s thanks in large part to the timing of its animations. And heck, then there’s games like SuperHot, where time only moves at regular speed when you move or perform an action.

TIMING ITSELF is a core gameplay mechanic here. Timing has always been an important principle in animation, but for games, it might be the most important principle of the twelve. But yes, I think that’ll about do it for Timing. There are eleven other animation principles left to cover, but we will talk about those another day.