cocos2d-js V3.0 V3.1使用DragonBones

DragonBones是Adobe支持的一个开源项目，用于制作和播放骨骼动画，官网地址是：http://dragonbones.effecthub.com/。DragonBones首先在Flash和Starling引擎上使用，后续继续推广支持多个游戏引擎，现在已经能很好的支持HTML5和cocos2d-x。

DragonBones提供了Flash的插件，用于生成骨骼动画文件，称为DragonBonesDesignPanel，结合Flash和DragonBonesDesignPanel可以很方便的完成骨骼动画制作。相对而言，DragonBones在制作上比Cocos Studio的动画编辑器更方便，也更符合设计师的使用习惯，因为大部分设计师都有Flash使用经验。

由于cocos2d-js V3.1只支持2.0到2.2版本的DragonBonesDesignPanel，所以我们不能直接使用官网提供的最新版DragonBonesDesignPanel。我们只能使用cocos团队修改过的DragonBonesDesignPanel V2.0，访问http://www.cocoachina.com/bbs/read.php?tid=154886下载。说起这个2.0版本的下载地址，一把辛酸泪啊。只相隔那么一年，cocos的论坛由于做了合并，原来的帖子地址都变了，而DragonBones这种外来物种，没有足够地位，cocos团队都忘记这个DragonBonesDesignPanel V2.0了。笔者我好不容易才翻箱倒柜找到这个下载地址。

另外，网上也有高手（zrong）制作了专门支持cocos2d的DragonBonesDesignPanel V2.2版本，下载地址是：https://github.com/zrong/dragonbones-for-cocos2d-x/tree/master/build。

额外提醒一下，安装DragonBonesDesignPanel后，这个插件会自动升级，如果过一段时间发现cocos2d-js无法加载DragonBonesDesignPanel导出的文件，就要拿出旧版的安装文件重新安装了。

另外，由于DragonBones和Cocos2d-js都是开源的， 所以如果还有进一步问题，我们可以学习一下zrong，自己动手修改代码。当然，你需要知道怎么用Flash builder。。。说到DragonBones源代码也是一个纠结的事，官方并没有放出所有历史版本，害得我也是累死累活的才找到V2.2和V2.0的版本回来做比较。分享给大家：

只需要按照DragonBones的制作规范制作动画，再使用修改版的DragonBonesDesignPanel，就可以轻松在cocos2d-js加载DragonBones骨骼动画。

如果使用zrong的版本，导出时直接选择cocos2d版本，导出的是plist、大图和xml；而cocos提供的2.0版本则导出碎图+xml，我们还需要另行把碎图变成Spritesheet。

加载的代码很简单：

        ccs.armatureDataManager.addArmatureFileInfo("res/dragonbones/skeleton.png", "res/dragonbones/skeleton.plist", "res/dragonbones/skeleton.xml");

        var armature = new ccs.Armature("Dragon");

        armature.getAnimation().play("stand");

        armature.getAnimation().setSpeedScale(24/60);

播放时，大家可能会发现卡顿或跳动的情况，那是因为在cocos2d-js中使用DragonBones，还有一个额外的规范。每个动作的最后一帧需要把所有的部件回位，否则就出现跳动。因为最后一帧到第一帧这个过程，DragonBones自己的运行库会做平缓过度，而cocos2d-js解析则没有这个过度，所以我们就要自己动手加一帧了。

凑合着，还是可以用起来了。不过，cocos2d-js肯定比不上DragonBones官方自己的运行库了，而现在DragonBones已经有C++版本了：https://github.com/DragonBones/DragonBonesCPP，说白了就是为了支持cocos2d-x。我们可以考虑自行加上js绑定，从而让cocos2d-js也用上最新版的DragonBones。咳咳，当然，这个工作得有需求推动啊，如果有时间的话，笔者也许会尝试一下吧。