2D 骨架

前言

使用 3D 时,骨架变形在角色和生物中很常见,大多数 3D 建模软件都支持这种变形。这种功能在 2D 中没有那么常用,很难找到以它为卖点的主流软件。

你可以在 Spine、Dragonbones 等第三方软件中创建动画。不过,Godot 从 3.1 版本开始就已经内置了这个功能。

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

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

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

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

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

场景布置

参见

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

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

../../_images/gBot_pieces.png

并且建议下载最终的角色图片 gBot_complete.png 将不同部分放在一起,以便进行参考。

../../_images/gBot_complete.png

创建多边形

为您的模型创建一个新场景(如果它是一个动画角色,您可能需要使用 KinematicBody2D)。为便于使用,创建一个空的 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

你会注意到,所有骨骼节点旁都有一个烦人的警告,提示你缺少放松姿势。这意味着是时候设置一个了。转到骨架节点并创建一个放松姿势。这个姿势是默认的,你可以随时回来修改(对于制作动画来说非常方便):

../../_images/skel2d14.png

警告消失了。如果你修改骨架(添加/移除骨骼)你需要重新设置放松姿势。

多边形的变形

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

../../_images/skel2d15.png

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

../../_images/skel2d16.png

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

../../_images/skel2d17.png

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

../../_images/skel2d18.png

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

../../_images/skel2d19.png

白色点完全受到权重影响,而黑色点完全不受影响。如果在多根骨骼上,绘制了相同的白色点,那么权重的影响将平均分配在这些骨骼之间。(所以通常不需要过多使用中间色调,除非你想仔细打磨弯曲效果)。

../../_images/skel2d20.gif

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

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

../../_images/skel2d21.gif

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

内部顶点

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

../../_images/skel2d22.png

现在转到 多边形 部分, 重新绘制细节更丰富的多边形. 这样, 当多边形弯曲时, 你需要确保它们变形的可能性最小, 慢慢尝试找出正确的设置.

../../_images/skel2d23.png

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

../../_images/skel2d24.png

通常这个数量的细节没有问题, 尽管你想更精细地控制三角形. 请多多尝试, 直到获得你满意的结果.

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

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

../../_images/skel2d25.gif