Spine实现局部换装

文章部分代码参考 码农家园-Cocos Creator Spine骨骼动画 (局部换装、全局换装)

使用场景

需要局部更换部件，纹理单独控制的, spine运行时为webgl, 语言ts

你需要了解spine数据结构

1
2
3
4
RegionAttachment
      -TextureAtlasRegion
            -TextureAtlasPage
                -Texture(不同实现此处的Texture类型不同，此处使用的是GlTexture)

核心代码

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
//部分代码省略，贴出核心代码
changeSkin(slotFile = 'clothes03.png', slotName = "clothes01") {
        const path = 'img url here';
        loadImage(`${path}`).then((res: HTMLImageElement) => {
            let texture = new spine.webgl.GLTexture(this.model.scene.gl, res);
            let slot = skeleton.findSlot(slotName);
            this.setRegion(slot, texture, slotFile);
        });
}

setRegion(slot: spine.Slot, glTexture: spine.webgl.GLTexture, textureName: string) {
        let texture = glTexture.getImage();
        let att = slot.getAttachment() as (spine.RegionAttachment | spine.MeshAttachment);
        let region = att.region as spine.TextureAtlasRegion, page = region.page;
        page.name = textureName;
        // page.uWrap = spine.TextureWrap.ClampToEdge
        // page.vWrap = spine.TextureWrap.ClampToEdge
        page.texture = glTexture
        // page.texture.setWraps(page.uWrap, page.vWrap)
        page.width = texture.width
        page.height = texture.height

        region.index = -1;
        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 = glTexture
        region.renderObject = region;
        //替换region
        att.region = region
        if (att instanceof spine.RegionAttachment) {
            att.setRegion(region)
            att.updateOffset();
        } else {
            att.updateUVs();
        }
}

代码讲解

核心思路是替换附件 Attachment(RegionAttachment|MeshAttachment)中贴图的相关数据，因为默认的spine模型加载的是图集，所以要修改宽高和相关uv信息，
此处要注意的是更换完执行的 att.updateOffset() 和 att.updateUVs() (webgl版本中是这两个方法), 否则更换的贴图将会位置不正确导致显示不正常或者看不见

另外附上另外一篇cocos spine局部换装的链接 Cocos Creator Spine 换装