二维骨骼

简介

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

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

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

  • 能更好地与引擎集成,从而减少使用外部工具导入和编辑的麻烦。
  • 能够控制粒子系统,着色器,声音,调用脚本,颜色,透明度等动画。
  • Godot内置的骨骼系统非常高效,并且是为性能而设计的。

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

场景布置

参见

Before starting, we recommend you to go through the 剪纸动画 tutorial to gain a general understanding of animating within Godot.

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

../../_images/gBot_pieces.png

并且建议下载最终的角色图片:“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

Duplicate the polygon node and give it a proper name. Then, enter the "UV" dialog again and replace the old polygon with another one in the new desired piece.

When you duplicate nodes and the next piece has a similar shape, you can edit the previous polygon instead of drawing a new one.

After moving the polygon, remember to update the UV by selecting Edit -> "Polygon -> UV" in the Polygon 2D UV Editor.

../../_images/skel2d5.png

Keep doing this until you mapped all pieces.

../../_images/skel2d6.png

You will notice that pieces for nodes appear in the same layout as they do in the original texture. This is because by default, when you draw a polygon, the UV and points are the same.

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

../../_images/skel2d7.png

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

../../_images/skel2d8.png

恭喜你完成本节教程!它肯定比剪纸动画教程简单得多。

创建骨骼

创建一个“二维骨骼”(Skeleton2D)节点作为根节点的子节点。我们将其做为基础骨骼:

../../_images/skel2d9.png

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

../../_images/skel2d10.png

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

../../_images/skel2d11.png

在这根链条的末端,会有一个*下巴*节点。它很短小,也指向右边。这根单根骨正常情况下没有子骨骼。*提示*单根骨的长度属性可以通过属性面板来改变:

../../_images/skel2d12.png

In this case, we don't need to rotate the bone (coincidentally the jaw points right in the sprite), but in case you need to, feel free to do it. Again, this is only really needed for tip bones as nodes with children don't usually need a length or a specific rotation.

继续构建整个骨骼:

../../_images/skel2d13.png

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

../../_images/skel2d14.png

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

多边形的变形

Select the previously created polygons and assign the skeleton node to their Skeleton property. This will ensure that they can eventually be deformed by it.

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

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

Note: Don't forget that your newly added internal vertices also need weight painting! Go to the Bones section again to assign them to the right bones.

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

../../_images/skel2d25.gif