Work in progress

The content of this page was not yet updated for Godot 4.1 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

Cutout animation

What is it?

Traditionally, cutout animation is a type of stop motion animation in which pieces of paper (or other thin material) are cut into special shapes and arranged in two-dimensional representations of characters and objects. Characters' bodies are usually made out of several pieces. The pieces are arranged and photographed once for each frame of the film. The animator moves and rotates the parts in small increments between each shot to create the illusion of movement when the images are played back quickly in sequence.

Simulations of cutout animation can now be created using software as seen in South Park and Jake and the Never Land Pirates.

In video games, this technique has also become popular. Examples of this are Paper Mario or Rayman Origins .

Cutout animation in Godot

Godot provides tools for working with cutout rigs, and is ideal for the workflow:

  • The animation system is fully integrated with the engine: This means animations can control much more than just motion of objects. Textures, sprite sizes, pivots, opacity, color modulation, and more, can all be animated and blended.

  • Combine animation styles: AnimatedSprite2D allows traditional cel animation to be used alongside cutout animation. In cel animation different animation frames use entirely different drawings rather than the same pieces positioned differently. In an otherwise cutout-based animation, cel animation can be used selectively for complex parts such as hands, feet, changing facial expressions, etc.

  • Custom Shaped Elements: Custom shapes can be created with Polygon2D allowing UV animation, deformations, etc.

  • Particle Systems: A cutout animation rig can be combined with particle systems. This can be useful for magic effects, jetpacks, etc.

  • Custom Colliders: Set colliders and influence areas in different parts of the skeletons, great for bosses and fighting games.

  • Animation Tree: Allows complex combinations and blending between several animations, the same way it works in 3D.

And much more!

Making of GBot

For this tutorial, we will use as demo content the pieces of the GBot character, created by Andreas Esau.

../../_images/tuto_cutout_walk.gif

Get your assets: cutout_animation_assets.zip.

Setting up the rig

Create an empty Node2D as root of the scene, we will work under it:

../../_images/tuto_cutout1.png

The first node of the model is the hip. Generally, both in 2D and 3D, the hip is the root of the skeleton. This makes it easier to animate:

../../_images/tuto_cutout2.png

Next will be the torso. The torso needs to be a child of the hip, so create a child sprite and load the torso texture, later accommodate it properly:

../../_images/tuto_cutout3.png

This looks good. Let's see if our hierarchy works as a skeleton by rotating the torso. We can do this be pressing E to enter rotate mode, and dragging with the left mouse button. To exit rotate mode hit ESC.

../../_images/tutovec_torso1.gif

The rotation pivot is wrong and needs to be adjusted.

This small cross in the middle of the Sprite2D is the rotation pivot:

../../_images/tuto_cutout4.png

Adjusting the pivot

The pivot can be adjusted by changing the offset property in the Sprite2D:

../../_images/tuto_cutout5.png

The pivot can also be adjusted visually. While hovering over the desired pivot point, press V to move the pivot there for the selected Sprite2D. There is also a tool in the tool bar that has a similar function.

../../_images/tutovec_torso2.gif

Continue adding body pieces, starting with the right arm. Make sure to put each sprite in its correct place in the hierarchy, so its rotations and translations are relative to its parent:

../../_images/tuto_cutout6.png

With the left arm there's a problem. In 2D, child nodes appear in front of their parents:

../../_images/tuto_cutout7.png

We want the left arm to appear behind the hip and the torso. We could move the left arm nodes behind the hip (above the hip node in the scene hierarchy), but then the left arm is no longer in its proper place in the hierarchy. This means it wouldn't be affected by the movement of the torso. We'll fix this problem with RemoteTransform2D nodes.

Note

You can also fix depth ordering problems by adjusting the Z property of any node inheriting from Node2D.

RemoteTransform2D node

The RemoteTransform2D node transforms nodes somewhere else in the hierarchy. This node applies its own transform (including any transformation it inherits from its parents) to the remote node it targets.

This allows us to correct the visibility order of our elements, independently of the locations of those parts in th