2017年10月1日

cocos Creator 龙骨动画不过如此

作者 admin

朋友们你们好，今天要给大家分享的是cocos Creator龙骨动画的播放以及一系列的操作。

DragonBones 骨骼动画，又叫龙骨动画，由白鹭时代推出的动画解决方案，免费。

导出时请注意

导出的是三个文件

把导出的三个文件放到项目assets的同一文件下
在Scene中建一个空节点
在空节点的属性检查器中通过添加组件方式添加dragonBones组件
将_ske.json 拖到dragonBones组件的 Dragon Asset 属性
- 将_tex.json 拖到dragonBones组件的 Dragon Atlas Asset 属性
像这样：

请看右侧，分别是刚刚我们放置的内容，龙骨我们放置好了，接下来看一下运行效果:

现在龙骨已经可以正常运行了,我们的大宽在原地谈起了钢琴，接下来是我们的重头戏，切换龙骨动画，

之前我去群里问一些关于龙骨的操作，有个群友直接给我来了一句看demo,一句mmp不知当讲不当讲，我能看懂官方的demo我还问什么，真是呵呵了，最后还是自己边琢磨边调试出来了。

官方唯一有给出的api,

(Armature Display 具有对骨骼数据的引用并且存储了骨骼实例的状态，它由当前的骨骼动作，slot 颜色，和可见的 slot attachments 组成。
多个 Armature Display 可以使用相同的骨骼数据，其中包括所有的动画，皮肤和 attachments。)

playAnimation ( animName playTimes )return dragonBones.AnimationState播放指定的动画. animName 指定播放动画的名称。 playTimes 指定播放动画的次数。 -1 为使用配置文件中的次数。 0 为无限循环播放。仅仅这些还不够，接下来我贴出自己的代码，给大家参考，

var dragonBoneNode = cc.find(“Canvas/dragonBone/dragNode”);

console.log(dragonBoneNode);

控制台已经能够获取到这个deagNode这个节点了，接下来获取龙骨组件，

获取龙骨节点：

var displayDrag = dragonBoneNode.getComponent(“dragonBones.ArmatureDisplay”);

获取dragNode节点上指定类型的组件，这里的组件指的就是我们的龙骨组件，

接下来要用到一个函数

displayDrag.animationName：设置龙骨动画的动画名称。

今天演示的项目里面的龙骨是有6个动作

诶？这个贴图没法旋转，各位凑合着看吧，

varanim=displayDrag.animationName=”swim”;

console.log(anim);

displayDrag.playAnimation(anim,0);

已经成功切换到了swim这个动画，大宽已经切换到了游泳动画。

由于是公司项目所以在这里不放源码了，关于龙骨后续其实有很多完善的地方，比如：动态创建遍历龙骨骨骼，插入骨骼动画操作，还有龙骨动画的遍历等等，今天的内容作为基础，对于丰富后续的龙骨动画功能具有很大的意义。

今天又是代码满满的一天，最后祝祖国母亲节日快乐，祝大家国庆节快乐。

githunb 龙骨参考js代码：https://github.com/894658027/HTML5-Games/tree/master/cocosCreator/dragonBones