The final animation:

2 — The importance of context when animating

Sometimes, when I’m hard at work I tend to zoom in on details and forget to consider how an animation would be experienced by our players. Here’s what I do to ensure I focus on the right things.

Setting the “Camera”

Before animating, take note of the in-game camera: the angle, the field of view, and the distance from the subject are the 3 main points to consider.

They provide the context from which players will experience the game itself, so I will setup my working environment using a similar camera and always check the readability of my work using that specific in-game perspective.

For example, the gameplay for Butter Royale uses a top-down camera, a narrow field of view, and is quite away from the character. I have to make sure my work environment reflects that.

Remembering the “Platform”

Finally, I will consider the lead platform of the game. For Butter Royale, it’s iOS, but we needed to ensure a great experience on Mac, iPad, and tvOS as well.

This means that most players will experience the game on a “small” screen, but the experience on a TV still needs to be *AWESOME*. To make sure we deliver on this I keep the following in mind:

As the character will appear small in the frame, it’s not necessary to animate a complex movement and add lots of detail. More stylized animations read better and fit well with the overall fun vibe of Butter Royale.

The readability of the silhouette, using exaggerated movements and holding key-poses.

Ensuring top-down clarity.

In Mighty Pets and Puzzles, most of the animations are viewed from the side, hence the characters animations need to look good and be readable from this angle.

3 — Starting With Key Poses and Going Into The Details

Spending time on strong key poses is more essential than spending time polishing animations. Readable, strong silhouettes are key to successful animation.

Before working on the overall timing, I try to key everything in an even number of key frames. This is so that when all keyed controllers are selected, there will be at least one keyframe gap in-between. This makes it easier to view and adjust the timing during the early phases of the animation work.

Start with something simple that works before further complicating the animation.

Richard Williams’ “Animator’s Survival Kit” covers everything one needs to know about animation. Even though I work in 3D computer animation, the 12 principles of animation are universal.

When keying the “inbetweens”, we need to consider the pacing, the followthrough, etc. just like a 2D animator would.

It’s easier when we work part-by-part, starting from the hip, to the chest, to the shoulders and arms — as the arms will be affected by the shoulders which are affected by chest and the hips.

One tip is to keep the graph clean right from the beginning: delete any unnecessary points in the graph. This will stop it from becoming too time-consuming to clean during the polishing phase.

4 — Taking Your Animations to the Next Level

Since all our characters share the same animations, the animations have to be somewhat generic. As the overall tone of the game is light-hearted and fun, I added a more exaggerated bounce on the hip — it matches the upbeat music as well!

An example of how we pushed an animation further would be the “down” animation for Squads mode. Instead of crawling, which we tested, we decided to use rolling (from all the food they’ve consumed!)

A light-hearted and self-deprecating rolling animation fits the non-violent theme of the game, while crawling seemed rather serious and cruel. Furthermore, rolling because you’re stuffed with food is more fun!

Conclusion

I use these processes everyday in my work, and I’m constantly working on improving at them as I go. I hope you will find some of them useful.

Send me your questions and let me know if there are any parts you would like to hear more about.

Happy animating!