二维骨骼

前言

当使用三维时, 骨骼变形在角色和生物中很常见, 大多数三维建模软件都支持这种变形. 对于二维, 由于这个函数不常用, 很难找到主流软件来实现这一点.

一般选择在第三方软件中创建动画, 如Spine或Dragonbones. 不过, 从Godot 3.1版本开始, 就已经内置此功能.

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

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

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

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

接下来的教程将讲解二维骨骼变形.

场景布置

参见

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

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

../../_images/gBot_pieces.png

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

../../_images/gBot_complete.png

创建一个多边形

为您的模型创建一个新场景(如果它是一个动画角色, 您可能需要使用 “二维动力学物体”(KinematicBody2D)). 为便于使用, 创建一个空的二维节点作为该多边形的根节点.

从 “二维多边形”(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编辑器, 进入 单根骨 部分.

../../_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