剪纸动画

这是怎么一回事?

传统上, cutout animation 是一种 stop motion animation 把一张纸(或其他薄的材料)切成特殊形状,并以二维的方式排列成字符和对象。人物的身体通常由几块组成。每一帧的照片都会被整理和拍摄一次。动画师在每次拍摄之间以小增量移动和旋转零件,以在图像按顺序快速回放时创建移动的假象。

现在可以使用软件创建剪切动画的模拟,如中所示。 South ParkJake and the Never Land Pirates .

在电子游戏中,这种技术也很流行。例如: Paper MarioRayman Origins .

在Godot剪影动画

Godot提供了使用切割钻机的工具,是工作流的理想选择:

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

  • 组合动画样式 :animateSprite允许将传统CEL动画与剪切动画一起使用。在CEL动画中,不同的动画帧使用完全不同的图形,而不是位置不同的相同片段。在基于裁剪的动画中,CEL动画可以选择性地用于复杂的部分,如手、脚、改变面部表情等。

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

  • 粒子系统 :剪切动画装备可以与粒子系统组合。这对魔法效果、喷气背包等很有用。

  • 自定义碰撞器 :在骨骼的不同部分设置碰撞器和影响区域,对老板和战斗游戏非常有用。

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

还有更多!

GBOT的制作

对于本教程,我们将使用 GBot 人物,由安德烈亚斯·以扫创造。

../../_images/tuto_cutout_walk.gif

获取您的资产: gbot_resources.zip .

安装钻机

创建一个空节点2d作为场景的根,我们将在其下工作:

../../_images/tuto_cutout1.png

模型的第一个节点是臀部。一般来说,无论是二维还是三维,髋关节都是骨骼的根。这使得动画制作更容易:

../../_images/tuto_cutout2.png

接下来是躯干。躯干需要是臀部的子对象,因此创建一个子对象sprite并加载躯干纹理,然后适当地适应它:

../../_images/tuto_cutout3.png

这个看起来不错。让我们看看我们的层次结构是否像骨骼一样通过旋转躯干来工作。我们能做到这是紧迫的 E 进入旋转模式,用鼠标左键拖动。退出旋转模式点击 ESC .

../../_images/tutovec_torso1.gif

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

中间的这个小十字架 Sprite 是旋转轴:

../../_images/tuto_cutout4.png

调整枢轴

可以通过更改 抵消 sprite中的属性:

../../_images/tuto_cutout5.png

枢轴也可以调整 视觉上 . 将鼠标悬停在所需的轴点上时,按“v”键将选定精灵的轴移动到该点。工具栏中还有一个功能类似的工具。

../../_images/tutovec_torso2.gif

继续添加身体部位,从右臂开始。确保将每个sprite放置在其在层次结构中的正确位置,因此其旋转和翻译相对于其父级:

../../_images/tuto_cutout6.png

左臂有问题。在二维中,子节点出现在其父节点前面:

../../_images/tuto_cutout7.png

我们要左臂出现 后面 臀部和躯干。我们可以将左臂节点移到髋部后面(场景层次中的髋部节点上方),但是左臂在层次中不再处于正确的位置。这意味着它不会影响躯干的运动。我们会解决这个问题的 RemoteTransform2D 节点。

注解

还可以通过调整继承自node2d的任何节点的z属性来修复深度排序问题。

远程Transform2D节点

这个 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)的动画。

对于简单的物体和钻机来说,这很好,但也有局限性:

  • 在复杂的装备中,在主视区中选择精灵会变得困难。场景树最终被用来选择部件,这可能会变慢。

  • 反向运动学(ik)对于设置手足等肢体的动画非常有用,在当前状态下不能与我们的装备一起使用。

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

骨骼

在Godot中,有一个助手可以在节点之间创建“骨骼”。骨骼链接的节点称为骨骼。

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

../../_images/tuto_cutout11.png

然后,单击骨架菜单并选择 Make Bones .

../../_images/tuto_cutout12.png

这将增加覆盖手臂的骨骼,但结果可能令人惊讶。

../../_images/tuto_cutout13.png

手为什么缺骨头?在godot中,骨骼将节点与其父节点连接起来。而且目前还没有hand节点的子节点。有了这些知识,让我们再试一次。

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

../../_images/tuto_cutout14.png

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

../../_images/tuto_cutout15.png

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

为所有重要末端创建端点。为切口的所有可活动部分生成骨骼,其中髋关节是所有部分之间的最终连接。

你可能会注意到,当连接臀部和躯干时,会产生额外的骨骼。Godot已经用一根骨头将髋关节连接到场景根,我们不希望这样。要修复此问题,请选择“根”和“髋”节点,打开“骨架”菜单,单击 clear bones .

../../_images/tuto_cutout15_2.png

最后的骨架应该如下所示:

../../_images/tuto_cutout16.png

您可能已经注意到手中有第二组端点。这很快就会有意义了。

现在整个图形都装配好了,下一步就是设置IK链。IK链可以更自然地控制四肢。

IK链

ik代表反向运动学。这是一种很方便的技巧,可以像我们制作的那样,动画化钻机的手、脚和其他末端的位置。假设您想在地面上的特定位置设置角色的脚的姿势。如果没有ik链,脚的每一个动作都需要旋转和定位其他几块骨头(至少是胫骨和大腿)。这将非常复杂,并导致不精确的结果。

当小腿和大腿自我调整时,我们可以直接移动脚。

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

../../_images/tuto_cutout17.png

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

../../_images/tuto_cutout18.png

因此,链条的底部会转动 黄色的 .

../../_images/tuto_cutout19.png

设置好IK链后,抓取链底部的任何子节点或孙子节点(例如一英尺)并移动它。当你调整链条的位置时,你会看到链条的其余部分在调整。

../../_images/tutovec_torso5.gif

动画提示

以下部分将是为剪切装备创建动画的提示集合。有关Godot中动画系统如何工作的详细信息,请参见 动画 .

设置关键帧并排除属性

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

../../_images/tuto_cutout20.png

“关键点”按钮在当前播放指针位置插入选定对象或骨骼的位置、旋转和缩放关键帧。

键按钮左侧的“loc”、“rot”和“scl”切换按钮修改其功能,允许您指定将为三个属性中的哪一个创建关键帧。

这是一个如何有用的例子:假设您有一个节点,它已经有两个关键帧,只为其比例设置动画。要将重叠的旋转移动添加到同一节点。旋转运动应该在已经设置的比例变化的不同时间开始和结束。可以使用切换按钮在添加新关键帧时仅添加旋转信息。这样,可以避免添加不需要的缩放关键帧,这会破坏现有的缩放动画。

创建休息姿势

将休息姿势作为默认姿势,当游戏中没有其他姿势处于活动状态时,剪切装备应设置为该姿势。创建一个休息姿势,如下所示:

1。确保将钻机零件放置在看起来像“休息”的位置。

  1. 创建新动画,将其重命名为“rest”。

  2. 选择装备中的所有节点(框选择可以正常工作)。

4。确保工具栏中的“loc”、“rot”和“scl”切换按钮都处于活动状态。

5。按下按键。将为存储当前排列的所有选定零件插入键。现在,当游戏中需要时,可以通过播放已创建的“休息”动画来调用此姿势。

../../_images/tuto_cutout21.png

仅修改旋转

当设置剪切装备的动画时,通常只需要更改节点的旋转。很少使用位置和比例。

因此,在插入键时,您可能会发现大多数时候只激活“rot”切换很方便:

../../_images/tuto_cutout22.png

这将避免为位置和比例创建不需要的动画轨迹。

为IK链设置关键帧

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

可视化地将精灵移动到其父级之后

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

为了帮助实现这一点,在继承节点的所有node2d上都有一个keyframable“behind parent”属性。在规划您的装备时,考虑一下它需要执行的移动,并考虑一下如何使用“父节点后”和/或RemoteTransform2D节点。它们提供了重叠的功能。

../../_images/tuto_cutout23.png

为多个关键点设置缓和曲线

要同时对多个关键帧应用相同的缓和曲线,请执行以下操作:

  1. 选择相关键。

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

  3. 在过渡编辑器中,单击所需曲线以应用它。

../../_images/tuto_cutout24.png

二维骨架变形

骨骼变形可以用来增强切割设备,允许单个部件有机变形(例如,昆虫角色行走时摆动的天线)。

此过程在 separate tutorial .