Published 5 years ago
Inspirations, techniques and tips from animating a papercraft world in Flat Kingdom.
Hi, I’m Sergio Ortiz, the game designer for Flat Kingdom. As we’re a small team, we all had to perform multiple tasks, so I’m also the animator of the game! Animating characters was a lot of fun, and learned a few things we believe are worth sharing.
So, first step: the art team gave us the gorgeous designs for the characters and enemies, segmented by layers and all ready to be animated.
How many pieces can you count?
There are a lot of great software options to animate almost seamlessly into Unity, but due to our inexperience we did not know any of them. We chose a process we were familiar with, basically consisted of doing all the animation in After Effects and then exported the frames to our Unity project.
There were some clear advantages, After Effects allowed us to use all the particles, cool effects and tricks the software had to offer, and since it was all just gonna be an image sequence anyway, it would always look the way we intended.
Some frames of the soldier waking up.
But on the other hand, as the project grew bigger and bigger, the sheer weight that so many individual sprites had on the game was becoming pretty apparent. In the end our great team of programmers made it work, but had we used a different method, we could have saved ourselves a lot of headaches.
Anyway, the animation process itself was very quick, primarily because all the sequences, loops and transitions that the characters would need were planned and sketched beforehand (pro tip: ALWAYS plan what you’re gonna do, not only in animation, in everything, you would be surprised of how many people fail to do this obvious thing and end up wasting a lot of time and money).
Via proper use of the anchor points, parenting, rotation, position and scale, you can accomplish a lot of good animation without using any external plugins or tools. Since the characters were supposed to look “flat” and somewhat “paper-like”, this process was chosen over traditional 2D animation.
“Nyam nyam… I’m gonna stop ya, nyam!”
This is a simple example of what I mean. I needed a possum enemy (this is one of the very first ones you’ll encounter) with a very obvious triangle shape. The base of the character is his body, so I stuck the legs, head and tail to it. That means that if the body moves, all of those pieces will move too, but also, if I want to move, say, the tail and add a little rotation to it, I can do that too, and now the tail has its own motion that gets added to the one the body provides. Just like your arm or head would do in real life.
Let’s keep focusing on the tail (I like big tails and I cannot lie), as you can see, it rotates from the bottom, not the center. When you import assets into any software, the pivot is usually defaulted to the center of the image. I needed to be at the bottom (where it connects to the body), that way I can add all sorts of movement to it and it will always look like it’s part of the main body. Otherwise it would be just floating.
The same principle is applied to the legs, feet, jaws, ears, eye, pupil and eyebrow. Think of it kind of like a tree and its branches. The body being the main trunk, with the legs, tail and head being the branches. Those branches have branches of their own (the leg has the foot, the head has the ears, etc.) This is a simple example, but you can get really creative and assemble really complex animations just by adding pieces and branches.
If you noticed, aside from rotating the pieces, I also change the size of the pieces when I need the movement to convey weight or strength. This animation principle is called “squash and stretch” and if you’re interested in professional animation I fully recommend that you take the time to read about it. The point is, I achieved a lot of animation and life with really simple and basic actions in the right place and time (animation is about rhythm, not complexity).
In addition to those (which are really basic tools), we often used the puppet tool to animate some details (which allowed us to give some characters a little bit of extra flair) and traditionally animated particles and effects (drawn frame by frame, I mean). Again, since it was all exported as sprites, there really was almost no limit in what we could and could not do with the animation.
I always liked those puffy cheeks.
Flat Kingdom has all sorts of characters: from standard human beings to all kinds of animals, monsters, bugs, warriors, sorcerers, etc. so the animations required a lot of different methods (making a person jump is not the same as making a horse jump). References help, but the fun part is to imagine how a creature that does not exist would move!
Two very different walking cycles for two very different souls.
This is what I mean. Above you can find two walking cycles for two completely different enemies. A sabertooth would not move the same way a penguin-toy-bomb would. For the tiger I used references from other big felines of course, but the main influences turned out to be horses and deers. For the penguin I tried to imagine how a clumsy winding toy would move. He has little feet, so he can’t be as graceful as the tiger, after all. Also penguins are fun.
The characters are all very bright, fun and colorful, so the animation had to have a “cartoony” feel to it. So lots of squashes and fast or impossible movements were required. There are great books and tutorials out there that can help you achieve the desired look for your own animation. Choose the one that suits your project! I would definitely recommend the Animator’s Survival Kit by Richard Williams (there’s even an animated video version!) or The Illusion of Life by Frank Thomas and Ollie Johnston. Watch a lot of cartoons over and over again, dissect the movements, watch them frame by frame. Become an expert on movement, take dancing lessons, join a sports team, adopt a pet. Animation and inspiration is everywhere!
Please, teach me Williams-sensei!
That’s all for today. I hope this was insightful and useful! Cheers and have fun with your animations!
Jesús Fabre
Public Relations|Social Media - Marketer