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.

2D 骨骼

介绍

在 3D 工作中,骨骼变形是角色和生物的常见功能,大多数 3D 建模应用程序都支持这种功能。而对于 2D,由于这种功能并不常用,因此很难找到针对这种功能的主流软件。

你可以在 Spine、Dragonbones 等第三方软件中创建动画。该功能 Godot 也已内置支持。

为什么要在 Godot 中直接制作骨骼动画?答案是这样做有很多好处:

  • 能更好地与引擎集成,从而减少使用外部工具导入和编辑的麻烦。

  • 能够用动画控制粒子系统、着色器、声音、脚本调用、颜色、透明度等等。

  • Godot 内置的骨骼系统非常高效,并且是为性能而设计的。

接下来的教程将讲解 2D 骨骼变形。

设置

参见

在开始之前,我们建议你先浏览一下剪纸动画教程,以便对 Godot 中的动画制作有一个大致的了解。

在本教程中,我们将使用单张图片来构建我们的角色。从这里下载 gBot_pieces.png 或保存下图。

../../_images/gBot_pieces.png

同时建议下载最终的角色图片 gBot_complete.png 作为参考,以便将不同部分组合在一起。

../../_images/gBot_complete.png

创建多边形

为你的模型创建一个新场景(如果它是一个动画角色,你可能需要使用 CharacterBody2D)。为便于使用,创建一个空的 2D 节点作为多边形的根节点。

Polygon2D 节点开始。现在不需要把它放在场景中的特定位置,所以简单创建如下:

../../_images/skel2d1.png

选中它并指定你之前下载的角色部件纹理:

../../_images/skel2d2.png

不建议直接绘制多边形。请打开该多边形的“UV”对话框:

../../_images/skel2d3.png

转到模式,选择铅笔,在需要的区域绘制一个多边形:

../../_images/skel2d4.png

复制多边形节点,并给它一个合适的名称。然后,再次进入“UV”对话框,在新的所需部件中用另一个多边形替换旧的多边形。

当复制节点且下一块具有相似形状时,可以编辑上一个多边形,而不是绘制新多边形。

移动多边形后,请记住通过在 2D 多边形 UV 编辑器中选择编辑->多边形->UV 来更新UV。

../../_images/skel2d5.png

继续这样做,直到映射完所有的部件。

../../_images/skel2d6.png

你会注意到,节点的部件与它们在原始纹理中的布局是一样的。这是因为默认情况下,当你绘制一个多边形时,UV 和点是一样的。

重新排列部件,构建角色。这个过程应该很快。没必要改变轴心,因此不必费心确保每个部件的旋转轴心都正确;你可以暂时不用理会它们。

../../_images/skel2d7.png

啊,这些部件的视觉顺序还不正确,因为有些覆盖到了错误的部分。重新排列节点的顺序来解决这个问题:

../../_images/skel2d8.png

这下就完成了!这绝对比剪纸动画教程简单得多。

创建骨骼

创建一个 Skeleton2D 节点作为根节点的子项。这将是我们骨骼的基础:

../../_images/skel2d9.png

创建一个 Bone2D 节点作为骨骼的子项。把它放在臀部(通常骨骼从这里开始)。骨骼会指向右边,但是现在你可以忽略这个。

../../_images/skel2d10.png

按层级结构继续创建骨骼并依次命名它们。

../../_images/skel2d11.png

在这根链条的末端,会有一个下巴节点。它很短小,也指向右边。对于没有子骨骼的骨骼来说这是正常的。尖端骨骼的长度可以通过检查器中的属性来改变:

../../_images/skel2d12.png

在这种情况下,我们不需要旋转骨骼——精灵中的下巴恰好指向右边——但万一需要,你可以随意旋转。同样,这只有对尖端骨骼才是真正需要的,因为带有子节点的骨骼通常不需要长度或特定的旋转。

继续构建整个骨骼:

../../_images/skel2d13.png

你会注意到,所有的骨骼都会显示关于缺少放松姿势的警告。放松姿势是骨骼的默认姿势,你可以随时恢复到这个姿势(这对于动画制作非常方便)。要设置放松姿势,点击场景树中的 skeleton 节点,然后在工具栏中点击 Skeleton2D 按钮,从下拉菜单中选择覆盖放松姿势

../../_images/skel2d14.webp

警告会消失。如果你修改了骨骼(添加/移除骨骼),就需要重新设置休息姿势。

多边形的变形

选中之前创建的多边形,并将骨骼节点分配给它们的 Skeleton 属性。这将确保它们最终能被骨骼变形。

../../_images/skel2d15.png

单击上面突出显示的属性并选择骨骼节点:

../../_images/skel2d16.png

再次打开多边形的 UV 编辑器,进入骨骼部分。

../../_images/skel2d17.png

现在你还不能绘制权重。为此,你首先需要将骨骼中的骨骼列表与多边形同步。此步骤仅需手动执行一次(除非你通过添加/删除/重命名骨骼来修改骨骼)。这能确保你的绑定信息保存在多边形中,即使骨骼节点意外丢失或骨骼被修改。按“同步骨骼到多边形”按钮来同步列表。

../../_images/skel2d18.png

骨骼列表将自动显示。默认情况下,你的多边形没有被分配任何权重。选择你想要分配权重的骨骼,并在它们上面绘制:

../../_images/skel2d19.png

白色的点被分配了完整权重,而黑色的点不受骨骼影响。如果同一个点在多根骨骼上被涂成白色,那么影响将在它们之间分配(所以通常不需要过多使用中间色调,除非你想要打磨弯曲效果)。

../../_images/skel2d20.gif

绘制完权重后,骨骼的动画(不是多边形的!)会相应地产生修改和弯曲多边形的预期效果。因为这种方法下你只需用制作骨骼的动画,工作变得容易得多!

不过这并不完美。尝试制作让多边形弯曲的骨骼动画,往往会产生意想不到的结果:

../../_images/skel2d21.gif

这是因为 Godot 在绘制多边形时,会产生内部三角形来连接这些点。它们并不总是按你所期望的方式弯曲。要解决这个问题,你需要在几何图形中设置提示,以明确你希望它如何变形。

内部顶点

再次打开每根骨骼的 UV 菜单,进入部分。在你期望几何体弯曲的地方添加一些内部顶点:

../../_images/skel2d22.png

现在转到多边形部分,重新绘制细节更丰富的多边形。想象一下,当多边形弯曲时,你需要确保它们变形得尽可能小,所以请多尝试以找出正确的设置。

../../_images/skel2d23.png

一旦你开始绘制,原来的多边形会消失,你可以自由创建自己的多边形:

../../_images/skel2d24.png

通常这个数量的细节没什么问题,尽管你可能还想要更精细地控制三角形的位置。请多多尝试,直到获得你满意的结果。

注意:不要忘记你新添加的内部顶点也需要绘制权重!再次转到骨骼部分,将它们分配到正确的骨骼。

一旦你设定好了,你会得到更好的结果:

../../_images/skel2d25.gif