1. 程式人生 > >cocos creator動態載入DragonBones

cocos creator動態載入DragonBones

這裡寫圖片描述
根據creator的龍骨元件來看的話新增一個龍骨的話需要設定五個地方,分別是DragonAsset(龍骨的配置json檔案),DragonAtlas(龍骨的紋理json資源),Armature(Armature名稱),Animation(Animation名稱),playTimes(動畫的迴圈次數)。
如果只是播放一個單一的龍骨的話直接把資源拖到相應的位置,設定一下動畫然後就ok了,但是需要切換不同的龍骨的資源的時候要咋辦?按照我的經驗來說的話有如下三點可以解決:

  1. 製作成預製資源,在需要的時候載入不同的預製體。
  2. 事先把每個需要用到的龍骨附加到不同的節點,然後根據需要哪個龍骨進行顯示跟隱藏。
  3. 動態載入龍骨,利用一個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方法裡面設定才生效。