工程1：LoadSpine：簡單加載spine資源

建立工程，在層級上建立一個空對象，改名spine

在spine上添加spine組件：? 添加組件>渲染組件>spine

在spine上掛上腳本loadspine

onLoad () {cc.resources.load('loadSpine/alien-ess',sp.SkeletonData,this.newSpine.bind(this))let canvas = cc.find('Canvas');}newSpine(err,res){if(err){cc.log("err")}let spine = this.getComponent(sp.Skeleton);spine.skeletonData = res;this.spineAnimate = spine.setAnimation(0,'run',true);}

工程2：SpineAttach：骨架上的掛點

在項目中建立一個空對象改名raptor，并掛spine組件

在項目中建立5個按鈕

@property(sp.Skeleton)skeleton: sp.Skeleton = null;@property(cc.Prefab)targetPrefab: cc.Prefab = null;@property(cc.Label)modeLabel:cc.Label = null;@property(cc.String)redBoneName="";@property(cc.String)blueBoneName="";@property(cc.String)greenBoneName="";// LIFE-CYCLE CALLBACKS:// onLoad () {}destoryAllNode(){let attachUtil = this.skeleton.attachUtil;attachUtil.destroyAllAttachedNodes();//銷毀所有掛點}changeMode(){let isCached = this.skeleton.isAnimationCached();//當前是否處于緩存模式若想切換渲染模式，最好在設置'dragonAsset'之前，先設置好渲染模式，否則有運行時開銷if(isCached){this.skeleton.setAnimationCacheMode(sp.Skeleton.AnimationCacheMode.REALTIME);}else{this.skeleton.setAnimationCacheMode(sp.Skeleton.AnimationCacheMode.SHARED_CACHE);}}destorySomeNode(){let attachUtil = this.skeleton.attachUtil;attachUtil.destroyAttachedNodes(this.greenBoneName);//銷毀對應的掛點}genetateSomeNodes(){let attachUtil = this.skeleton.attachUtil;let boneNodes = attachUtil.generateAttachedNodes(this.greenBoneName);let boneNode = boneNodes[0];if (boneNode) {let targetNode = cc.instantiate(this.targetPrefab);targetNode.color = cc.color(0, 255, 0);boneNode.addChild(targetNode);}}//btn_Add_Red_And_BluegenerateAllNodes(){let attachUtil = this.skeleton.attachUtil;//掛點工具類 ,TS版本不全，自己去creator.d.ts 修改attachUtil.generateAllAttachedNodes();遍歷所有插槽，生成包含所有給定插槽名稱的最小節點樹，注意，調用該接口前請確保骨骼動畫已經初始化好。let boneNodes = attachUtil.getAttachedNodes(this.redBoneName);//獲得對應的掛點let boneNode = boneNodes[0];if(boneNode){let targetNode = cc.instantiate(this.targetPrefab);targetNode.color = cc.color(255,0,0);boneNode.addChild(targetNode);}let boneNodes1 = attachUtil.getAttachedNodes(this.blueBoneName);//獲得對應的掛點let boneNode1 = boneNodes1[0];if(boneNode1){let targetNode = cc.instantiate(this.targetPrefab);// targetNode.color = cc.color(0,0,255); //藍色 黑乎乎一片，這里先屏蔽了boneNode1.addChild(targetNode);}}

注意：TS版本中有一些API不全，自己在?creator.d.ts 中改一下

creator.d.ts 的 API 順序不穩定，小版本升級難比對 - Creator 2.x - Cocos中文社區

工程3：SpineBoy：角色 切換動作，時間縮放，調試插槽關節

一個spine對象 放在場景里

用按鈕來控制

????????角色的各種動作

? ? ? ? 插槽的顯隱

? ? ? ? 關節的顯隱

????????時間的縮放：動畫播放速度？

// Learn TypeScript:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.htmlconst {ccclass, property} = cc._decorator;@ccclass
export default class SpineCtrl extends cc.Component {@property(cc.Label)label: cc.Label = null;@property(Number)mixTime: number = 0;// LIFE-CYCLE CALLBACKS:spineboySkeleton:sp.Skeleton;_hasStop:boolean;onLoad () {this.spineboySkeleton = this.node.getComponent(sp.Skeleton);this._setMix('walk','run');this._setMix('run','jump');this._setMix('walk','jump');this._hasStop = false;//用來設置開始播放動畫的事件監聽。this.spineboySkeleton.setStartListener(trackEntry=>{let animationName = trackEntry.animation ? trackEntry.animation.name : "";cc.log("[track %s][animation %s] start.", trackEntry.trackIndex, animationName);})//用來設置動畫被打斷的事件監聽。this.spineboySkeleton.setInterruptListener(trackEntry=>{let animationName = trackEntry.animation ? trackEntry.animation.name : "";cc.log("[track %s][animation %s] interrupt.", trackEntry.trackIndex, animationName);})//用來設置動畫播放完后的事件監聽。this.spineboySkeleton.setEndListener(trackEntry=>{let animationName = trackEntry.animation ? trackEntry.animation.name : "";cc.log("[track %s][animation %s] end.", trackEntry.trackIndex, animationName);})//用來設置動畫將被銷毀的事件監聽。this.spineboySkeleton.setDisposeListener(trackEntry=>{let animationName = trackEntry.animation ? trackEntry.animation.name : "";cc.log("[track %s][animation %s] will be disposed.", trackEntry.trackIndex, animationName);})//用來設置動畫播放一次循環結束后的事件監聽。this.spineboySkeleton.setCompleteListener(trackEntry=>{let animationName = trackEntry.animation ? trackEntry.animation.name : "";if (animationName === 'shoot') {this.spineboySkeleton.clearTrack(1);}var loopCount = Math.floor(trackEntry.trackTime / trackEntry.animationEnd); cc.log("[track %s][animation %s] complete: %s", trackEntry.trackIndex, animationName, loopCount);})// 用來設置動畫播放過程中幀事件的監聽this.spineboySkeleton.setEventListener((trackEntry,event)=>{let animationName = trackEntry.animation ? trackEntry.animation.name : "";cc.log("[track %s][animation %s] event: %s, %s, %s, %s", trackEntry.trackIndex, animationName, event.data.name, event.intValue, event.floatValue, event.stringValue);})}toogleDebugSlots(){this.spineboySkeleton.debugSlots = !this.spineboySkeleton.debugSlots;}toggleDebugBones(){this.spineboySkeleton.debugBones = !this.spineboySkeleton.debugBones;}toggleTimeScale(){if(this.spineboySkeleton.timeScale === 1.0){this.spineboySkeleton.timeScale = 0.3;}else{this.spineboySkeleton.timeScale = 1.0;}}stop(){this.spineboySkeleton.clearTrack(0);this._hasStop = true;}walk(){this.spineboySkeleton.setAnimation(0,'walk',true);this._hasStop = false;}run(){this.spineboySkeleton.setAnimation(0,'run',true);this._hasStop =false;}jump(){let oldAnim = this.spineboySkeleton.animation;this.spineboySkeleton.setAnimation(0,'jump',false);if(oldAnim && !this._hasStop){this.spineboySkeleton.addAnimation(0,oldAnim === 'run'?'run':'walk',true,0);}}shoot(){this.spineboySkeleton.setAnimation(1,'shoot',false);}start () {}_setMix(anim1,anim2){this.spineboySkeleton.setMix(anim1,anim2,this.mixTime);this.spineboySkeleton.setMix(anim2,anim1,this.mixTime);}// update (dt) {}
}

小問題：

? ? ? ? 嘗試腳本生成spine對象，注意要實例化骨骼，否則setMix 會報錯，