In order to load and test animations for Catbox, I’ve created a simple animation test program in Unity, which you can try here to get a feel of how Catbox’s animations look.

The animations for Catbox make use of the 12 principles of animation, originally devised by Disney animators Frank Thomas and Ollie Johnston, and outlined in detail in this DigitalTutors article.

In this article I’ll address each of the 12 principles with examples from the Catbox animation test, to demonstrate how I’ve applied animation principles to create appealing animations for Catbox.

1. Timing and Spacing

catbox_4_hopFor the best example of changes in timing and spacing, let’s look at Catbox’s ‘hop’ animation. He crouches slowly to build up potential energy, then hops quickly into the air, leaving the ground for relatively few frames. This creates the illusion of physical effort and a release of energy from the character.

2. Squash and Stretch

All of the Catbox animations use squash and stretch to give them impression of a soft, huggable character despite his relatively angular shape. Look at the hop animation again; he squishes down to build up energy, then stretches upwards as he jumps, before squashing back down from the force of hitting the floor. This
catbox_6_sleep_loopgives a sense of weight to the character.

Let’s also look at his sleeping animation; here squash and stretch is used to give the impression of deep, restful breathing, and creates a look of softness to the character.

3. Anticipation

catbox_2_meowWe can look at the hop animation again to see anticipation in action; we can also look at the ‘meow’ animation. Here we see Catbox squashing down before he meows, giving the impression he is ‘taking a breath’ in anticipation of the action.

4. Ease in Ease Out

catbox_3_purrIf we watch the tail of Catbox during his purring animation, we can see how the tail eases in and out as it reaches the far sides of its gentle swaying motion, moving fastest as it passes the centre of the body. This gives a smooth, lifelike ‘drag’ motion, and also allows for easy looping of the animation. The same technique is used to a different effect for the angry pose, this time creating an aggressive swishing tail.

5. Follow-Through & Overlapping Action

catbox_7_angry_loopThis is again most obviously demonstrated by the movements of the tail, which tend to follow behind the animation of the body. In the hop animation, the end of the tail follows a few frames behind the body of the cat, giving the impression of a trailing appendage. You can also see this effect in the angry animation too – the cat moves his tail from the base, and the end of the tail follows through the motion behind.

6. Arcs

catbox_1_walk_loopUse of arcs in demonstrated in several of the Catbox animations. The walk cycle is effectively a series of arcs as the character pops up from one ‘corner’, rises and twists through the air, to land on an opposing corner. The cat’s tail is also controlled with arc movement; if we look at the angry animation, we can see the tail following a smooth arc across its length as it swishes from side to side.

7. Exaggeration

Exaggeration is often used in conjunction with squash and stretch to give a sense of softness and also energy to Catbox. If we look again at the hop animation, we can see exaggeration in the squash into and stretch out of the jump, as well as the way his body wobbles after landing, giving a jelly-like texture to the character.


8. Solid Drawing

Solid drawing in 3D refers to the visual clarity of each pose of an animation, ensuring the character’s intent is made clear through the pose and that no two poses are obviously identical. We can look at the differences between Catbox’s angry and sad animations to see this in action –  when angry, the character leans forward, holds his tail high to increase his size, and breathes heavily and quickly. When sad, on the other hand, he squashes down into himself, pulls his tail in and wraps it around himself as if seeking comfort, and breathes slowly and lethargically. The differences in these poses are intended to express the emotional state of the character through pose and motion alone; coupled with changes in facial expression, they give a clear idea of how Catbox is feeling.

catbox_7_angry_loop catbox_5_sad

9. Appeal

Much of the appeal of the Catbox character comes down to the ‘kawaii’ design of the character, which you can read more about in my description of his visual design. The character’s face is designed to be innately appealing, simple to read and emotionally expressive. If we compare the changes in facial expression between the purring animation, the sad animation and the angry animation, we can see this appeal in effect.

catbox_3_purr catbox_5_sad catbox_7_angry_loop

The way the character moves is also intended to generate appeal. Squash and stretch animation is used liberally to make him feel ‘squishy’ and tactile, to encourage users to interact with him. When he purrs, his body squishes and appears soft, inviting users to keep touching him.

10. Straight-Ahead and Pose-to-Pose

Most of the animation for Catbox is designed pose-to-pose, with the keyframes established in Maya first and the in-betweens worked on after. In 3D animation, this makes it easier to block out the correct timing of each animation, and usually requires less work as the software will fill in empty frames automatically, which can then be edited and tuned to refine the animation.

In the case of games it also ensures smooth looping of animations in an environment where one animation may have to play many times over, for example the walk cycle. By ensuring the first and last frames of the animation are identical it becomes much easier to ensure the animation will loop smoothly in game.

11. Secondary Action

Most of Catbox’s secondary action is again expressed through the tail, which, like a real cat, sometimes behaves as if it has a life of its own. When he’s happy, as in the purring animation, the tail bobs and sways unconsciously behind him, and when he sleeps, his tail is tucked in next to his body.

12. Staging

The staging of the animations demonstrated here will happen in game, in real time. Ensuring effective staging will require Catbox to be aware of his surroundings and to react appropriately to the objects around him. This will require an artificial intelligence system developed in Unity, which can identify the appropriate actions for the character based on the stage around him, and select actions and animations accordingly.