2D Animation

Above is an animation by Roland C. Crandall, a renowned Animator from the early days of animation. He animated the whole thing alone, with music by Cab Calloway. Many consider this to be the best cartoon ever made.

Many of the techniques used in the animation would be considered strange in today’s society as there are often random transformation of objects, leading to some strange events within the cartoon.

There are a few noticeable features of the cartoon, such as: animation loops, body morphing and a very creative use of inanimate objects.

As you can see in these screenshots, there is a strange use of morphing that we wouldn’t see in cartoons today. The queen appears to be powdering her nose and then once done, she throws the powderer behind her. The back of her dress strangely stretches in order to catch the powderer, a very unusual thing. This part of the animation can be seen here.

We see objects morph like this throughout the cartoon, seemingly getting weirder and weirder as the cartoon progresses.

One thing seen often through the cartoon is animation loops. Especially early on in the animation, there are many scenes where characters simply repeat the same few movements over and over until a significant event happens or there is a transition into a new scene.

Rayman Origins – Case Study

Rayman Orgins uses a very unique animation style.

You will see Squash and Stretch throughout this introduction scene, as the animators try their best to emphasise movement from the characters to add a very stylistic feel to the game.

One thing I like about the animation in Rayman is that the animators are not afraid to jump to extremes. What I mean by this is that the animators can have a regularly shaped character in one frame, then suddenly they are in a very unnaturally shaped posed.

As you can see here, these are two consecutive frames – there is quite a lot of difference between these two frames and a lot has happened. This is a great effect commonly seen throughout the game and it adds a really nice effect throughout.

2D Animation in Unity

After analysing animations made by other people, we went ahead and learned how to Animate in the Unity Game Engine.

We were handed some sprites – a hammer and a pendulum. We were then taught how to animate both a pendulum swing and a hammer strike. These were first animated at the front of the class and we gave input and suggestions on what the animations should do.

Once the demonstration was over, we tried to animate them ourselves.

 This is my recording of my animation. I also included the curve graph and dopesheet in the recording so that both can be seen.

When animating, I found that the hammer would clip through the floor. This made the animation look strange and of course I didn’t want this effect. To fix this, we had to go into the curves graph and change the tangents of our animation curves. The curves were above the starting position of the hammer, and so the animator tried to interpolate to another position, before returning back to the starting position.

This was the only problem that I experienced with the hammer animation, although to achieve the striking effect that I wanted I had to play around with the curve graphs some more.

At first, the entire animation was too smooth. It felt like the whole hammer was floating around in the air instead of being forcefully swung into the ground. I first reduced the spacing between the second anticipation swing and the actual swing so that it happened a lot faster. This made the animation look better – but it still didn’t create an effective strike.

The answer to this problem lay in the Curve graphs, I had to make the curve for the swing animation a lot steeper. This made the strike accelerate until hitting the ground where it slowed down massively, creating recoil until finally resting on the ground.

I think that this animation was good. If I were to go back and improve it, I would tweak my curve graphs so that I could create a strike with much more force and still retain a nice flow to the animation.

This is the pendulum animation.

Character Animation

We soon moved onto animating our first character, a zombie.

The zombie was handed to us on a sprite sheet that we had to piece together in Unity. This was done using the sprite editor. Getting the character set up was quite easy, we were allowed to place each piece of the character where we wanted (as long as it wasn’t too ridiculous) which allowed each of us to have a semi-unique looking character by the end.

Our first task was to create a simple idle animation. The idle animation is the animation that plays when “nothing” is happening, when there is no input from the player, when the game is “idle”. Idle animations are usually quite simple so I tried to follow suit by making the character look like it was breathing by moving the body up and down with secondary actions that made the animation look more like it was breathing (movement of the head and the arms, the head animation created it’s own secondary action with movement of the ear.)

(Insert final zombie idle animation here)

After creating the idle animation we moved onto a walk animation.

Now, how we did the animation was entirely up to us so we all had to create our own personality for the character at this point.

I wanted my character to be this slow, heavy zombie that was clearly heavy because of how slow they moved and the impact that it had with the ground.

I demonstrated this weight by having the characters leg rise slowly and then fall fast. To accompany this I had to make the character look as if the leg really did drag the body with it. I did this by adding secondary actions to the body, arms and head. The arms lowered slightly as the character was lifting it’s leg, and then lifted sharply as the foot dropped. I think that this effect was successful and improved the animation because it made the character look like it was being effected by physics and created an ‘illusion of life’.

(Insert final zombie walk animation here)

Once we had finished the idle and walk animations we had to program the animations to work with player input, you can read more about that on this page.

After programming we wanted to expand the functionality of the zombie by adding a jump. This was another simple animation for us to create and I managed to achieve a good jumping effect simply by having the legs pull further from the body and then fall inside of the body as the character is falling. I added a follow-through to this animation by having the character’s body bounce from the landing with some secondary actions in the head, arms and ear.

This was another good animation because it really emphasised the weight that I wanted to achieve with my character creating a consistent set of animations for my character, making it seem more alive than it actually is.

(Insert final zombie jump animation here)

My final zombie character with animations can be seen in this clip.

(Insert playthrough of level here)

 The 12 Principles of Animation

There are 12 principles of animation, these are rules created by animation studios such as Disney back in the early days of animation. Animators have used these rules across the years to give their animations the “illusion of life”. You will see these principles in almost every high quality animation, and mastering them is a first step in becoming a great animator. Here is a list of each principle I have learnt so far and what each one means.

Squash & Stretch 

Squash & Stretch is the principle that is used to exaggerate movement in animation. This allows the animator to portray much more of a personality in their characters and objects by making the purpose of each action easier to understand by the viewer. This is a commonly used principle in 3D animation and cartoons.

Squash and Stretch has it’s own rules too. If you are going to make an object much thinner, you must also make it wider by the same amount. The object/character that you are animating cannot lost or gain mass, otherwise the animation will look odd and unnatural.


Timing is perhaps one of the most commonly used Principles of Animation. Timing is seen in all animations possibly without the animators knowing about it.

Timing is how the animator uses their frames to change control the pace of their animation. Having a consistent speed throughout the animation will make it seem a lot more natural on a physical level, as all props/characters in the animators will appear to obey the laws of physics. This leads to a higher overall quality of animation.

Timing can also be used to highlight specific actions in a scene or to exaggerate movement. For example, having a less spacing between frames will mean your animation plays faster, this can be used in such a way to seem like it has a special effect applied to it. An example of this would be in an animation about space and time, if we wanted to create the illusion that time was moving faster, or slower – we could adjust the spacing of our frames in order to create that effect naturally. We would have to make sure that the changes were applied to each frame evenly so that scenes weren’t faster/slower in some areas than others and to make the animation appear to be much more consistently.

Ease in, Ease out

Ease in, ease out is a principle that better portrays actions such as walking or running, especially when accelerating or slowing down.

We use Ease in, Ease out effectively by having three main points in our animation, or “extremes”. We have more frames near the first extreme, the start of the animation and then fewer in the middle, then more at the end.

This creates a much more natural look for the animations and makes things such as character walk cycles seem much more realistic than they would look without the ease in, out effect.


Anticipation is the principle used to better let the viewer understand what is about to happen. It is an action used to prepare for another, much bigger action. For example, a baseball pitcher anticipates that he/she will throw a ball by pulling their arm back to increase the power of their throw, this is a natural movement and once a pitcher does this, everybody knows to expect the ball to be thrown, even the batter who is preparing to hit it.

Anticipation is important because it makes an action have a lot more emphasis and allows the viewer to prepare for what is about to happen. Without the anticipation, a lot of force on an object would seem to appear from nowhere and the action would appear to be defying the laws of physics. Animators don’t want this to happen, therefore we try our best to make sure that each action we apply on our objects has both a reason for force and an impact. Making our animations overall a much higher quality.

Secondary Action

A secondary action is an principle commonly used to make an action seem much more realistic by making the main action have an effect on something else, creating a secondary action.

An example of a secondary action would be a horse running. The horse runs, that is the main action, but then because it is running the tail is also moving, as is the mane. This is because of the opposing force wind, and the movement of both the head and bottom of the horse. In this case, the secondary action is the horse’s tail and mane moving in the wind.

Secondary actions are important because it makes the animation seem to take place in much more of a living world, with active physics that effect everything, enhancing that “illusion of life”.