12 principles of animation in game development

Originally posted on theshawnhopkins.blogspot.ca
 

If there’s two industries I’m passionate about, they would be animation and video games. Both animation and video games allow me to be creative and technical. And, well, hey hey lookie here, there’s animation in video games. In fact, in most games, animation is one of the key ingredients.

 

 

Some will think animation, and only associate cartoons both traditional and CG. However animation goes much further than this. Animation by definition the process of creating the continuous motion and shape change illusion by means of rapid display of a sequence of static images that minimally differ from each other. The illusion — like in motion pictures in general — is thought to rely on phi phenomenon. Taking this into consideration, we need to account for almost all visual effects in games, both particle generated and sprites.

 

 

Most artists and animators know the twelve principles of animation. These principles are pretty important when animating. What are the twelve basic principles of animation?  The Twelve Basic Principles of animation are essentially a set of tips/rules for animation that were introduced by Disney animators Ollie Johnson and Frank Thomas. This set of principles are used in animation to give characters and objects the illusion that they adhere to the laws of physics. The principles also deal with timing and exaggeration and other elements to assist in giving the object more “life”, so to speak.

The twelve principles are as follows:

 

1. SQUASH AND STRETCH
2. ANTICIPATION
3. STAGING
4. STRAIGHT AHEAD AND POSE TO POSE ANIMATION
5. FOLLOW THROUGH AND OVERLAPPING ACTION
6. SLOW-OUT AND SLOW-IN
7. ARCS
8. SECONDARY ACTION
9. TIMING
10. EXAGGERATION
11. SOLID DRAWING
12. APPEAL

 

First I would like to briefly explain each of these, then we will apply as many of these to video game development.

 

 

1. SQUASH AND STRETCH
This is perhaps the most important principle. This will give the illusion of pressure and weight. The bouncing ball is probably the most common example of this, Where at the peak of each bounce the ball has it’s original shape, at the trough (bottom) the ball “flattens” after impact with the surface. Then in between the peak and trough, the ball will stretch and follow direction.
Aside from the obvious, using squash and stretch in your game’s animations, squash and stretch can be used on some UI elements as well. For example, a button may respond with a squash and stretch effect. Screen transitions may do the same.

 

2. ANTICIPATION
The anticipation is the set up or preparation to an action. Think of a person jumping. The anticipation would be the bending of the knees before springing off the ground.
UI element responding with anticipation is much the same as squash and stretch. Think of a window shade or a seat belt, you need to pull back a bit before the shade or belt retracts. UI element before “hiding” may pull back a little first.

 

3. STAGING
Essentially this is keeping focus on what is relevant to the scene without unnecessary clutter or distraction. Johnston and Thomas defined staging as “the presentation of any idea so that it is completely and unmistakably clear”.
Staging I think is the most important of these in terms of user interface. Cluttering an interface with more than what is needed can often leave a user with a negative experience.

 

4. STRAIGHT AHEAD ACTION AND POSE TO POSE
This principle and term is used almost exclusively in animation. “Straight ahead action” refers to drawing out a scene from start to finish, while “pose to pose” refers to drawing out some key poses, then drawing the “inbetweens” later.
Straight ahead and pose to pose May be a bit more difficult to translate over to game development, aside from setting up animations that is. If we look at straight ahead in animation, an artist will start at the beginning and keep drawing frames until they reach a desired pose. This is spontaneous and often unpredictable. Randomized level maps and enemy spawn points achieve this. The opposite of this would achieve “pose to pose”. For example, let’s look at Super Mario Bros.. Each level, coin and enemy was programmatically hard coded in place. Just like animation, both of these techniques have definite advantages and disadvantages. Finding a happy medium and knowing when to use each technique is best.

 

5. FOLLOW THROUGH AND OVERLAPPING ACTION
Follow through and overlapping action are very closely related. “Things don’t come to a stop all at once guys; first there’s one part and then another” as Walt Disney told his animators. Think of a pitcher at a ball game. After he winds up and throws the ball, his hand still continues to move even after the ball has left his hand. It’s physics.
This one will mainly be used with the in-game animations. However this can also be used with buttons and screen transitions quite like squash and stretch and anticipation. follow through and overlap will help in creating a smoother screen transition.

 

 

6. SLOW IN AND SLOW OUT
Unless you are a robot, most all things need a little time to start or finish an action. going back to the bouncing ball, it will slow down as it reaches it’s peak then slowly regain acceleration as it descends toward the ground.
This could translate into how one would design a level. You may want to ease a player into the intensity of a level rather than at the beginning. Or even, designing the level’s map. One might have minimal paths in and out of the map, but “freedom” throughout the rest of the map.

 

7. ARCS
Most natural actions follow an arc. Having animated movements follow arcs tend to enhance the realism and make these actions believable.
Similar to Slow-in and Slow-out, a game or level should have a natural and smooth feeling arc to it. Transitioning from one portion of a level to another portion of the same level shouldn’t be abrupt (unless that is the design intention).

 

8. SECONDARY ACTION
Secondary actions are used to support the main action without taking attention away from the main action. A person walking could sway their arms, a person talking could use hand gestures and body movement.
Dependent on the type of game, but i think that secondary movement in game animations is just as important as in an animation. Grass swaying, birds flying, clouds moving is a really nice touch to a character running by. However for a developer, secondary action could mean loading assets, preloading pages before you are finished with the current action or a back buffer that sets up the next frame in the background while the current frame is displayed rather than creating each frame as the game displays it. This boils down to efficiency and keeping the user as immersed as possible.

 

9. TIMING
This refers to the number of frames between key actions and poses. this then translates to the speed of the action from the viewers perspective.
Timing is everywhere in Game design, and very important too. How long should a player spend in this area, do we have enough for a player to do while here. When the character jumps how long do they stay in the air. How long should the power-up/action cooldown periods be. these are all design questions that shouldn’t be taken lightly, and will require testing to determine and fine tune these numbers.

 

10. EXAGGERATION
Exaggeration is used a lot in animation and comics. Artists would exaggerate, augment and emphasize certain characteristics to give the characters more….character.
Exaggeration in level design is pretty important. Sure, yes you want a game to be as authentic to the theme as possible, but there needs to be exaggeration for immersion and playability. For example, when a car races by you, in real life it will not have a perfect motion blur however in film and games we should add a blur effect. A city block in liberty city is quite a bit different than a city block in New York. We can’t jump 3 times our height.

 

 

11. SOLID DRAWING
The concept and principle of solid drawing is to use and draw 3 dimensions within a 2 dimensional space. Having the ability to draw a character or object from any angle and any pose can make the difference between a dull animation and a great one.
Just as in animation, solid drawing means utilizing those 3 dimensions. Not only with your characters but with backgrounds and landscape too. There also needs to be a clear indication of what is going on, which ties back to “staging”, and focusing on what is key ( keeping enough contrast between the good guys, the bad guys and their surroundings), unless your intention is camouflage or hiding in darkness.

 

12. APPEAL
This one is also very important. Appeal in a character is to give it life, charisma and a personality. This holds true for both heroes and villains. Appeal is about connecting with both the other characters and the audience.
Your characters in the game will need appeal just as much as they would in an animation. But, does the overall game have appeal? Will the game stand up in a market with similar mechanics or theme? Whatever your reason for making this game, you will need to research and market so that your game appeals to that particular demographic.
Keep in mind that these principles translated into game development are just ideas that may help others who have a passion for both industries which are really not all that far apart.