12 Principles of Animation in Games

You may have heard about the famous 12 principles of animation. Two Disney animators formulated and introduced them in 1981. These principles are really important if you care about how the animation looks in your movie or game.

In Amazin Escape, the game I am working on now, the main protagonist is a jumping lamp. It jumps all the time and certainly different kinds of animations are an essential part of the game. When I worked on them I tried to follow the principles thoroughly.

But to follow them means to understand them. And reading the wiki page is not enough. But the good thing – I found a nice tutorial on youtube by Alan Becker: 12 Principles of Animation (Official Full Series)

Animation Tutorial by Alan Becker

In this article, I am going to show how I employed these 12 principles in my game. Let’s dive in!

1. Squash & Stretch

When you deal with simple 3D objects like a lamp from my game, you cannot apply the principle in a straightforward way: the lamp cannot change its shape – it is a mesh with a skeleton and a rig. But instead, you squash and stretch its skeleton. Look how the lamp crouches before jumping. And then it stretches to make the jump higher.

2. Anticipation

Watch the clip above again. Notice how the lamp ducks a little bit when moving from the idle pose to jumping. That is anticipation. But there is a trade-off in video games. You either let a player anticipate a move or make the character responsible. I chose the former. But that does not always mean good. In my case, it does not matter – since the lamp is idle only at the beginning of the game, so I used that principle only once.

3. Staging

I believe this principle is hard to follow sometimes. Think about games like Dota or Starcraft or any other game where a lot of animated game objects present on the screen at the same time. How do you highlight a protagonist if there is no protagonist?

For my game it is easier – the lamp is a central character of the game. I put it in the spotlight. I adjusted the camera, so it cropped out extra space.

4. Straight Ahead/Pose to Pose

Does this applicable to 3D animation? Yes, it does. I am getting familiarized myself with Blender, so I might missing some better techniques. But I have to animate each frame in between 2 keyframes (44 and 66 on the video below) in order to animate this flip forward properly:

5. Follow Through & Overlapping Action

My lamp does not have any loose parts which could drag behind it. But on the other hand, there is a camera which represents the player. And adding some drag to the camera certainly makes you feel inertia. in UE4 it is easy – Spring Arm Component has a camera lag property.

6. Slow In & Slow Out

Oh, this is a good one! I used it in all my animations. Don’t forget about Bezier curves, play with them and see how they change your animations for the better.

Blender Graph Editor

Blender even has even a designated Graph Editor to do this kind of work.

7. Arcs

I think Unreal Engine took care of this one for me when I employed its character jump system, so nothing can really add to it. Please, have a look at my previous post – you may find a lot of useful info about UE4 character jump physics.

8. Secondary Action

Secondary action is also one of important principles of animation, no matter whether you are working on a movie or in gamedev.

I feel guilty about not using this principle at all. My lamp game is pretty simple, so adding more dimensions to the main character means significantly increasing the development time of this small game.

9. Timing

There is a lot that can be said about timing. For instance, using “drawing on twos” can add a “stop-motion” feel to your game. I haven’t used that. But instead for certain animations, I increased framerate to 60fps, overwise it would be hard to animate fast-paced flipping animations:

10. Exaggeration

I haven’t used this one at all. Quite the opposite – it gives the game a cartoonish feel which does not really fit the overall style. For instance, when the lamp falls to its death, it bounces a bit. I thought about this principle when animating the bounce. But exaggeration made it look silly, so I animated it in a more natural way.

11. Solid Drawing

The wiki says: The principle of solid drawing means taking into account forms in three-dimensional space, or giving them volume and weight. Well, my game is already in 3D, so I think I’ll skip this one.

12. Appeal

How can a cute jumping lamp not be appealing?

These are the famous 12 principles of animation. Do you think I was able to successfully apply them to my game? Share your thoughts in the comments. Have a final look at the animations in Amazin Escape in action.

And follow my twitter if you find the game interesting – I post regular updates on the status there.

Leave a Reply

Your email address will not be published. Required fields are marked *