How to blend cutout and traditional animation in Godot

Hello! Today I wanted to write a tutorial for animating in Godot. If you aren't familiar, Godot is an open-source game development engine that can be found here.

If you're interested in animation or game development in general, I'd recommend downloading Godot and playing around with it, it's pretty cool.

Anyway, this post is going to focus on animation. If you want to try it for yourself, Godot has documentation for their cutout animation. It is integrated directly into the engine which is awesome.

With animation, we want to look at making our games feel alive. We want our characters, monsters, and even our environments to feel like they have their own personalities and goals, just like us.

Traditional animation is a great way to animate if you have the time and skill to do so. Cutout animation is another alternative. Cutout relies on "pieces" of your characters and you animate them like a puppet rigged together. For me at least, it's quicker and I can create lots of different animations with it. Coming from a coding and design background, it's also more accessible to me.

Here is an example if the idle animation for our Leaper enemy as an example:

He's called the Leaper because, well, he leaps! More on that later. To make this animation, I worked with our artist, Tim, to design the character, and he created the pieces. Then I imported them to Godot, and created the rig and the bones, from there, you can animate anything you'd like. I won't go into too much detail here, because the basics of cutout animation in Godot are covered in the link above, as well as by many other tutorials.

Cutout is great, but there are certain things you cannot do with pure cutout animation as you move pieces across 2D space. For example, what if you want a turn animation for your 2D game character? You can just flip the character horizontally, but that's not very convincing. You would need the character to briefly look perpendicular from where they would normally look to sell the movement.

Let's look at how we tackled that exact problem- we want our Leaper to turn. For context, let's step back and look at how we executed a turn for another, simpler enemy- the Slime.

So if you watch the slime- it looks like he turns and faces the camera, then looks behind him, right? To accomplish that, we mixed traditional animation in by creating more frames.

There are two frames of his body for the turn animation. The one above being frame #2. So he looks towards the camera for frame #1, then almost behind him with frame #2 there. We also have one frame of his eyeballs that looks towards the camera. If you watch closely with the eyes for example, it looks like he whips his head around and there are multiple frames there. But it's just one frame which is pretty cool.

So this is how we blended traditional animation in to create some animations that look good and are difficult to do with pure cutout.

With that covered, let's jump back to our Leaper. For his turn, I suggested something similar to the slime. The problem is that the Leaper is much bigger. Also, he has a body and is pretty muscular. So his turn shouldn't look or feel like he's made of jello, like our Slime. Our artist proposed a cool idea- what if the Leaper whipped his tail around for a turn?

I loved this, but it had some challenges.

1. How do we make that motion work with so little frames, since his rig is more complex?
2. How do we make a quick movement that actually feels like a creature like that would move so it's not too many frames?
3. Where do we need to shift his weight and move his existing rig so it blends seamlessly?

First pass:

This is with two still-frames as well in the middle of the turn. However, two frames was not enough, so we duplicated it and made it four- 2 on one side, flip, then 2 more. So how does this look? It looks ok.

You can kind of see the motion of him whipping his tail and shifting his weight to his legs. He closes his mouth like you might clench your jaw before doing something strenuous. He also has anticipation when he sits back, then halfway through the animation lifts up slightly which makes it feel like he's not quite jumping but using the same muscles to turn quickly.

The movement is kind of stiff though, and that foot placement is all over the place. If you were doing this turn, you'd stick your feet in in the ground to pivot. Let's try again-

After several iterations, this is what I ended up with. First of all, he slides his closer arm forward, and his father arm backwards. This makes it look like he is shifting his weight to the back arm, and sticking the closer arm out to push off from. Which makes sense since he is turning to the camera left, his far side. The same movement is mirrored on the end of the animation- he sticks the leg he shifted his weight to in order to catch himself, and then resets to his normal "standing" position by sliding his legs closer together. The arms look like the track better than before just in general.

The other, more subtle, addition is the pacing. There is a brief point towards the end where his tail "hangs" in the air for some frames. If you try turning 180 degrees quickly in real life, you don't just turn the same amount evenly across the entire turn. You generate force at the beginning and move really fast at first, then slow down and catch your balance. This brief pause makes it feel like his tail is heavy, and also that he uses it to balance himself.

Conveying "weight" to an animation is a great tool to make your animations feel more believable! You may think that a couple frames don't matter, but they really do.

On a minor note- you can see how his tail slams down on the button and presses it. In Transmogrify, monsters can interact with objects such as buttons just like the player. So showing this here when you first meet the Leaper communicates that to the player. It also helps reinforce that the tail is heavy.

All that frame two drawn frames, and working with the existing rig to blend into a fluid motion. This allows the artist to move on to other assets, and I have less still-frames to work with and can rely more on the cutout rig while still building a solid animation. Best of both worlds.

Thanks for reading. If you'd like to see more posts about animation, how we designed the Leaper for art and animation, or about Godot specifically, let me know. If you want to see more content for the game, follow us on Twitter @TheTransmogrify

Have a good one!