Spine入门 —— 皮肤

总述(Overview)

Spine 中的皮肤(Skin)功能,允许一套骨架上的骨骼和动画使用不同的附加资源(attachments)。多套相似的骨架可以通过替换 attachments 实现动画重用,从而大大减轻了工作量。

Skin 的关键在于 皮肤占位符(Skin Placeholder)。Skin Placeholder 和其它 attachment 一样,位于层级树目录中的资源槽(slot)节点下。总之,它只是一个占位符或者说是一个代理,仅仅只是为当前 Skin 中真正使用的 attachment 占位而已。Skin 节点是一个记录 attachments 的集合,供 Skin placeholder 调用。当不同的 Skin 激活时,Skin Placeholder 将为整个骨架切换相应的 attachments。

装配(Setup)

通过创建 Skin 和 Skin Placeholder 建立皮肤,然后在 Skin Placeholder 下为皮肤填充 attachments。

创建皮肤(Creating a skin)
要创建 Skin 请在层级树目录中选择 Skins 节点,点击新建皮肤 New Skin 按钮。

创建皮肤占位符(Creating skin placeholders)
要创建 Skin Placeholder 请在层级树目录中选择一个骨骼(bone)或 slot 节点,点击 New... Skin Placeholder

Skin Placeholder 为每个 Skin 中相应的 attachments 占位 ,所以应该按 attachments 取名,而不是按 Skin。例如:你有 "red" 和 "blue" 两个 Skin,那么头部的名字就应该是 “head”,而不应该是 "red head" 或 "blue head"。

填充皮肤占位符(Populating a skin)

要在 Skin Placeholder 中为相应的 Skin 填充 attachments ,首先要确保此 Skin 处于激活状态。层级目录中的小圆点是可见性开关,它指示当前哪个皮肤处于激活状态。这里当前激活的 Skin 是 "red":

一旦某个 Skin 被激活,它对应的 attachments 就会被放到 Skin Placeholder 下。如果另一个皮肤被激活,此皮肤对应的 attachments 会被清除,另一个 Skin 对应的 attachments 会显示。

动画重用(Reusing animations)

Skins 是将 attachments 组织在一起最简单的方法。例如:你有一男一女两个哥布林,它们使用不同的图片。你可以创建两套 Skin,然后在运行时选择使用哪一个。

Skin 是个非常好用的功能,事实上 Spine 自带的示例工程 "goblins" 演示的就是此功能。但是简单的组织 attachments 无法解决某些更复杂的问题。例如:在运行时代码可以知道哪些 attachment 显示在骨架上,能让哥布林变成为男性或女性。

Skin 功能的强大,在于动画时显示哪些 attachment,是由 Skin Placeholder 来记录,而不是让特定的 attachments 自已来决定。最终显示的 attachment 是 Skin Placeholder 根据当前被激活的 Skin 来决定的。若非如此,动画重用无从谈起。

例如:哥布林的骨架需要一个眨眼动画,通过在眼部切换显示图片 "闭眼-男" 和 "闭眼-女" 就能实现。可如果没有 Skin,两个哥布林就得分别做两个动画。但使用了 Skin,只要加一个叫 "闭眼" 的 Skin Placeholder 就能搞定。


下面就为大家一步一步的讲解如何使用皮肤系统:

开始创建皮肤

创建皮肤 boy 和 girl

创建两个皮肤。选中 boy 皮肤。顺便我还创建了一个头骨骼。

创建皮肤节点

在头骨下创建一个皮肤节点。我取名为 head,系统会自动生成一个 slot 节点,在皮肤
与骨骼之间。

为 boy 添加图片

确认当前激活了 boy 皮肤,把 boy 的头图片,拖到 head 皮肤节点下。

为 girl 添加图片

激活 girl 皮肤,把 girl 的头图片,拖到同一个头部的皮肤下。

切换皮肤

现在切换 boy 和 girl 皮肤的激活状态,哪个皮肤激活,场景中就会显示哪个皮肤的图。

Slot 下的多套皮肤

在每个 slot 的节点下是可以有多个皮肤的,还可以同时有无皮肤的图片节点。但每次只能显示 1、2、3 中的一个。如果你当前显示的是 1,那么你怎么切换 A、B 都是没反应的。 如果遇到皮肤不听使唤时,请注意这些细节。

因为一个 slot 下可以同时存在多个皮肤 2、3。也就明一点,对于 boy 和 girl 两个皮肤, 也是可以有多种方案的。

在动画中切换皮肤

就目前来说,我没有发现 skins 能 K 帧。但还是有个曲线换肤的方案。就是上面说的到,我们可以在 slot 下用多个皮肤节点。首先要有一个皮肤比如 boy.
然后我在 0 帧显示 head 下的 boy,在第 5 帧显示 head 下的 girl。Slot 前面的小点是可以
K 帧的。这样就可以实现动画中控制换肤了。虽然有点山寨。


关于命名和资源归档的废话

皮肤的切换记录的是路片的路径,下面这张图中,boy 的皮肤,我把头的名字叫 tou。
虽然这样也 OK,显示动画都没问题。但是对于项目管理来说,这简直糟糕透顶了。

最好还是像官方这样,用文件夹来分boy和girl,文件夹内相应的图片都用一样的名字。 两个皮肤公用的素材,放在上一级。如图(官方的例子):

标签: spine

?>