图解|手把手带你玩转 DragonBones 骨头旋转

赞赏 2017-07-27

刚刚接触Cocos Creator(简称:ccc)不久,对于Creator还是比较陌生的。之前有个朋友发了一个 DragonBones 的骨骼动画文件,说看能不能让里面的轮子转动起来。由于 ccc 和 Unity3D 都是组件化的编辑器,所以基本操作类似,我便开始尝试。


01 导入资源文件

导入文件

如上图所示,在资源管理器的assets文件夹下新建一个“test”文件夹,然后将DragonBones的三个资源文件拷贝到该目录下即可。

02 创建游戏对象


创建一个空的游戏对象


在游戏场景内添加一个空的节点,在层级管理器内将其拖拽成为Canvas的子节点,然后修改空节点的名称为“car”。


03 添加组件


添加龙骨组件


在层级管理器内选中car,然后点击菜单栏的“组件->添加渲染组件->DragonBones”为car添加一个骨骼动画组件。


组件属性说明

添加后可以在属性检测器面板上看到该组件。


04 绑定骨骼数据


对应的资源文件绑定

将资源管理器中的骨骼数据和骨骼纹理集数据拖拽到属性检测器dragonBones.ArmatureDisplay组件的对应属性上松开即可完成绑定。

选择显示的骨架和动画

然后设置对应的Armature和Animation属性。


Scene预览

完成以上操作,DragonBones的骨骼动画就成功的显示在了场景编辑器面板中。

05 添加脚本组件


新建脚本组件

在资源管理器的test文件夹上右键“新建->JavaScript”创建一个脚本组件,并命名为“TestDB”。

绑定脚本组件

将该脚本组件直接从资源管理器拖拽到属性检查器面板松开,完成组件绑定。


06 编辑脚本组件代码


双击资源管理器的“TestDB”组件,打开代码编辑器

修改代码如下:

完成编辑后保存,运行即可看到效果。

之前有在此处踩坑的小伙伴们,记得收藏。

虽然本教程基于Cocos Creator v1.4版本编写, 但目前官方已经出到最新v1.5.2,有需要的小伙伴自行下载升级哦。

登陆后阅读全文
阅读 1515 赞赏 0 有用 2 没用 1 收藏 0 分享

   



0 条留言

相关文章

教程:Cocos Creator如何给资源打上MD5版本号?

教程|如何在Cocos Creator v1.5中集成 Pomelo?

看 Nantas手把手为你详解 v1.5资源导入导出工作流程

Cocos Creator v1.6使用体验Q&A

教程|如何在Cocos Creator 中完美使用 protobuf.js

Cocos Creator可以用来开发大型MMO吗?

Cocos Creator 开源游戏集合贴 (源码 视频 在线统统有)

【Cocos Creator与C++知识分享】AnySDK打包微信登录、微信分享

干货|Cocos Creator Zip压缩文件读取分享

Cocos Creator v1.6支持Camera剔除功能!

有料推荐

这世界欠我一个这样的老公!

高校学生模仿“世界名画”摆拍,可以说是戏精本精了

iPhone X 跌破发行价,苏宁200亿入股恒大 | 财经日日评

果然是高手!这次在日本,特朗普竹杠敲得不是一般狠

资深黄牛现身说法:iPhone X价格秒变不停,就像炒股一样

长一样的双胞胎也能识别?蚂蚁金服发布「眼纹识别」技术

苏联是怎么被阿富汗拖垮的?

美团或入局「分时租赁」共享汽车,王兴要大笔投入「泛出行」领域了? | 36氪独家

你或许被“一盘番茄炒蛋”刷屏了,但有人辛酸,有人质疑

iPhone X发售前夜,黄牛与苹果公司的不安

他的文章

低内存占用、无广告、功能强大又唯美的本地播放器 - Potplayer

从零开始手把手带你全面认识 网易的游戏服务端框架 Pomelo

推荐一款上线 Cocos商店的付费插件——可视化状态机

手把手教你如何优化cocos2d-x手游内存

「新手向」用Cocos Creator也可以轻松做阿拉斗牛

Cocos Creator v1.6支持Camera剔除功能!

Cocos Creator v1.6使用体验Q&A

Cocos Creator可以用来开发大型MMO吗?

教程:Cocos Creator如何给资源打上MD5版本号?

「教程」如何在Cocos Creator中优化首页打开速度

手机扫一扫
分享文章