剪纸动画

它是什么？

传统意义上，剪影动画 <https://en.wikipedia.org/wiki/Cutout_animation>`__是一种`定格动画 。在剪影动画中，人们把纸片（或者其他的薄材料）剪成特殊的形状，来组合成角色和物体的二维形象。角色的身体通常是由几个部件组成的。这些部件在动画的每一帧中形成一种组合，之后对其摄影。动画制作者在两次摄影之间将这些部分进行很小幅度的移动和旋转，这样，当这些摄影的画面以很快的速度连续依次播放时，就可以造成这些角色和物体在连续运动的假象。

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

在视频游戏中，这种技术也变得流行。 例如 Paper Mario 或 Rayman Origins 。

Cutout animation in Godot

Godot提供了一些工具，用于剪纸动画的绑定，而且是工作流的理想选择：

• 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.
• 混合动画风格:动画精灵允许将传统赛璐璐动画与剪纸动画一起使用。在赛璐璐动画中，不同的动画帧使用完全不同的绘图，而不是相同的片段位置不同。在其他基于剪纸的动画中，赛璐璐动画可以选择性地用于复杂的部件，例如手、脚、改变面部表情等。
• 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.

以及更多！

制作 GBot

在本教程中，我们将使用由Andreas Esau创建的 GBot 角色作为演示。

获得您的资源: gbot_resources.zip。

设置装配

创建一个空的Node2D作为场景的根，我们将在它下面工作:

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:

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:

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.

The rotation pivot is wrong and needs to be adjusted.

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

调整枢轴

可以通过更改Sprite中的 offset 属性来调整pivot:

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

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:

左臂有些问题。在二维中，子节点出现在父节点的前面：

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.

注解

还可以通过调整从二维节点继承的任何节点的Z属性，来修复深度排序问题。

RemoteTransform2D节点

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 the cutout hierarchy.

创建一个“远程二维变换”节点作为躯干的子节点。命名为“remote_arm_l”。在第一个节点中创建另一个远程二维变换节点，并将其命名为“remote_hand_l”。使用两个新节点的“远程路径”属性，分别指向“arm_l”和“hand_l”精灵：

Moving the RemoteTransform2D nodes now moves the sprites. So we can create animations by adjusting the RemoteTransform2D transforms:

完成骨架

按照其余部分的相同步骤完成骨架。 生成的场景应该类似于:

生成的装备很容易制作动画。 通过选择节点并旋转它们，您可以有效地为前向运动学(FK)设置动画。

For simple objects and rigs this is fine, but there are limitations:

• Selecting sprites in the main viewport can become difficult in complex rigs. The scene tree ends up being used to select parts instead, which can be slower.
• 反向动力学（IK）对于手和脚等肢体的运动非常有用，目前我们的绑定还无法使用。

To solve these problems we’ll use Godot’s skeletons.

骨架

在Godot中，有一个在节点之间创建“单根骨”的辅助工具。骨连接节点称为骨架。

As an example, let’s turn the right arm into a skeleton. To create a skeleton, a chain of nodes must be selected from top to bottom:

然后，单击Skeleton菜单并选择 Make Bones 。

This will add bones covering the arm, but the result may be surprising.

为什么这只手缺少一根单根骨？在Godot中，使用单根骨把节点和它的父节点连接起来。当前没有手节点的子节点。有了这些知识，让我们再试一次。

第一步是创建端点节点。 任何类型的节点都可以，但是 Position2D 是首选，因为它在编辑器中可见。 端点节点将确保最后一个骨骼具有方向。

现在选择整个链，从端点到手臂并创建骨骼:

结果类似于骨架更多，现在可以选择手臂和前臂并设置动画。

为所有重要的末端创建端点。为剪纸的所有可关节部分生成骨骼，臀部是它们之间的最终连接。

You may notice that an extra bone is created when connecting the hip and torso. Godot has connected the hip node to the scene root with a bone, and we don’t want that. To fix this, select the root and hip node, open the Skeleton menu, click clear bones.

您最后的场景应该是这样的：

You might have noticed a second set of endpoints in the hands. This will make sense soon.

Now that the whole figure is rigged, the next step is setting up the IK chains. IK chains allow for more natural control of extremities.

IK链

IK 是反向动力学（Inverse Kinematics）的缩写，给手部、足部以及其它肢体的动画带来便利。想象一下，您想要将角色的脚放在地面上的特定位置。 如果没有 IK 链，脚的每次运动都需要旋转和定位其他几个骨骼（至少得涉及大腿及小腿）。 这将非常复杂并导致不精确的结果。

反向动力学（IK）允许我们直接移动脚，同时小腿和大腿可以自我调整。

To create an IK chain, select a chain of bones from endpoint to the base for the chain. For example, to create an IK chain for the right leg, select the following:

然后为IK启用此链。 转到编辑>制作IK链。

结果，链的基部将变为 黄色。

一旦IK链设置完毕，抓住任何链基（例如脚部）的任意嵌套子节点并移动。你会看到链的剩余部分跟随你的移动调整位置。

Animation tips

The following section will be a collection of tips for creating animation for your cutout rigs. For more information on how the animation system in Godot works, see 动画.

Setting keyframes and excluding properties

Special contextual elements appear in the top toolbar when the animation editor window is open:

The key button inserts location, rotation, and scale keyframes for the selected objects or bones at the current playhead position.

通过切换关键帧按钮左边的“位置”、“旋转”和“缩放”按钮，可以修改其功能，允许您指定将为三个属性中的哪一个创建关键帧。

下面是一个例子，说明如何使用其的:假设您有一个节点，其中已经有两个关键帧只对其缩放进行动画。您想在同一个节点重叠添加旋转移动。旋转运动应该在不同的时间开始和结束，与已经设置的缩放变化不同。在添加新关键帧时，可以使用切换按钮，只添加旋转信息。这样，您就可以避免添加不需要的缩放关键帧，破坏现有的缩放动画。

Creating a rest pose

将休息姿势视为默认姿势，当游戏中没有其他姿势处于活动状态时，应该将其设置为剪纸绑定。创造一个休息姿势如下：

1. Make sure the rig parts are positioned in what looks like a “resting” arrangement.

1. Create a new animation, rename it “rest”.
2. Select all nodes in your rig (box selection should work fine).

4. Make sure the “loc”, “rot”, and “scl” toggle buttons are all active in the toolbar.

5. Press the key button. Keys will be inserted for all selected parts storing their current arrangement. This pose can now be recalled when necessary in your game by playing the “rest” animation you’ve created.

只修改旋转

当制作剪纸动画绑定时，通常只需要改变节点的旋转。很少使用位置和比例。

So when inserting keys, you might find it convenient to have only the “rot” toggle active most of the time:

This will avoid the creation of unwanted animation tracks for position and scale.

Keyframing IK chains

When editing IK chains, it’s not necessary to select the whole chain to add keyframes. Selecting the endpoint of the chain and inserting a keyframe will automatically insert keyframes for all other parts of the chain too.

视觉上移动父级后面的精灵

有时，在动画过程中，需要让节点相对于其父节点更改其可视深度。想象一个面对镜头的角色，他从背后拿出一个东西放在面前。在这个动画过程中，整个手臂和他手中的物体都需要改变相对于角色身体的视觉深度。

为了帮助解决这个问题，在所有二维节点继承节点上都有一个可制作关键帧的“在父级之后”属性。当规划你的绑定，考虑它需要执行的动作，并考虑如何使用“在父级之后”和/或远程二维变换节点。它们提供重叠的功能。

为多个关键帧设置缓动曲线

To apply the same easing curve to multiple keyframes at once:

1. 选择相关的关键帧。
2. Click on the pencil icon in the bottom right of the animation panel. This will open the transition editor.
3. In the transition editor, click on the desired curve to apply it.

二维骨骼变形

骨骼变形可以用来增加一个剪纸绑定，允许单个部件有组织地变形(例如，像昆虫走路时摆动的触角一样)。

这个过程在:参考:’单独教程<文档_二维骨骼>’中描述。