Spine 动画工具_spine skel json

一、文件结构

Spine 导出的资源文件：

• .atlas：图集数据文件，内部存储了每张纹理的数据信息
• .png：图集资源
• .skel / .json 二进制文件：骨骼信息

图集可以用纹理解包器解包，需要注意的是 .atlas 同级目录下必须要有对应的 .png 图片，可以打开 .atlas 文件进行确认：

而对于 .skel 或是 .json 结尾的骨骼信息，直接点击上图的导入数据就可以了，这里需要注意的是版本需要和制作时的版本对应，否则可能会导入失败，老版本的 Spine 二进制骨骼文件结构和现版本的会不太一样

最后一步：选择你的图片路径，这里的图片就是上面 atlas 文件解开后的一个个 Sprite

二、Spine 工具教程

这里当然不会有 Spine 教程，因为资料不少，甚至可以直接去官网上查阅，不是美术的话不用怎么关心具体的制作流程，只需要了解一些基础概念就好：

1. 图片：http://zh.esotericsoftware.com/spine-images
2. 工具区：http://zh.esotericsoftware.com/spine-tools
3. 动画：http://zh.esotericsoftware.com/spine-keys
4. 皮肤：http://zh.esotericsoftware.com/spine-skins
5. 附件：http://zh.esotericsoftware.com/spine-attachments

三、Unity 运行库

• 源码：https://github.com/EsotericSoftware/spine-runtimes/tree/4.0/spine-unity
• UnityPackage：http://zh.esotericsoftware.com/spine-unity-download/

需要注意的是，对于 3.8 以后的版本，Spine 使用了自定义程序集，因此在导入 package 之后需要注意 .asmdef 文件，自己添加对应的 spine.unity 引用

3.1 Spine 资源导入 Unity

还是这三个文件，改下名字：

• atlas 后缀修改为 .atlas.txt
• skel 后缀为 skel.json，原先就是 json 后缀的话就不用动

之后直接复制到 Unity 中就 OK，如果成功，会生成多个新文件：

3.2 添加 Spine GO：

菜单 → GameObject → Spine →

• SkeletonAnimation：依赖 MeshRenderer
• SkeletonGraphic：Mesh 是自己每帧去更新的，用于 Unity UI
• SkeletonRenderer：基类

一般情况下，都是使用 SkeletonGraphic，不然在 UI 上可能会出现层级问题

3.3 程序接口

以下是 SkeletonGraphic 组件的部分常用接口 / 面板设置，对于 SkeletonAnimation 类似

• AnimationName：动画名
• InitialSkinName：皮肤
• InitialFlipY / InitialFlipY：镜像翻转
• Loop：是否开启循环
• TimeScale：速度倍数
• Freeze：是否冻结第一帧
• Initialize(bool)：根据当前组件的数据初始化 skeleton 数据并播放动画，传 true 强制更新

代码参考：

self.spineTest = self.panel.Spine.gameObject:GetComponent("SkeletonGraphic")
self.spineTest.AnimationName = "upgrade_6"
self.spineTest.initialSkinName = "skin_6"
self.spineTest:Initialize(true)

如果想有更深入的了解，或者实在找不到接口可以直接参考源码：路径在 Asset/Spine 下，也可以参考官网：http://en.esotericsoftware.com/spine-unity

四、常见需求问题处理

4.1 UI 层级问题

将你的 Spine 组件更换为 SkeletonGraphic，搞定

4.2 实现动画连播

例如先播放动画 A，播放完毕后播放动画 B……

无需起 Timer，Spine 支持动画状态机，一个简单的例子如下：

1. skeleton.AnimationState:SetAnimation(0, A, false)：在 Track0 播放动画 A
2. skeleton.AnimationState:AddAnimation(0, B, true, 0)：在 Track0 后面添加一个动画 B，当 Track0 前面添加的动画依次播放完毕后，循环播放动画 B。方法中第4个参数为播放延迟，如果传入0则默认为连续播放，否则为队列中最后一个动画播放同时计时，延迟 s 秒后播放

不过需要注意的是：连播的动画需要 K 首帧，不然当前动画会根据上一动画生成补间动画，当然也可以通过 skeleton.SetToSetupPose() 方法去初始化骨骼和插槽为绑定 POSE

关于轨道(Track)：

调用 SetAnimation 或者 AddAnimation 这两个方法会返回一个 TrackEntry 对象，该对象代表一个正在播放或者排队的动画实例，它包含了动画的一些信息：已播放时间、播放速度等属性，TrackEntry 可以让你在 SetAnimation 或者 AddAnimation 之外控制正在播放或排队动画的播放参数

参考代码：

self.spineTest = self.panel.Spine.gameObject:GetComponent("SkeletonGraphic")
self.spineTest.initialSkinName = "dw6"
self.spineTest:Initialize(true)
self.spineTest.AnimationState:SetAnimation(0, "upgrade_1", false)
self.spineTest.AnimationState:AddAnimation(0, "upgrade_2", false, 0)
self.spineTest.AnimationState:AddAnimation(0, "upgrade_3", true, 0)

4.3 换装

4.3.1 全局换装

Spine 支持全局换装，只需要在工具里面添加皮肤就 OK：

例如有12种不同的段位动画需要展示，其中每6种动画的骨骼是一致的，只不过附件（贴图）不同，对此可以只出2个动画，使用6套不同的皮肤，这样做的好处是：当动画数量过多的时候，不需要重复工作，只需要修改对应的皮肤占位符就可以了

下面插槽中有6个不同的图片附件，可以优化成每个插槽对应一个皮肤而不再是对应多个动画：

步骤如下：

1. 左上角切换到 Setup 模式，添加6个皮肤，并且在对应的插槽下添加1个皮肤占位符

2. 选中当前你要修改的皮肤，并将对应皮肤的图片附件拖动到皮肤占位符下面

搞定，进游戏修改 InitialSkinName 属性就可以直接换肤测试了

4.3.2 局部换装

还有一种更复杂的情况：就是装饰/皮肤组合

如果有这样的 Spine 小人，它有5个部位可以允许玩家自定义换装：5x头饰、5x脸饰、6x翅膀、5x衣服、2x尾饰品，那么总共就会有 5x5x6x5x2 = 1500 种不同的组合，当然可以直接设计好 1500 款皮肤，只要美术愿意，但其实只需要设计 5+5+6+5+2 = = 23 套对应部位的皮肤、之后在运行时两两组合就可以了，这也是很容易想到的办法

可惜的是，3.7 及以前的 Spine 运行库版本并不支持同时激活多套皮肤：不过还是可以整个临时方案的：只需要在对应的 spine UI 上添加 SpineMultiplySkin 就 OK

使用方法：

self.spineCustom = self.panel.Spine.gameObject:GetComponent("SpineMultiplySkin")
self.spineCustom.Skin = {"皮肤1", "皮肤2", "皮肤3"} --这些皮肤会被整合成一个全套
self.spineCustom:ApplyNewSkin() --更新插槽下的所有附件，换装
self.spineTest.AnimationState:SetAnimation(0, "upgrade", false)

设计原理：

非常简单，参考源码的 SetSkin 方法，我们只需要拿到所有插槽的皮肤占位符，之后将皮肤占位符下的附件全部存下来，将其整合作为一个新的皮肤组合，重新应用并刷新插槽就 OK，部分代码如下：

public void UpdateSkin()
{
    if (targetSkeleton == null)
        targetSkeleton = gameObject.GetComponent<SkeletonGraphic>();
 
    //将所有皮肤取并集，要求对于每个皮肤占位，都最多只有一个皮肤下存在附件
    slotAttachmentDic.Clear();
    for (int i = 0; i < Skin.Length; i++)
    {
        string skinName = Skin[i];
        SkeletonData skeletonData = targetSkeleton.SkeletonDataAsset.GetSkeletonData(false);
        Skin skin = skeletonData.FindSkin(skinName);
        if (skin == null)
        {
            continue;
        }
 
        for (int j = 0, n = skeletonData.Slots.Count; j < n; j++)
        {
            SlotData slot = skeletonData.Slots.Items[j];
            if (slot.AttachmentName != null)
            {
                //根据皮肤占位符获取当前皮肤的附件，这里的附件可以为空
                Attachment attachment = skin.GetAttachment(j, slot.AttachmentName);
                if (slotAttachmentDic.ContainsKey(slot.Name))
                {
                    //如果当前没有附件则跳过
                    if (attachment == null)
                        continue;
 
                    //否者这个附件必须是皮肤组合种独一无二的
                    if (slotAttachmentDic[slot.Name] == null)
                        slotAttachmentDic[slot.Name] = attachment;
                    else
                    {
                        Debug.LogError(String.Format("错误的皮肤设置！同一皮肤占位符下最多只允许一个皮肤持有附件，占位符名：{0}", slot.AttachmentName));
                    }
                }
                else
                {
                    //是独一无二的
                    slotAttachmentDic.Add(slot.Name, attachment);
                }
            }
        }
    }
}
public void ApplyNewSkin()
{
    UpdateSkin();
    foreach (var item in targetSkeleton.Skeleton.Slots)
    {
        string slotName = item.ToString();
        if (slotAttachmentDic.ContainsKey(slotName))
        {
            item.Attachment = slotAttachmentDic[slotName];
        }
        //所有不包含皮肤占位符的插槽，保持原样
    }
}

这样做有一个好处就是可以省掉很多没必要的配置和麻烦