剪纸动画

Work in progress

The content of this page was not yet updated for Godot 4.2 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.

剪纸动画

它是什么？

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

现在可以用软件制作剪纸动画的模拟，如《南方公园》和《杰克与梦幻岛海盗》。

在视频游戏中，这种技术也变得流行。例如《纸片马里奥》或《雷曼起源》。

Godot 中的剪纸动画

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

动画系统与引擎完全集成：这意味着动画可以控制的不仅仅是物体的运动。纹理、精灵大小、轴心、不透明度、颜色调制等都可以进行动画和混合。
混合动画风格 ：AnimatedSprite2D 允许将传统赛璐璐动画与剪纸动画一起使用。在赛璐璐动画中，不同的动画帧使用完全不同的绘图，而不是相同的片段位置不同。在其他基于剪纸的动画中，赛璐璐动画可以选择性地用于复杂的部件，例如手、脚、改变面部表情等。
自定义形状元素 : 可以用 Polygon2D 创建自定义形状, 允许UV动画, 变形等.
粒子系统 : 剪纸式动画配件可以与粒子系统相结合, 这对魔法效果, 喷气背包等很有用.
自定义碰撞器：在骨架的不同部位设置碰撞器和影响区域，非常适合 Boss 和格斗游戏。
动画树 : 允许在几个动画之间进行复杂的组合和混合, 与3D动画的工作方式相同.

以及更多！

制作 GBot

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

在此获取你的资源：cutout_animation_assets.zip 。

设置装配

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

模型的第一个节点是臀部。一般来说，无论是 2D 还是 3D，臀部都是骨架的根部。这使得它更容易制作动画：

接下来将是躯干, 躯干需要是臀部的子级, 所以要创建一个子级精灵, 并加载躯干纹理, 然后适当地调整它:

这看起来不错。让我们通过旋转躯干来看看层次结构是否能像骨架一样工作。可以按 E 进入旋转模式，然后用鼠标左键拖动。要退出旋转模式，请按 ESC。

旋转轴心错误，需要调整。

Sprite2D 中间的这个小十字就是旋转轴心：

调整轴心

可以通过更改 Sprite2D 中的 offset 属性来调整轴心：

轴心也可以进行可视化的调整。将鼠标悬停在所需的轴心点上时，按 V 移动所选 Sprite2D 的轴心。工具栏中还有一个工具也有类似的功能。

继续添加身体部件, 从右臂开始. 确保将每个精灵放在其在层次结构中的正确位置, 其旋转和平移都是相对于其父级而言的:

左臂有些问题. 在二维中, 子节点出现在父节点的前面:

我们希望左臂出现在臀部和躯干的后面 . 我们可以将左臂节点在场景层次结构中移到臀部节点上面, 但这样一来, 左臂在层次结构中的位置就不对了, 这意味着它不会受到躯干移动的影响. 我们用 RemoteTransform2D 节点来解决这个问题.

备注

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

RemoteTransform2D 节点

RemoteTransform2D 节点对层次结构中其他地方的节点进行变换. 这个节点将自己的变换, 包括它从父节点继承的任何变换, 应用到它所针对的遥控节点.

这使我们能够修正元素的可见性顺序, 这些部分独立于在剪裁层次结构中的位置.

创建一个 RemoteTransform2D 节点作为躯干的子节点。命名为 remote_arm_l。在第一个节点中再创建一个 RemoteTransform2D 节点并将其命名为 remote_hand_l。让这两个新节点的 Remote Path 属性分别指向 arm_l 和 hand_l 精灵：

移动 RemoteTransform2D 节点现在可以移动精灵. 所以可以通过调整 RemoteTransform2D 变换来创建动画:

完成骨架

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

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

对于简单的物体和装配来说已经足够了, 但仍然有限制:

在复杂的装配中, 在主视口中选择精灵会变得很困难. 场景树最终被替代, 用来选择部件, 这可能会比较慢.
反向动力学（Inverse Kinematics、IK）对于手脚等肢体的运动非常有用，目前我们的绑定还无法使用。

为了解决这些问题，我们将会使用 Godot 的骨架。

骨架

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

举个例子，让我们把右臂变成一个骨架。要创建一个骨架，必须从上到下选择节点链：

然后单击“骨架”菜单并选择 制作骨骼。

这将增加覆盖在手臂上的骨头, 但结果可能令人惊讶.

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

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

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

结果更像骨架了，现在可以选择手臂和前臂并设置动画。

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

你可能会注意到，在连接臀部和躯干时，会多出一根骨骼。Godot 用骨骼将臀部节点连接到了场景根部，我们不希望这样。要解决这个问题，选择根部和臀部节点，打开“骨架”菜单，点击 清除骨骼。

你的骨架最后看上去应该是这样的：

你可能已经注意到了手上的第二组端点. 这很快就会有意义.

现在整个人物已经装配好了，下一步就是设置 IK 链。IK 链可以更自然的控制四肢。

IK 链

IK 是反向动力学（Inverse Kinematics）的缩写，给手部、足部以及其它需绑定肢体（例如我们刚刚制作的那个）的动画带来便利。想象一下，你想要将角色的脚放在地面上的特定位置。如果没有 IK 链，脚的每次运动都需要旋转和定位其他几个骨骼（至少得涉及大腿及小腿）。这将非常复杂并导致不精确的结果。而 IK 允许我们直接移动脚，同时小腿和大腿进行自我调整。

备注

Godot 中的 IK 链目前仅在编辑器中可用 ，而在运行时不可用。它们旨在简化设置关键帧的过程，目前对于程序动画等技术没有用处。

要创建 IK 链，请选择从端点到链基的骨骼链。例如，要为右腿创建一条 IK 链，选择以下：

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

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

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

动画提示

下一节将是创建剪纸动画的技巧集合。关于 Godot 中的动画系统如何工作的更多信息，请参阅动画功能介绍。

设置关键帧和排除属性

当动画编辑器窗口打开时, 特殊的上下文元素会出现在顶部工具栏中:

按键按钮在当前游戏开始位置为选定的对象或骨骼插入位置, 旋转和缩放关键帧.

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

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

创建放松姿势

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

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

创建一个新动画, 重命名为 “rest”.
选择装配中的所有节点(应该可以框选).

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.