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