????????Cocos Creator 是一款流行的游戲開發(fā)引擎，具有豐富的組件和工具，其中Spine 是一個基于骨骼系統(tǒng)的 2D 動畫工具，它可以讓開發(fā)者通過對骨架和關(guān)鍵幀的調(diào)整來制作出更加自然、流暢的動畫效果。Cocos Creator 支持使用 Spine 的 JSON 格式文件導(dǎo)入到項目中，并且提供了 Spine 組件來方便地加載和控制 Spine 動畫。
目錄
一、組件屬性
二、組件方法
三、方法介紹
四、掛點生成
一、組件屬性
| 屬性 | 功能說明 |
|---|---|
| Skeleton Data | 骨骼信息數(shù)據(jù)，拖拽 Spine 導(dǎo)出后的骨骼資源到該屬性中 |
| Default Skin | 選擇默認(rèn)的皮膚 |
| Animation | 當(dāng)前播放的動畫名稱 |
| Animation Cache Mode | 渲染模式，默認(rèn)?REALTIME?模式。（v2.0.9 中新增）1.?REALTIME?模式，實時運算，支持 Spine 所有的功能。 2.?SHARED_CACHE?模式，將骨骼動畫及貼圖數(shù)據(jù)進(jìn)行緩存并共享，相當(dāng)于預(yù)烘焙骨骼動畫。擁有較高性能，但不支持動作融合、動作疊加，只支持動作開始和結(jié)束事件。至于內(nèi)存方面，當(dāng)創(chuàng)建 N(N>=3) 個相同骨骼、相同動作的動畫時，會呈現(xiàn)內(nèi)存優(yōu)勢。N 值越大，優(yōu)勢越明顯。綜上? SHARED_CACHE?模式適用于場景動畫，特效，副本怪物，NPC 等，能極大提高幀率和降低內(nèi)存。3.?PRIVATE_CACHE?模式，與? SHARED_CACHE?類似，但不共享動畫及貼圖數(shù)據(jù)，且會占用額外的內(nèi)存，僅存在性能優(yōu)勢，如果大量使用該模式播放動畫可能會造成卡頓。當(dāng)想利用緩存模式的高性能，但又存在換裝的需求，因此不能共享貼圖數(shù)據(jù)時，那么?PRIVATE_CACHE?就適合你。 |
| Loop | 是否循環(huán)播放當(dāng)前動畫 |
| Premultiplied Alpha | 圖片是否啟用貼圖預(yù)乘，默認(rèn)為 True。 當(dāng)圖片的透明區(qū)域出現(xiàn)色塊時需要關(guān)閉該項，當(dāng)圖片的半透明區(qū)域顏色變黑時需要啟用該項。 |
| Time Scale | 當(dāng)前骨骼中所有動畫的時間縮放率 |
| Debug Slots | 是否顯示 slot 的 debug 信息 |
| Debug Bones | 是否顯示骨骼的 debug 信息 |
| Debug Mesh | 是否顯示 mesh 的 debug 信息 |
| Use Tint | 是否開啟染色效果，默認(rèn)關(guān)閉。 |
| Enable Batch | 是否開啟動畫合批，默認(rèn)關(guān)閉。 開啟時，能減少 Drawcall，適用于大量且簡單動畫同時播放的情況。 關(guān)閉時，Drawcall 會上升，但能減少 CPU 的運算負(fù)擔(dān)，適用于復(fù)雜的動畫。 |
二、組件方法
- setSkeletonData 設(shè)置底層運行時用到的 SkeletonData。
- setSlotsRange 設(shè)置骨骼插槽可視范圍。
- setAnimationStateData 設(shè)置動畫狀態(tài)數(shù)據(jù)。
- setAnimationCacheMode 若想切換渲染模式，最好在設(shè)置'dragonAsset'之前，先設(shè)置好渲染模式，否則有運行時開銷。
- isAnimationCached 當(dāng)前是否處于緩存模式。
- setVertexEffectDelegate 設(shè)置頂點動畫代理
- updateWorldTransform 當(dāng)獲取 bone 的數(shù)值未更新時，即可使用該函數(shù)進(jìn)行更新數(shù)值。
- setToSetupPose 還原到起始動作
- setBonesToSetupPose 使用 SkeletonData 中的 BoneData 列表中的值。
- setSlotsToSetupPose 設(shè)置 slot 到起始動作。
- updateAnimationCache 更新某個動畫緩存, 預(yù)計算動畫中所有幀數(shù)據(jù)，由于在單幀計算所有數(shù)據(jù)，所以較消耗性能。
- invalidAnimationCache 使動畫緩存失效，之后會在每幀重新計算。
- findBone 通過名稱查找 bone。
- findSlot 通過名稱查找 slot。
- setSkin 按名稱查找皮膚，激活該皮膚。
- getAttachment 通過 slot 和 attachment 的名稱獲取 attachment。
- setAttachment 通過 slot 和 attachment 的名字來設(shè)置 attachment。
- getTextureAtlas Return the renderer of attachment.
- setMix 為所有關(guān)鍵幀設(shè)定混合及混合時間（從當(dāng)前值開始差值）。
- setAnimation 設(shè)置當(dāng)前動畫。
- addAnimation 添加一個動畫到動畫隊列尾部，還可以延遲指定的秒數(shù)。
- findAnimation 查找指定名稱的動畫
- getCurrent 通過 track 索引獲取 TrackEntry。
- clearTracks 清除所有 track 的動畫狀態(tài)。
- clearTrack 清除出指定 track 的動畫狀態(tài)。
- setStartListener 用來設(shè)置開始播放動畫的事件監(jiān)聽。
- setInterruptListener 用來設(shè)置動畫被打斷的事件監(jiān)聽。
- setEndListener 用來設(shè)置動畫播放完后的事件監(jiān)聽。
- setDisposeListener 用來設(shè)置動畫將被銷毀的事件監(jiān)聽。
- setCompleteListener 用來設(shè)置動畫播放一次循環(huán)結(jié)束后的事件監(jiān)聽。
- setEventListener 用來設(shè)置動畫播放過程中幀事件的監(jiān)聽。
- setTrackStartListener 用來為指定的 TrackEntry 設(shè)置動畫開始播放的事件監(jiān)聽。
- setTrackInterruptListener 用來為指定的 TrackEntry 設(shè)置動畫被打斷的事件監(jiān)聽。
- setTrackEndListener 用來為指定的 TrackEntry 設(shè)置動畫播放結(jié)束的事件監(jiān)聽。
- setTrackDisposeListener 用來為指定的 TrackEntry 設(shè)置動畫即將被銷毀的事件監(jiān)聽。
- setTrackCompleteListener 用來為指定的 TrackEntry 設(shè)置動畫一次循環(huán)播放結(jié)束的事件監(jiān)聽。
- setTrackEventListener 用來為指定的 TrackEntry 設(shè)置動畫幀事件的監(jiān)聽。
- getState 獲取動畫狀態(tài)
- getMaterial 根據(jù)指定索引獲取材質(zhì)
- getMaterials 獲取所有材質(zhì)。
- setMaterial 根據(jù)指定索引設(shè)置材質(zhì)
- update 如果該組件啟用，則每幀調(diào)用 update。
- lateUpdate 如果該組件啟用，則每幀調(diào)用 LateUpdate。
- __preload __preload is called before every onLoad....
- onLoad 當(dāng)附加到一個激活的節(jié)點上或者其節(jié)點第一次激活時候調(diào)用。
- start 如果該組件第一次啟用，則在所有組件的 update 之前調(diào)用。
- onEnable 當(dāng)該組件被啟用，并且它的節(jié)點也激活時。
- onDisable 當(dāng)該組件被禁用或節(jié)點變?yōu)闊o效時調(diào)用。
- onDestroy 該方法為生命周期方法，父類未必會有實現(xiàn)。
- onFocusInEditor
- onLostFocusInEditor
- resetInEditor 用來初始化組件或節(jié)點的一些屬性，當(dāng)該組件被第一次添加到節(jié)點上或用戶點擊了它的 Reset 菜單時調(diào)用。
- addComponent 向節(jié)點添加一個組件類，你還可以通過傳入腳本的名稱來添加組件。
- getComponent 獲取節(jié)點上指定類型的組件，如果節(jié)點有附加指定類型的組件，則返回，如果沒有則為空。
- getComponents 返回節(jié)點上指定類型的所有組件。
- getComponentInChildren 遞歸查找所有子節(jié)點中第一個匹配指定類型的組件。
- getComponentsInChildren 遞歸查找自身或所有子節(jié)點中指定類型的組件
- _getLocalBounds 以便編輯器的場景視圖可以正確地執(zhí)行點選測試。
- onRestore onRestore 是用戶在檢查器菜單點擊 Reset 時，對此組件執(zhí)行撤消操作后調(diào)用的。
- schedule 調(diào)度一個自定義的回調(diào)函數(shù)。
- scheduleOnce 調(diào)度一個只運行一次的回調(diào)函數(shù)，可以指定 0 讓回調(diào)函數(shù)在下一幀立即執(zhí)行或者在一定的延時之后執(zhí)行。
- unschedule 取消調(diào)度一個自定義的回調(diào)函數(shù)。
- unscheduleAllCallbacks 取消調(diào)度所有已調(diào)度的回調(diào)函數(shù)：定制的回調(diào)函數(shù)以及 update 回調(diào)函數(shù)。
- destroy 銷毀該對象，并釋放所有它對其它對象的引用。
- _destruct 清除實例中的所有引用。
- _onPreDestroy 在對象被銷毀之前調(diào)用。
- _serialize 為此對象定制序列化。
- _deserialize 從自定義序列化數(shù)據(jù)初始化此對象。
三、方法介紹
var s: sp.Skeleton;
s.setAnimation(0, "run", false); //在track0播放動畫"run"，不循環(huán)
s.setSkin("01"); //替換皮膚
s.clearTrack(0); //停止播放
s.addAnimation(0, 'attack', false, 0);//addAnimation方法可以在當(dāng)前動畫的基礎(chǔ)上添加新的動畫。它接受四個參數(shù)：軌道索引、動畫名稱、循環(huán)方式和延遲時間。
s.setMix('idle', 'attack', 0.2); //setMix方法用于設(shè)置兩個動畫之間的混合過渡時間。它有三個參數(shù)，分別是起始動畫名稱、目標(biāo)動畫名稱和混合時間（以秒為單位）。
this.spine.setCompleteListener(function (trackEntry, loopCount) {
console.log('Animation ' + trackEntry.animation.name + ' completed');
});
//setCompleteListener方法用于設(shè)置當(dāng)動畫播放完成時的回調(diào)函數(shù)。它接受一個參數(shù)，即回調(diào)函數(shù)。這段代碼將在動畫播放完畢時打印相應(yīng)的日志信息。四、掛點生成
????????在使用骨骼動畫時，經(jīng)常需要在骨骼動畫的某個部位上掛載節(jié)點，以實現(xiàn)節(jié)點與骨骼動畫聯(lián)動的效果。我們可以通過使用編輯器和腳本兩種方式來實現(xiàn) Spine 掛點，下面用一個范例來介紹 Spine 如何使用掛點將圖片掛在龍的尾巴上，并隨著龍的尾巴一起晃動。
1.首先在?層級管理器?中新建一個空節(jié)點并重命名。選中該節(jié)點然后在?屬性檢查器?中添加 Spine 組件，并將資源拖拽至 Spine 組件的 Skeleton Data 屬性框中，設(shè)置好 Spine 組件屬性。然后點擊 Spine 組件下方的?生成掛點?按鈕。
2.點擊?生成掛點?按鈕后，層級管理器?中 Spine 組件所在節(jié)點的下方，會以節(jié)點樹的形式生成所有骨骼。
3.在?層級管理器?中選中目標(biāo)骨骼節(jié)點（龍的尾巴）作為父節(jié)點，創(chuàng)建一個 Sprite 節(jié)點為子節(jié)點。
即可看到在?場景編輯器?中龍的尾巴上已經(jīng)掛了一個 Sprite。
4.保存場景，點擊編輯器上方的預(yù)覽按鈕，即可看到圖片掛在龍的尾巴上，并隨著龍的尾巴一起晃動。?
????????注：Spine 掛點完成后，即可刪除?層級管理器?中無用的骨骼節(jié)點，以減少運行時的計算開銷。注意目標(biāo)骨骼節(jié)點的父節(jié)點都不可刪。
腳本實現(xiàn)掛點
1.跟通過編輯器實現(xiàn)的步驟類似，首先先創(chuàng)建一個掛有 Spine 組件的節(jié)點，并設(shè)置好 Spine 組件的屬性。
2.創(chuàng)建要掛載到骨骼動畫上的圖片預(yù)制資源。
3.在資源管理器中新建一個 JavaScript 腳本，編寫組件腳本。腳本代碼如下：
cc.Class({
extends: cc.Component,
properties: {
skeleton: {
type: sp.Skeleton,
default: null,
},
// 將要添加到骨骼動畫上的預(yù)制體
targetPrefab: {
type: cc.Prefab,
default: null,
},
// 目標(biāo)骨骼名稱
boneName: "",
},
onLoad () {
this.generateSomeNodes();
},
generateAllNodes () {
// 取得掛點工具
let attachUtil = this.skeleton.attachUtil;
attachUtil.generateAllAttachedNodes();
// 因為同名骨骼可能不止一個，所以需要返回數(shù)組
let boneNodes = attachUtil.getAttachedNodes(this.boneName);
// 取第一個骨骼作為掛點
let boneNode = boneNodes[0];
boneNode.addChild(cc.instantiate(this.targetPrefab));
},
destroyAllNodes () {
let attachUtil = this.skeleton.attachUtil;
attachUtil.destroyAllAttachedNodes();
},
// 生成指定骨骼名稱節(jié)點樹的方法
generateSomeNodes () {
let attachUtil = this.skeleton.attachUtil;
let boneNodes = attachUtil.generateAttachedNodes(this.boneName);
let boneNode = boneNodes[0];
boneNode.addChild(cc.instantiate(this.targetPrefab));
},
// 銷毀指定骨骼名稱節(jié)點的方法
destroySomeNodes () {
let attachUtil = this.skeleton.attachUtil;
attachUtil.destroyAttachedNodes(this.boneName);
}
});4.將腳本掛載到 Canvas 節(jié)點或者其他節(jié)點上，即將腳本拖拽到節(jié)點的屬性檢查器中。然后再將對應(yīng)的節(jié)點或者資源拖拽到腳本組件的屬性框中，并保存場景。
????????若不知道目標(biāo)骨骼的名稱，可點擊 Spine 組件中的?生成掛點?按鈕，然后在層級管理器中 Spine 節(jié)點下生成的骨骼節(jié)點樹中查找。查找完成后再刪除 Spine 節(jié)點下的骨骼節(jié)點樹即可。文章來源：http://www.zghlxwxcb.cn/news/detail-413859.html
????????總之，Spine組件是CocosCreator游戲引擎中非常重要和實用的組件之一，其核心思想是將繪制元素分解為多個部位，并通過骨骼節(jié)點進(jìn)行關(guān)聯(lián)和控制。這種方式可以讓動畫更加靈活和高效，同時也降低了資源的消耗。幫助開發(fā)者輕松加載和控制Spine動畫資源，為游戲增添更多的精彩動畫效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-413859.html
到了這里，關(guān)于【CocosCreator入門】CocosCreator組件 | Spine（骨骼動畫）組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
