Lots of game have unique, hand drawn animations for every character. You can create some really awesome animations this way, but you also need a pretty big animation budget. The total number of animations you’ll need is the number of characters times the number of animated actions, so just 10 characters each with 10 actions already means you need 100 animations (and it only gets worse from there!)
Some games solve this by heavily restricting the number of actions on each character. Duelyst, an online card game with gorgeous pixel art, has just 5 actions per character (appear, idle, move, attack and die). You can actually get pretty far with this approach, but it’s still quite a heavy drain on your animation resources. The Duelyst team has multiple dedicated animators and despite that they had to release their first expansion before they finished the animations for all their cards!
Duelyst is so pretty! But we don’t all have this kind of art budget.
Another approach is to use dynamically retargeted animations. The idea here is that you make one set of master animations which are then automatically reshaped to fit the skeleton of any particular character. In this article I’ll explain how I implemented this in Unity for my own game, Patch Quest.
1) Rigging your Puppets
Every character in Patch Quest has a modular “Puppet” that describes how it looks and behaves. The puppet is made out of “Bricks” (think: Lego) that are attached by “Pins”. Below you can see the puppet for a human, which is actually my most complex puppet so far. It’s made out of 6 primary bricks: a torso, head, 2 arms and 2 legs.
Each of these pins is assigned an animation channel (shown in the black boxes). These will be used later to describe how the puppet moves in addition to how it looks.
The head brick is actually subdivided further! It has hair, 2 eyes, a nose and a mouth. One of the big benefits of putting these on separate bricks is you can mix and match their graphics. I made 16 different variants for each of these bricks, which can all be independently combined to create hundreds of unique faces.
The eyes and mouth also have animation channels so I can animate blinking and talking. But the nose and hair don’t need a channel because they aren’t animated.
By keeping my source graphics white, I can multiply them with a color to create a wide variety of different hair and skin tones from a single image.
Each brick can also have a bonus graphic layered on top of it. Here, I’ve applied some clothing images to the human. So long as you’re careful to keep the image dimensions equal it should look good!
Phew! That’s our puppet built and rigged. You could add all sorts of other features to your puppets, but these are the basic ones that I’ve implemented in Patch Quest. Below you can see one possible variant of this puppet. Isn’t he handsome?
I use one Unity GameObject for each brick, and two for each pin (one for the “inlet” and one for the “outlet”, shown in yellow and blue on previous images). This lets you rotate and scale each “bone” in your skeleton independently. Each clothing image also has its own object. In total this character uses about 30 GameObjects, which isn’t a small number but it isn’t huge either (Unity can comfortably handle a few thousand GameObjects at once if they aren’t too complex).
These GameObjects are all created automatically based on a “blueprint” I provide. Below you can see the code that describes my human blueprint. I’m basically just connecting the various bricks into a tree and tagging them with animation channels, colors and other metadata. I arrived at a lot of the scaling and positioning numbers by trial and error (a visual editor would be lovely, but as always these things take time and money to create).
Okay, so we can see the puppet now. But how do we make it move?
2) Making the Master Animations
To make my animations I’m using Spine, a popular 2D animation tool that’s compatible with all major game engines including Unity. the Essentials version is pretty cheap, too! I built a master skeleton inside spine (which looks like a human, since humans have the most complex animations in my game) and animated all the actions that any character can perform. I actually have over 50 different animations and growing, which would be impossible if I had to make unique animations for every character.
I then export these animations in JSON format and use the Spine Unity Runtime to import them into Unity. Normally you would then attach these imported animations to a Prefab and you’d be ready to go! But we’re going to do some post-processing on them that allows us to retarget them to all sorts of different characters – not just humans.
3) Retargeting the Animations
This next section is a little bit technical. Put on your engineering caps!
The imported spine animations are made out of several “Timelines”, one for each bone in your master skeleton. Instead of just applying the entire animation to a Prefab, we want to manually apply the relevant timelines to particular bones in our puppet. These bones could be in different places on the puppet (or might not exist on this puppet at all), and the retargeting system will adapt the animation to fit. Here’s how the magic happens:
First, I mapped each animation channel in my puppet to a particular bone in my master puppet. So the “Arm (L)” animation channel maps to the “ArmL” bone, the “Head” animation channel maps to the “Head” bone and so on.
I also mapped each animation channel to a list of Pin GameObjects that are tagged with that channel (I build this map automatically as the puppet is instantiated inside my Unity scene).
I can now take a particular Spine animation and a particular puppet, and map each timeline inside the animation to a set of relevant GameObjects. I can then apply the timeline to these GameObjects, animating the Puppet regardless of where its bones were placed.
Okay, the technical details are over. You still with me?
Let’s see an example of this in action. Below is the Hermit Crab creature from Patch Quest. Its skeleton is pretty different from a human, but I still animate it using the exact same set of master animations. The crab has arms (in slightly different locations), but no legs (or rather, the legs aren’t on their own brick and are therefore animated as part of the torso). It does, however, have a shell that’s tagged with the “wiggle” animation channel.
The “wiggle” channel? Our master skeleton didn’t have that!
Yes, indeed! This is another benefit of animation retargeting system – we can slot in bonus animations if a character has some kind of unique feature, like this shell. The wiggle animation channel just applies a slight wiggle to the brick at all times (using a simple Sin curve), making the character seem more lively. Since this animation is so simple, it doesn’t need to read from any timelines.
You could get creative with these custom channels. For example, you could have a spin channel that you apply to a windmill’s sails, making it slowly rotate regardless of any other animations the windmill is doing right now.
Okay! Time to see the result of all our hard work. Here’s a little GIF of the retargeted “run” animation on 2 different puppets.
Considering how different the human and the crab look, I’d say this isn’t too shabby. It won’t win any animation competitions, but it will save you a boatload of time. It me took a while to set up the Puppet and Animation Retargeting systems, but I can now create fully animated characters with ease. And if a character does need some bespoke animations (maybe because it has a unique special move) I can also be confident those animations will look good on all other characters in the game. When you consider Patch Quest has a dozen creatures and counting, each with over 50 different animations, I’ve already saved making hundreds of animations and that number will only grow with time.
This kind of animation system can work in a variety of 2D games and can also be extended in a whole bunch of different ways, depending on your needs. If you’re making a 2D game, why not give something like this a try?
If you enjoyed this article, how about reading some of my other ones? (like this article on software architecture for turn based games). And if you want to learn more about Patch Quest, you can watch this video.