From 13f04519e5824af2d58656143f8a76b7e11166c0 Mon Sep 17 00:00:00 2001 From: reduz Date: Tue, 25 Nov 2014 18:19:27 -0800 Subject: [PATCH] Updated Cutout Animation (markdown) --- Cutout-Animation.md | 67 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) diff --git a/Cutout-Animation.md b/Cutout-Animation.md index f008c95..597c7ee 100644 --- a/Cutout-Animation.md +++ b/Cutout-Animation.md @@ -21,7 +21,7 @@ Godot provides a few tools for working with these kind of assets, but it's overa And much more! -### Setting up a Rig +### Making of GBot! For this tutorial, we will use as demo content the pieces of the [GBot](https://www.youtube.com/watch?v=S13FrWuBMx4&list=UUckpus81gNin1aV8WSffRKw) character, created by Andreas Esau. @@ -29,6 +29,71 @@ For this tutorial, we will use as demo content the pieces of the [GBot](https:// Get your assets [here](media/gbot_resources.zip). +### Setting up the Rig + +Create an empty Node2D as root of the scene, weĺl work under it: + +

+ +OK, the first node of the model that we will create will be the hip. Generally, both in 2D and 3D, the hip is the root of the skeleton. This makes it easier to animate: + +

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

+ +This looks good. Let's try if our hierarchy works as a skeleton by rotating the torso: + +

+ +Ouch, that doesn't look good! The rotation pivot is wrong, this means it needs to be adjusted. +This small little cross in the middle of the [Sprite](class_sprite) is the rotation pivot: + +

+ +#### Adjusting the Pivot + +The Pivot can be adjusted by changing the _offset_ property in the Sprite: + +

+ +However, there is a way to do it more _visually_. Pick the object and move it normally. After the motion has begun and while the left mouse button is being held, press the "v" key **without releasing** the mouse button. Further motion will move the object around the pivot. This small tool allows adjusting the pivot easily. Finally, move the pivot to the right place: + +

+ +Now it looks good! Let's continue adding body pieces, starting by the right arm. Make sure to put the sprites in hierarchy, so their rotations and translations are relative to the parent: + +

+ +This seems easy, so continue with the right arm. The rest should be simple! Or maybe not: + +

+ +Right. Remember your tutorials, Luke. In 2D, parent nodes appear below children nodes. Well, this sucks. It seems Godot does not support cutout rigs after all. Come back next year, maybe for 1.2.. no wait. Just Kidding! It works just fine. + +But how can this problem be solved? We want the whole to appear behind the hip and the torso. For this, we can move the nodes behind the hip: + +

+ +But then, we lose the hierarchy layout, which allows to control the skeleton like.. a skeleton. Is there any hope?.. Of Course! + +#### RemoteTransform2D Node + +Godot provides a special node, [RemoteTransform2D](class_remotetransform2d). This node will transform nodes that are sitting somewhere else in the hierarchy, by copying it's transform to the remote node. +This enables to have a visibility order independent from the hierarchy. + +Simply create two more nodes as children from torso, remote_arm_l and remote_hand_l and link them to the actual sprites: + +

+ +Moving the remote transform nodes will move the sprites, allowing to easily animate and pose the character: + +

+ + + +