cocos creator動態載入DragonBones
阿新 • • 發佈:2019-01-26
根據creator的龍骨元件來看的話新增一個龍骨的話需要設定五個地方,分別是DragonAsset(龍骨的配置json檔案),DragonAtlas(龍骨的紋理json資源),Armature(Armature名稱),Animation(Animation名稱),playTimes(動畫的迴圈次數)。
如果只是播放一個單一的龍骨的話直接把資源拖到相應的位置,設定一下動畫然後就ok了,但是需要切換不同的龍骨的資源的時候要咋辦?按照我的經驗來說的話有如下三點可以解決:
- 製作成預製資源,在需要的時候載入不同的預製體。
- 事先把每個需要用到的龍骨附加到不同的節點,然後根據需要哪個龍骨進行顯示跟隱藏。
- 動態載入龍骨,利用一個DragonBones元件,當需要不同的龍骨資源的時候動態載入龍骨資源並附到元件上面。
分析上面三點的話,肯定是3最省事省心,1跟2的話沒有什麼難點,無非就是控制好載入哪個預製體,控制哪個節點的顯示。接下來就說說如何實現動態載入龍骨。
動態載入龍骨的思路:利用loader載入需要用到的龍骨資源,然後把需要用到的資源賦值給龍骨元件,設定好各項的引數。
程式碼如下
/**
* 動態載入龍骨
* @param animationDisplay 龍骨元件
* @param path 龍骨地址
* @param armatureName Armature名稱
* @param newAnimation Animation名稱
* @param completeCallback 動畫播放完畢的回撥
* @param playTimes 播放次數 -1是根據龍骨檔案 0五險迴圈 >0是播放次數
*/
loadDragonBones(animationDisplay, path, armatureName, newAnimation, completeCallback, playTimes = 1) { //動態載入龍骨
cc.loader.loadResDir(path, function(err, assets){
if (err || assets.length <= 0) return;
assets.forEach(asset => {
if(asset instanceof dragonBones.DragonBonesAsset){
animationDisplay.dragonAsset = asset;
}
if(asset instanceof dragonBones.DragonBonesAtlasAsset){
animationDisplay.dragonAtlasAsset = asset;
}
});
animationDisplay.armatureName = armatureName;
animationDisplay.playAnimation(newAnimation, playTimes);
animationDisplay.addEventListener(dragonBones.EventObject.COMPLETE, completeCallback);
})
}
在實現的過程中遇到的幾個坑記錄一下,一個是armatureName跟Animation一定要一起設定,設定一個的話是不起作用的。用animationDisplay.playTimes = 1的方式設定播放次數也是不起作用,必須要在playAnimation方法裡面設定才生效。