Cocos Creator Spine骨骼動畫 (局部換裝、全局換裝)

版本2.3.4

參考：

Spine 主頁

Cocos教程：Spine組件參考

CocosAPI：Skeleton

CSDN：Spine動畫局部換裝（切換武器）

 簡書：Spine使用圖片換裝 - Unity

cocos論壇：spine是否可以用外部圖片進行換皮

 

一 cocos2.3版本只支持spine3.8導出的二進制

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

二  使用Spine動畫

將spine的二進制文件拖動到項目assets文件夾下

拖拽骨骼動畫(龍骨頭圖標)到舞台，即可生成骨骼動畫

 

代碼中播放 (raptor為骨骼動畫的節點)

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

　　

三 外部圖片進行局部換裝

比如要把槍替換掉

 

 

把槍替換成這個外部圖片

 

換裝代碼如下 （sp.SkeletonTexture會報錯，但是能正常運行）

大致是自己使用外部圖片來創建一個region，替換骨骼動畫的region。

   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進行替換。

        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);
         }

　　

五 全局換裝