cocoscreator播放Spine動畫

1.建立2D空工程 

2.工程打開預設場景,預設場景中已添加畫布

3.在畫布中添加空節點

4.命名節點為NodeSke

 5.添加骨骼動畫(Spine)元件到空節點上

添加成功後,點選NodeSke節點,可看到屬性檢查器上已添加了sp.Skeleton節點 

6.将Spine動畫檔案夾拖到assets目錄

 展開Spine動畫目錄girl可看到相關動畫檔案

7.将Spine動畫json檔案拖到Skeleton Data中

選擇指定皮膚

 選擇皮膚後,場景中空節點出現動畫畫布

8.調整動畫位置

 動畫位置調整OK

 儲存剛才制作的場景為main

9.選中攝影機,并切換Layer為UI_2D,可看到攝影機已将場景中畫布渲染出來了 

10.點選預覽在浏覽器中檢視效果

11.選中空節點NodeSke,然後在右邊的屬性檢查器中選擇要預設播放的動畫

現在,浏覽器中可看到Spine動畫已自動播放了

12.通過腳本控制動畫播放,停止,及切換動畫皮膚

     a.添加腳本檔案

b.為NodeSke節點添加自定義腳本 

 c.輕按兩下腳本打開VSCODE并在girl.ts中添加播放動畫與停止動畫方法

d.節點與變量關聯

 将節點拖入變量

 e.添加動畫控制按鈕

 f.為按鈕添加變量關聯

g.為按鈕添加點選事關聯 

編碼實作Spine動畫播放,停止,換膚功能 

//播放動畫
    playAnimation(){
        this.SkeObj.setAnimation(0,"dance",true);
    }
    //停止動畫
    stopAnimation(){
       let SpEnt:sp.spine.TrackEntry =  this.SkeObj.setAnimation(0,"dance",true);
       SpEnt.animationStart = SpEnt.animationEnd;
    }
    //換膚
    changeSkin() {
        const skins =['girl', 'boy', 'girl-blue-cape', 'girl-spring-dress'].map(x=> `full-skins/${x}`);
        this.skinId = (this.skinId + 1) % skins.length;
        this.SkeObj!.setSkin(skins[this.skinId]);
    }