二维骨骼

简介

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

一般选择在第三方软件中创建动画,如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

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

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