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

You will notice that all bones raise a warning about a missing rest pose. A rest pose is the default pose for a skeleton, you can come back to it anytime you want (which is very handy for animating). To set one click on the skeleton node in the scene tree, then click on the Skeleton2D button in the toolbar, and select Overwrite Rest Pose from the dropdown menu.

../../_images/skel2d14.webp

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

多边形的变形

选择之前创建的多边形,并将骨架节点分配给它们的 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