Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

剪纸动画

它是什么?

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

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

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

Godot 中的剪纸动画

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

  • 动画系统与引擎完全集成:这意味着动画可以控制的不仅仅是物体的运动。纹理、精灵大小、轴心、不透明度、颜色调制等都可以进行动画和混合。

  • 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.

  • 自定义形状元素 : 可以用 Polygon2D 创建自定义形状, 允许UV动画, 变形等.

  • 粒子系统 : 剪纸式动画配件可以与粒子系统相结合, 这对魔法效果, 喷气背包等很有用.

  • 自定义碰撞器:在骨架的不同部位设置碰撞器和影响区域,非常适合 Boss 和格斗游戏。

  • 动画树 : 允许在几个动画之间进行复杂的组合和混合, 与3D动画的工作方式相同.

以及更多!

制作 GBot

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

../../_images/tuto_cutout_walk.gif

Get your assets: cutout_animation_assets.zip.

设置装配

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

../../_images/tuto_cutout1.png

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

../../_images/tuto_cutout2.png

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

../../_images/tuto_cutout3.png

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

../../_images/tutovec_torso1.gif

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

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

../../_images/tuto_cutout4.png

调整轴心

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

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

../../_images/tuto_cutout6.png

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

../../_images/tuto_cutout7.png

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

备注

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

RemoteTransform2D 节点

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

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

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

../../_images/tuto_cutout9.png

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

../../_images/tutovec_torso4.gif

完成骨架

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

../../_images/tuto_cutout10.png

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

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

  • 在复杂的装配中, 在主视口中选择精灵会变得很困难. 场景树最终被替代, 用来选择部件, 这可能会比较慢.

  • 反向动力学(Inverse Kinematics、IK)对于手脚等肢体的运动非常有用,目前我们的绑定还无法使用。

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

骨架

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

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

../../_images/tuto_cutout11.png

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

../../_images/tuto_cutout12.png

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

../../_images/tuto_cutout13.png

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

The first step is creating an endpoint node. Any kind of node will do, but Marker2D is preferred because it's visible in the editor. The endpoint node will ensure that the last bone has orientation.

../../_images/tuto_cutout14.png

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

../../_images/tuto_cutout15.png

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

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

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

../../_images/tuto_cutout15_2.png

您的骨架最后看上去应该是这样的:

../../_images/tuto_cutout16.png

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

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

IK 链

IK stands for inverse kinematics. It's a convenient technique for animating the position of hands, feet and other extremities of rigs like the one we've made. Imagine you want to pose a character's foot in a specific position on the ground. Without IK chains, each motion of the foot would require rotating and positioning several other bones (the shin and the thigh at least). This would be quite complex and lead to imprecise results. IK allows us to move the foot directly while the shin and thigh self-adjust.

备注

IK chains in Godot currently work in the editor only, not at runtime. They are intended to ease the process of setting keyframes, and are not currently useful for techniques like procedural animation.

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

../../_images/tuto_cutout17.png

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

../../_images/tuto_cutout18.png

结果,链的基部将变为黄色

../../_images/tuto_cutout19.png

Once the IK chain is set up, grab any child or grand-child of the base of the chain (e.g. a foot), and move it. You'll see the rest of the chain adjust as you adjust its position.

../../_images/tutovec_torso5.gif

动画提示

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

设置关键帧和排除属性

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

../../_images/tuto_cutout20.png

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

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

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

创建放松姿势

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

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

  1. 创建一个新动画, 重命名为 "rest".

  2. 选择装配中的所有节点(应该可以框选).

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.

../../_images/tuto_cutout21.png

只修改旋转

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

因此, 在插入键时, 你可能会发现在大多数时间里只有 "rot" 切换键处于激活状态, 会很方便:

../../_images/tuto_cutout22.png

这将避免为坐标和缩放创建不必要的动画轨道.

关键帧IK链

编辑IK链时, 不需要选择整个链来添加关键帧. 选择链的端点并插入关键帧将自动为链的所有其他部分插入关键帧.

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

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

为了帮助解决这个问题,在所有 Node2D 的派生节点上都有一个可制作关键帧的“Behind Parent”(在父级之后)属性。规划绑定时,请考虑它需要执行的动作,并考虑如何使用“Behind Parent”和/或 RemoteTransform2D 节点。它们提供重叠的功能。

../../_images/tuto_cutout23.png

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

要将同一缓动曲线同时应用于多个关键帧:

  1. 选择相关的关键帧.

  2. 点击动画面板右下角的铅笔图标. 这将打开过渡编辑器.

  3. 在过渡编辑器中, 点击所需曲线进行应用.

../../_images/tuto_cutout24.png

2D 骨架变形

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

这个过程在单独的教程中讲述。