Animation Guide

Relatively speaking, 2D animation is very new, at only a hundred years old. Even though it has only been around for such a short time, it has evolved dramatically since it is conception. It mainly came into form in the 1920s, where the first popular 2D characters grabbed hold of people’s hearts.

Characters like Felix the Cat, Oswald the Lucky Rabbit, and Steamboat Willy’s Mickey Mouse defined 1920s animation. With their simple design and loveable personalities, they were instant favorites. Their popularity is due primarily to the techniques and tricks their animators used to bring them to life.

You have likely heard of the principles of animation. Some of the most essential techniques of 2D animation were defined in the 1920’s era. While the 12 principles of animation were only established in the 1980s by two Disney animators, we can still apply those techniques to Monochrome’s 1920s aesthetic.

Please watch this video on the 12 principles of animation:

Now that you understand the principles of animation, it is time to nail down the essential aspects of Monochrome’s style, as well as the processes you can employ to make your work shine.

Animation Elements

Rubber Hose

Rubber hose animation is one of the defining aspects of early animation. The defining quality of it is rubber-hose-like limbs. These are simple flowing lines that lack joints and sharp corners. It is a far simpler technique to employ than fully articulating the motion of a limb.

In the image above, you can see this technique in full effect. While not very realistic, it is incredibly expressive and delightfully goofy.

In the image above, the body of the character is largely unchanged with each frame, it’s the stretching and bending of their limbs that give a sense of action and weight.

In the image above you can see how traditional arm and wrist bends are translated to rubber-hose.

Use the rubber-hose style to more easily animate complex actions and motions!

Squash & Stretch

Squash & Stretch is one of the most important aspects of all types of animation. It is the foundation for movement and weight transfer. Without it, animations are stiff and lifeless. If there is motion, there is build-up, release, and return.

In the graphic above, when the slider is to the left, there is no Squash & Stretch and when it is to the right, there is. Notice how much more expressive the latter is. Avoiding rigidity is crucial to the 20s aesthetic.

You can ensure you have proper squash & stretch with an animation by analyzing weight transfer.

References

If you haven’t watched Steamboat Willie before now’s the perfect time! See the animation that started it all!

Important Takeaways:

  • Simplistic Characters
    • Characters aren’t overly detailed
  • Simple Detailing
    • Environment and decorations are simple and don’t detract from the most important part… the characters!
  • Rubber Hose and Squash & Stretch
    • Through rubber-hosing and squash and stretch, character actions are more easily animated while still having a strong visual impact

While The Jealous Fisherman came before Steamboat Wille, and it is a little cruder, it is more characteristic of animations in the early to mid-twenties.

Important Takeaways:

  • Simple Animations
    • Characters don’t move when they don’t have to, limbs move the most (Rubber Hose)
    • Animations are largely defined by action and reaction, keeping things simple
  • Simple Detailing
    • Environments are minimal on detail to not distract from characters

Animation Process

Now that you understand the 20s style, let’s break down the steps you need to take a character from thought, to being fully animated.

  1. Find reference for the asset
  2. Visualize the character/art design in your head
  3. Act it out
  4. Keyframe
  5. Breakdown
  6. Idle Animations as the Model Sheet
  7. Gather Feedback

1. Find Reference

This is one of the most important steps in any artistic venture. If you have an idea in mind, try and pull from other sources you find similar. These references will help you look at your designs more holistically. Try to find at least 3 references for each asset you take on. If you feel like you can’t find something directly related, pull from the elements you want your design to meet.

Goals:

  • Find a visual reference:
    • Visual style? Similar build? Similar hair? Body-shape?
  • Find a reference with similar characteristics:
    • Emotional Characteristics
      • Are they also hot-headed? Shy? Bold?
    • Expressive Characteristics
      • Are their features exaggerated?
    • Narrative Characteristics
      • Do they think the same? Have the same goals? Like similar things?
  • Find a direct reference:
    • Find the closest thing you can to what you have envisioned!
    • If you can’t think of an original design, find a character you like and make it your own!

2. Visualize

Once you have an idea of what references you want to pull from, or you have your own ideas, visualize your design in all the ways you can think of. It’s incredibly helpful if you understand your character on a fundamental level.

Ask yourself:

  • What’s their personality like?
    • What kinds of emotions are they going to express?
  • What are their motions like?
    • How will they move?
    • Are they clumsy or nimble, or something in-between?
  • What are their defining characteristics?
    • Think of clever ways to make your character unique!
    • What elements of their design aren’t important?

Your goal with this exercise is to take your design and make a character, in every sense of the word. Don’t be afraid to exaggerate their features or design.

Once you have an idea in your head draw it out!

3. Act It Out

Here’s the part where you get off your butt and look silly!

If you can do this in front of a mirror, even better!

One of the most important parts of the animation process is to put yourselves in the shoes of your character! If you can, it helps to record yourself to help you visualize all movements you need to capture.

Make sure to over exaggerate! This will help you pinpoint all the important motions you need to express in order to Keyframe your animation.

Take a look at this video showing the animation process an animator for the movie Frozen utilized to breath life into this scene:

4. Keyframing

The image above is a great example of keyframing. The three poses above largely define all the key aspects the animation will contain.

First you want to define your key poses, also known as extremes.

As an example, the character above is sleeping; more specifically snoring. To capture this with an animation we need three different poses. The first is rest, the second is drawing of breath, and the third is exhalation. With those key frames defined we can go on to the next step of breaking down the animation!

Further Reading:

https://www.utdallas.edu/atec/midori/Handouts/keyframing.htm

When it comes to more humanoid-like characters, a great place to start is with the skeleton and Line of Action.

Remember! The goal of keyframing is to define all major frames of a characters action! When looking at all of your keyframes, you should understand exactly what your character is trying to do.

5. Breakdowns

Breakdowns are where we layout the animation down to each frame. Things to keep in mind when beginning breakdowns is:

  1. How many frames do I need? (In the case of Monochrome you should be shooting for 16 frames)
  2. How do I trim unnecessary frames to create a greater impact/effect?
  3. What details are important to highlight, and which are important to hide?

As you can see in the image above, when the slider is to the left, it lacks any kind of punchiness. This is largely because it’s moving a small distance, and it’s also evenly animated on the rise and fall. When the slider is to the right, it has far more impact because the animator chose to highlight the important aspects of the animation. These include the the build anticipation (before the jump), the hang time in the air, and the impact with the ground.

As you can see in the image above, it’s good to have a windup to the action the character will make. This as a whole, leads to a punchier animation.

The image above demonstrates the important keys you need to hit in order to make a punch animation.

As you can see in A, the animation is distributed evenly between the draw and release of the arm. While in B, the wind up, and release of the arm are emphasized. This is a far stronger way to animate an action.

If you choose to extend animations with unnecessary frames, there is more room for visual dissonance. This is when one expects to see something, and they see something different. This is a very easy mistake to make when you are overly animating a character. The saying ‘less is more’ applies to this scenario. You can easily rely on the filling-in phenomena (link below) to make your animations have greater impact and realism.

Further Reading:

(Site below includes many other valuable pages, be sure to check them out for more info!)

https://sites.google.com/site/diegodepalacioanimation/animation-books/animator-s-survival-kit/a-introduction/03-key-extreme-inbetween-and-breakdown-frames

https://en.wikipedia.org/wiki/Filling-in

https://www.flandershealth.us/conscious-brain/visual-dissonance.html

6. Idle Animation as the Model Sheet

A model sheet is essentially a template for character designs. It serves as a key when creating new animations for a character. However in game design we take this one step further. Instead of having a static model sheet, our model sheet is the idle animation.

The idle animation needs to be treated as the cornerstone for all animations you make. An animation must begin from the idle animation and it must return to the idle animation in order to have a continuous looping animation.

7. Get Feedback

Our goal is to help guide you through all aspects of the process of creating art! Be sure to get feedback earlier than later, and don’t be afraid to ask questions!

Below is a simple breakdown of the steps you need to take when creating an asset.