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

感谢『简书 ID: 曾彬思』友情提供

http://www.jianshu.com/p/a8686e5e30e9

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

1

导入资源文件

fd3f505da2dbca78e61e44625d232fd2.png

导入文件

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

2

创建游戏对象

f9c8051ab8a347c013e87c8434f66eb7.png

创建一个空的游戏对象

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

3

添加组件

faf5048b1d9e1dcf0cbc18c5ae026052.jpeg

添加龙骨组件

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

9a2d04639c63cee1feba9f31f3966dcf.png

组件属性说明

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

4

绑定骨骼数据

5ecda16120f12e956353970a7f6685b0.png

对应的资源文件绑定

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

a0f03ec2ef01bbad0c3a78aabbb22c96.png

选择显示的骨架和动画

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

437de9a4aa598872fdbcd0eed787b4d7.png

Scene预览

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

5

添加脚本组件

e279612d9e5aad6d0773f23311f8dbeb.jpeg

新建脚本组件

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

5b5ed279499e37ca9657d786ade685dc.png

绑定脚本组件

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

6

编辑脚本组件代码

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

修改代码如下:

c9136b11050977c5933dc6b8043075c1.jpeg

aeb1a4d7481048802a2184f20a9290b6.jpeg

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

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

虽然本教程基于Cocos Creator v1.4版本编写,

但目前官方已经出到最新v1.5.2,

有需要的小伙伴自行进阅读原文下载升级哦。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值