CocosJS+ CocosStudio/ DragonbonesPro骨骼動畫詳細教學

前幾天項目裏用到骨骼動畫製做，鑑於CocosJS在網上查找了許多方法，成功的有如下兩個：

CocosJS 3.15 + CocosStudio 1.6；
CocosJS 3.15 + DragonbonesPro 5.6.3；

共同部分（資源預備resourse.js）：
導出CocosStudio直接默認，Dragonbones選擇數據類型Spine

var res = {
    // HelloWorld_png : "res/HelloWorld.png",
    
    //DragonBones
    Dragon_Animation: "res/Dragon.json",
    Dragon_tex_atlas: "res/Dragon.atlas",
    Dragon_tex_png: "res/Dragon.png",
    
    //CocosStudio
    Comet_plist: "res/Comet.plist",
    DemoPlayer_Animation: "res/DemoPlayer.ExportJson",
    DemoPlayer0_plist: "res/DemoPlayer0.plist",
    DemoPlayer1_plist: "res/DemoPlayer1.plist",
    DemoPlayer0_png: "res/DemoPlayer0.png",
    DemoPlayer1_png: "res/DemoPlayer1.png",
};

1.CocosJS 3.15 + CocosStudio 1.6引入方式；

var size = cc.winSize;
ccs.armatureDataManager.addArmatureFileInfo(res.DemoPlayer_Animation)
        this.cowBoy =new ccs.Armature("DemoPlayer");
        this.cowBoy.attr({
            x: size.width / 3.5,
            y: size.height / 3
        });
        this.cowBoy.animation.play("walk_fire");//這裏使用項目中你指定的某個動畫名稱
        this.cowBoy.setScale(0.5);
        this.addChild(this.cowBoy);

使用ccs.Armature時要格外注意，引入名稱必定要和你項目的ExportJson中的animation_data.name一致（你能夠直接進入該文件查看，檢查是否一致），不然會報錯Cannot read property 'getBoneDataDic' of undefined。

2.CocosJS 3.15 + DragonbonesPro 5.6.3；

引入Dragonbones文件就不用像上面那樣擔憂名字錯誤了

var size = cc.winSize;
this.dragon = new sp.SkeletonAnimation(res.Dragon_Animation,res.Dragon_tex_atlas);
        this.dragon.setAnimation(0, 'walk', true);
        this.dragon.attr({
            x: size.width / 1.5,
            y: size.height / 2
        });
        this.dragon.setScale(0.5);
        this.addChild(this.dragon);

實現效果：

後記：
Spine中使用：

var spineGirl = sp.SkeletonAnimation.createWithJsonFile(res.girl_animation, 
res.girl_plist, 1);
//createWithJsonFile不能少，雖然源碼中說v3.0以上用sp.SkeletonAnimation代替，可是少了就會報錯。
spineGirl.setPosition(cc.p(490, -240));
spineGirl.setScale(1.2,1.2);
spineGirl.setAnimation(0, 'wink', true);
this.backGoundSprite.addChild(spineGirl, 0);

另外，Dragonbone生成的spine格式JSON文件裏會一個skeleton對象，而Spine生成JSON文件的沒有，在網頁環境下沒有影響，可是win32環境中須要格式化後刪除skeleton，不然也會報錯。

若是有什麼問題歡迎討論留言~

參考文章：
https://blog.csdn.net/qq_28936845/article/details/76667363
https://www.jianshu.com/p/dc91932a5148