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。咳咳,当然,这个工作得有需求推动啊,如果有时间的话,笔者也许会尝试一下吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏不二小段

【一起学Python】STEAM游戏评测爬虫

别催更,越催越懒得写。催更只接受赞赏…可惜我的微信还没有赞赏的功能… 今天刚接的需求&新鲜的代码… 有个大佬昨天跟我说 来给我爬一下Steam的游戏评测吧,我...

1.4K60
来自专栏SAP最佳业务实践

SAP最佳业务实践:使用看板的生产制造(233)-11重复制造反冲

1、MFBF重复制造反冲 此活动在单个步骤中执行多个活动,如产成品的收货、组件物料的反冲、成本到成本收集器的过帐以及物料和会计凭证的创建。 反冲时可能会出现错误...

36650
来自专栏一个番茄说

iOS 开发安全那些事儿

​ 随着移动互联网的普及,被越来越多的心怀不轨的人觊觎,也越来越多的安全问题暴露了出来。开发者开发出来的应用被安装在设备上之后,用户并不具有专业的安全知识。...

12830
来自专栏鹅厂优文

开发效率太低?您可能没看这篇文章

还记得刚参加工作的时候, 有位开发的同事软件使用效率奇高. 我曾亲眼目睹他在几秒之内打开开发软件, 优雅地调出隐藏的功能, 输入数据输出结果的过程行云流水, 一...

78120
来自专栏Jerry的SAP技术分享

SAP Fiori应用的三种部署方式

封面图片来自Google搜索,关键字: Fiori Deployment

239100
来自专栏IMWeb前端团队

flash直播

本文作者:IMWeb ninawu 原文出处:IMWeb社区 未经同意,禁止转载 接触了一段时间的flash直播,无论是腾讯课堂‘数据生成模式’实现的...

55950
来自专栏一“技”之长

iOS9系列专题三——应用瘦身 原

        apple在iOS9中引入了一套新的app瘦身方案,通过一些优化策略,将尽可能的减小app安装包的体积。这部分的大多工作是由app store来...

9320
来自专栏DeveWork

WebFont 三宗罪之一:WebFont 与 FOUT

四赴T.I.T 创意园面试,所学甚多。这篇文章是昨天面试中探讨的一个问题所延伸而来,现在都说WebFont 怎么好怎么好,让我们逆向思维,揭底WebFont 的...

33070
来自专栏WeTest质量开放平台团队的专栏

安卓易学,爬坑不易——腾讯老司机的RecyclerView局部刷新爬坑之路

安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人。下面让我们看看腾讯开发工程师用实例讲解自己踩坑时的...

12020
来自专栏互联网杂技

你知道吗?Web的26项基本概念和技术

Web 开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行。今天,本文向初学者介绍一些 Web 开发中的基本概念和用到的技术,从...

368100

扫码关注云+社区

领取腾讯云代金券