剪纸动画

它是什么?

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

现在可以用软件制作剪纸动画的模拟, 如 南方公园杰克和永不落幕的海盗 .

在视频游戏中, 这种技术也变得流行. 例如 Paper MarioRayman Origins .

Godot中剪纸动画

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

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

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

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

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

  • 自定义碰撞器 : 在骷髅的不同部位设置碰撞器和影响区域, 非常适合bosses和格斗游戏.

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

以及更多!

制作 GBot

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

../../_images/tuto_cutout_walk.gif

获得您的资源: gbot_resources.zip.

设置装配

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

../../_images/tuto_cutout1.png

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

../../_images/tuto_cutout2.png

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

../../_images/tuto_cutout3.png

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

../../_images/tutovec_torso1.gif

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

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

../../_images/tuto_cutout4.png

调整枢轴

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

../../_images/tuto_cutout5.png

枢轴也可以通过 视觉 来调整. 将鼠标悬停在所需的枢轴点上时, 按 V 将所选Sprite的枢轴移动到那里. 工具栏中还有一个工具也有类似的功能.

../../_images/tutovec_torso2.gif

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

../../_images/tuto_cutout6.png

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

../../_images/tuto_cutout7.png

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

注解

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

RemoteTransform2D节点

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

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

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

../../_images/tuto_cutout9.png

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

../../_images/tutovec_torso4.gif

完成骨架

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

../../_images/tuto_cutout10.png

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

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

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

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

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

骨架

在Godot中, 有一个在节点之间创建 "单根骨" 的辅助工具. 骨连接节点称为骨架.

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

../../_images/tuto_cutout11.png

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

../../_images/tuto_cutout12.png

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

../../_images/tuto_cutout13.png

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

第一步是创建端点节点. 任何类型的节点都可以, 但是 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 是反向动力学(Inverse Kinematics)的缩写, 给手部, 足部以及其它肢体的动画带来便利. 想象一下, 您想要将角色的脚放在地面上的特定位置. 如果没有 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

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

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

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

创建休息姿势

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

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链时, 不需要选择整个链来添加关键帧. 选择链的端点并插入关键帧将自动为链的所有其他部分插入关键帧.

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

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

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

../../_images/tuto_cutout23.png

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

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

  1. 选择相关的关键帧.

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

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

../../_images/tuto_cutout24.png

二维骨骼变形

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

这个过程在 separate tutorial.