网格附件

网格支持在图片内设置多边形,之后可操纵多边形的顶点,以有效的方式让图片弯曲和变形。网格还具备这样的优势:多边形可排除图片中的空白区,这样可减少填充率使用,并提升性能。

如果大家理解图片的九宫格原理,本章节会更好理解。

请注意,IK 约束在 Spine Essential 版本中不适用。

设置

要创建网格,首先需要切换到SETUP模式,接着为 图片节点 下的图片创建区域附件,然后选中层级数底部区域附件属性中的 网格

区域附件转换为具有 4 个顶点的网格,每个角一个。

编辑模式

单击 编辑 按钮可进入 编辑 模式。在这种模式下,会显示完整的未变形图片。此模式中的网格顶点代表网格的纹理坐标,亦称为 UV。

编辑 模式具有三种工具:

  • 修改 支持通过拖动移动顶点和边缘。可通过按住 ctrl(在 Mac 上为 cmd)选择多个顶点。
  • 创建支持通过单击创建新顶点,以及通过拖动创建新边缘。
  • 删除支持通过单击删除边缘或顶点。可通过按住 ctrl(在 Mac 上为 cmd)选择多个顶点。

无论使用这些工具中的任何一种,都可通过双击删除顶点。右键单击开关工具。

重置 按钮将所有顶点替换为 4 个节点,每个角一个。

生成 按钮向网格添加新顶点,在边缘内以及沿着边缘均添加。可单击多次该按钮添加更多的顶点。生成 不会改变沿网格边缘分布的顶点,但会删除网格内的任何顶点。

可随时通过以下方式退出编辑 模式:按 空格键Esc,单击层级树底部的 编辑按钮,或者关闭 编辑网格 对话框。

轮廓视图 可用于可视化网格,同时更改 UV。

新建模式

单击 新建 按钮可删除所有顶点并进入 新建 顶点模式。此模式支持通过单击定义网格形状,以创建顶点。还可通过拖动移动顶点,或通过双击删除顶点。当所有顶点都连接起来时,表示网格形状确定,并退出 新建 模式。

新建 模式下,可快速定义网格的形状。或者,可使用 创建 工具创建顶点和边缘,还可以使用 删除 工具删除任何不需要的顶点或边缘。

变形

编辑 模式移动顶点时,会改变用于顶点的图片上的位置(绘制时),但不会改变顶点的实际位置。退出 编辑 模式时,您将发现顶点位置未改变,但图片已在整个网格中拉伸。

编辑 模式下,选中 变形,网格看起来像不在 编辑 模式下。选中 变形 且移动顶点时,它会同时改变顶点位置和用于顶点的图片上的位置(绘制时)。

边缘

网格的顶点和边缘用于将网格分解成很多三角形,如 编辑 模式下的浅灰色线所示。这些三角形从不与边缘交叉,因此创建边缘可完全掌控三角形连接顶点的方式。这一点很重要,因为三角形决定顶点移动时网格如何变形。

例如,我们已创建 spineboy 的头,但现在要拉伸鼻子。

当顶点移动时,只有包含顶点的三角形会变形。这会拉伸鼻尖,但不会拉伸鼻体,还会拉伸局部脸颊。通过引入新顶点,我们将获得不同的三角形,而且网格将以不同的方式变形。

新顶点会添加在鼻体,这会产生不同的三角形。现在,我们移动的顶点属于两个三角形。当顶点移动时,它会使这两个三角形变形。这会拉伸整个鼻子,而且会拉伸大部分脸颊。需要另一个顶点来防止脸颊变形。

在鼻子下添加新顶点。整个鼻子现在包含在两个三角形内,但移动顶点只会使其中一个变形。为了解决这个问题,我们需要在 编辑 模式下创建一个边缘,方法是选择 创建 工具,然后在两个顶点之间拖动。

新顶点(呈橙色)会导致鼻子三角形以不同方式连接,并且鼻子发生变形时不糊影响头部其他部位。

顶点

选择在哪里放置网格顶点时,要考虑到很多因素。

壳体尺寸

网格壳体应尽可能排除空白区。这样不会绘制壳体外的任何像素,也不会计算到填充率中。对于填充率受限的游戏,这可提高性能,尤其是存在大量空白区的大型图片。例如,树的图片可能在树干任一侧存在很多空白区。

顶点计数

一般而言,网格中的顶点数量应保持在最少,因为每个顶点的位置必须由 CPU 计算(每个帧)。这是一种快速运算,但屏幕上很多骨架一次具有多个网格,每个具有多个顶点,这会将需要计算的位置增加至数千个。

变形

在哪里放置顶点以及如何通过三角形连接顶点取决于网格如何变形。边缘 应用于控制三角形如何连接顶点。

当图片需要弯曲时,例如当使用 权重 时,拥有足够的顶点对于平滑弯曲非常重要。例如,尾巴。

变形可以让网格看起来具有 3D 效果。实现这种效果的一种方式是沿着网格中心分布的边缘和图片中的一些轮廓。然后,可向网格壳体对边缘顶点创建动画。拉伸一半网格,并挤压一半其他网格,形成网格以 3D 形式旋转的错觉。

变换工具

可使用变换工具,在非 编辑 模式编辑网格顶点。可像其他任何附件一样旋转、移动和缩放整个网格。

可通过拖动使用任何变换工具移动单个顶点,这将使图片变形。可通过按住 ctrl(在 Mac 上为 cmd)然后单击或拖至选择框来选择多个顶点。可通过按 空格键Esc,或单击任何空白区域来取消选择所选顶点。

可改变用于旋转或缩放的原点。将鼠标放在 旋转缩放 工具上的小十字,直到出现圆圈,然后将原点拖动至所需位置。原点将自动与顶点对齐。

创建关键帧

当以动画模式操纵网格的顶点时,可对网格 创建关键帧。对网格顶点创建动画也称为自由变形 (FFD)。

尽管可使用 旋转 工具旋转网格顶点,当网格关键帧实际渐变时,顶点将从它们在第一个关键帧所在位置以直线移动到下一个关键帧的位置。可使用多个关键帧让顶点看起来以弧形移动。

可对所有顶点一起创建关键帧。这使仅使用 FFD 为相同网格的不同部分创建动画变得很困难,除非所有 FFD 动画使用 顺序法 完成。对于复杂网格动画,最好使用 权重

去除空白区

使用 纹理打包器、空白区去除不再用于网格使用的图片。网格可在空白区拥有纹理坐标。如果删除了空白区,网格将使用网格纹理贴图集区域之外的像素。

网格的每个图片应只包含网格需要的空白区,且应在纹理打包器设置中禁用空白区去除。

如果对于已创建的网格,图片尺寸已改变,则纹理坐标可相对轻松地进行固定。在 编辑 模式下,按住 ctrl(在 Mac 上为 cmd)选择所有顶点,然后拖至选择框。接下来,使用 修改 工具将顶点移动到正确的位置。

权重

骨骼变换时,网格会自动变形。请参阅 权重 了解更多信息。

视频

下一节:边界框 上一节:Point Attachments