2017年10月1日
cocos Creator 龙骨动画不过如此
朋友们你们好,今天要给大家分享的是cocos Creator龙骨动画的播放以及一系列的操作。
DragonBones 骨骼动画,又叫龙骨动画,由白鹭时代推出的动画解决方案,免费。
导出时请注意
- 目前的Cocos Creator支持的数据版本是4.5
- 类型是DragonBones
- 输出比例可以根据需求设置
导出的是三个文件
- _tex.png 资源图集
- _tex.json 图集位置文件
- _ske.json 骨骼动画文件
在Cocos Creator 中使用
- 把导出的三个文件放到项目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
priligy cvs serpina levofloxacin eye drop coupon Will people accept being property again
priligy dapoxetine 60mg Гў Vida gkuRDBoujtsL 6 18 2022