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的，我也使用了，大致生成文件和Dragonbones是一样的，但是当时没找对方法失败了，如果不出意外，用第二种引入是可以的。
如果有什么问题欢迎讨论留言~

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