Cocos Creator Spine骨骼动画 (局部换装、全局换装)


版本2.3.4

参考：

Spine 主页

Cocos教程：Spine组件参考

CocosAPI：Skeleton

CSDN：Spine动画局部换装（切换武器）

简书：Spine使用图片换装 - Unity

cocos论坛：spine是否可以用外部图片进行换皮

一 cocos2.3版本只支持spine3.8导出的二进制

官方版本说明：2.3更新说明

我用2.3.4版本，美术用spine3.6导出二进制，我导入到cocos中，显示不出来。

论坛水友的提问：creator 2.3 2进制spine显示不出来

二 使用Spine动画

将spine的二进制文件拖动到项目assets文件夹下

拖拽骨骼动画(龙骨头图标)到舞台，即可生成骨骼动画

代码中播放 (raptor为骨骼动画的节点)

1
2
3
        let sk:sp.Skeleton = this.raptor.getComponent(sp.Skeleton);
        //播放行走动画
        sk.setAnimation(0, "walk",true);

三 外部图片进行局部换装

比如要把枪替换掉

把枪替换成这个外部图片

换装代码如下 （sp.SkeletonTexture会报错，但是能正常运行）

大致是自己使用外部图片来创建一个region，替换骨骼动画的region。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
   start() {
        // init logic
        this.label.string = this.text;


        let sk:sp.Skeleton = this.raptor.getComponent(sp.Skeleton);
        //播放行走动画
        sk.setAnimation(0, "walk",true);

        //换装
        this.changeSlot(sk, "gun", cc.loader.getRes("icon/t_job1.png"));
    }

    /**
     * 用外部图片局部换装
     * @param sk   骨骼动画
     * @param slotName  需要替换的插槽名称
     * @param texture   外部图片
     */
    public changeSlot(sk:sp.Skeleton, slotName:string, texture:cc.Texture2D) {
        //获取插槽
        let slot = sk.findSlot(slotName);          
        //获取挂件
        let att = slot.attachment;
        //创建region
        let skeletonTexture = new sp.SkeletonTexture();
        skeletonTexture.setRealTexture(texture)
        let page = new sp.spine.TextureAtlasPage()
        page.name = texture.name
        page.uWrap = sp.spine.TextureWrap.ClampToEdge
        page.vWrap = sp.spine.TextureWrap.ClampToEdge
        page.texture = skeletonTexture
        page.texture.setWraps(page.uWrap, page.vWrap)
        page.width = texture.width
        page.height = texture.height
       
        let region = new sp.spine.TextureAtlasRegion()
        region.page = page
        region.width = texture.width
        region.height = texture.height
        region.originalWidth = texture.width
        region.originalHeight = texture.height
       
        region.rotate = false
        region.u = 0
        region.v = 0
        region.u2 = 1
        region.v2 = 1
        region.texture = skeletonTexture
        //替换region
        att.region = region
        att.setRegion(region)
        att.updateOffset();
    }

替换效果

四 两个骨骼动画之间替换挂件

通过更换部位的名字，找到骨骼动画对应的Slot，然后将挂件Attachment进行替换。

1
2
3
4
5
6
7
8
9
10
        let sk1:sp.Skeleton;
        let sk2:sp.Skeleton;

        let parts = ["left-arm", "left-hand", "left-shoulder"];
         for (let i = 0; i < parts.length; i++) {
             let slot1 = sk1.findSlot(parts[i]);
             let slot2 = sk2.findSlot(parts[i]);
             let attachment = slot2.getAttachment();
             slot1.setAttachment(attachment);
         }

五 全局换装