自学 Cocos JS 之 DragonBones
ninehua 2024-12-08 17:13 37 浏览
最近在自学Cocos JS，手上恰巧有一套Flash的动画源文件，打算用这些资源学习下DragonBones(龙骨动画)
流程如下：
用Cocos Creator新建项目，布局如下图：
DBAnimation是个空节点，是用来等下挂载导出的DragonBones动画数据的。等下导出龙骨动画的资源会放在SceneAnim目录下。
下载安装最新版本的DragonBones及Flash Pro插件
现在官网最新版本的DragonBones(简称DB)是5.6的官网直接下就可以，Flash Pro插件的链接指向github上，插件最新版本是V3.0.1也是直接下就可以了。
DB官网地址:http://dragonbones.com/cn/download.html
DB Flash插件地址:https://github.com/DragonBones/DesignPanel/releases
下载安装Adobe Animate及Anastasiy Extension Manager(插件管理器)
这里要说下，网上说Flash CS6也是可以的但是我DB 的Flash插件死活装不上，且Adobe官网也放弃了对Flah项目的维护(改成Animate)，如果有装了Flash CS6且装了DB Flash插件的可以跳过这步。
这里还要说下Animate是要收费的(NND，一年要 888 RMB)。对于一个小程序来说还是有点小贵，被迫无奈装了破解版。
这里只给出软件的官网地址。
Adobe Animate官网地址:https://creativecloud.adobe.com/apps/download/animate?promoid=VY36K4SD&mv=other
Anastasiy Extension Manager官网地址:http://install.anastasiy.com/
Animate 安装 DB 插件
直接将从github下的zxp插件文件拖到Animate插件管理器就可以了，如图
用软件导出程序要用的DB动画文件
工欲善其事必先利其器，通过以上步骤终于把我们需要的准备工作都做好了，下来开始导出我们即将使用的动画数据，在Animate编辑器中效果如图
然后导出成DB所能识别的动画数据，如图
再弹出的DragonBonesDesignPanel界面中点 导入-＞确定，如图
之后会弹出动画数据界面，如图
最后再点导出，导出的数据格式选Json,如图
最终指定导出文件的路径就可以了。然后再用DragonBones工具查看导出的zip包数据，如图
如果一切正常就可以在DragonBones中查看到和在Animate中一样的效果，最后再导出成最终数据如图
最后打开Cocos Creator工程，发现多了3个文件，如图
Cocos Creator编辑器中使用导出的DragonBones动画数据
选中DBAnimation节点，添加DragonBones组件，然后将骨骼数据和贴图数据拖到DB组件上，如图
添加代码根据规则播放动画
代码直接上截图，如图
最终在浏览器里的运行效果运行效果
效果如图
结语
学无止境，记录点滴，记录成长，谢谢观看。
相关推荐
- 单打独斗的产品设计师工作流程总结
-
来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。我从入行开始就在一个做自己产品的小公司工作，到现在已经三年了。刚开始工作的时候什么也不懂，老板说让出效果图，就开始直接...
- 毕业生必备软件!6套APP构建我的产品设计工作流
-
工欲善其事，必先利其器。思维和方法论固然超级重要，但是掌握并制定适合自己的工作流也可以成倍提升效率。好的软件加上熟练的使用可以帮助解决遇到的所有问题，不仅可以减轻大脑和身体的负担，更可以让产品设计师在...
- 如何在APP原型上写需求?（app原型设计规范）
-
你有没有过这样的经历——辛辛苦苦写了半天的文档，结果开发一眼没看，做需求的时候又把文档里的内容问了一遍？如果你也有这样的经历，那么在APP原型上写需求，或许能帮你解决这个问题。为什么要把需求直接写在...
- 产品经理工具箱|原型及交互设计工具
-
来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。世界上最实在最方便的原型设计及交互工具：国外的谷歌，facebook等大型互联网公司的交互工具就是上面最原始，最有效最...
- 交互设计利器汇总:实用工具大揭秘!
-
近年来，页面交互设计有了很好的发展，越来越受到人们的重视。如果你想成为一名页面交互设计师，除了对平面设计和产品设计有一定的了解外，更重要的是要知道哪个软件适合页面交互设计。本文将带您了解5款流行的页面...
- Taro - 京东凹凸实验室出品的小程序多端开发工具，内置 UI 组件库
-
可以支持转换到微信/京东/百度/支付宝/字节跳动/QQ小程序以及H5端，同时也支持使用Vue语法了。关于Taro凹凸实验室（O2Lab）来自京东零售集团，创建于2015年10月，是...
- 开发2小时，修bug2周，我用Trae做了个小程序
-
在当今快速发展的科技时代，AI技术的崛起为开发者带来了前所未有的机遇与挑战。一方面，AI极大地降低了技术门槛，让更多的创意得以快速实现；另一方面，它也提升了竞争维度，促使人们在认知、方法和时间效率上不...
- 好用的10款免费原型设计工具（免费的原型设计软件）
-
对产品经理或UI/UX设计师来说，一款好的原型设计工具至关重要。好的原型设计软件能够帮助你快速构建还原度高且信息架构清晰明了的原型图，还能极大减低工作中与同事的沟通成本，更高效地推进工作。那么，一款好...
- 用局域网内部分享Axure原型，这里有详细的步骤
-
来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。用axure做好原型，想分享给别人，有几个方法：生成本地文件，发送本地文件，但是文件有更新，就要重新发送用axure自...
- Axure制作App原型应该怎样设置尺寸?原型尺寸对照表!
-
最近有几位小伙伴儿都提出同样一个疑问：想用Axure设计一个APP原型放到真实的移动设备中演示，但不知道应该使用什么尺寸？若要解释清楚像素和分辨率需要的篇幅比较长，请大家参考百度百科。这里老枪搜集...
- 200套数据可视化大屏模版Axure高保真原型
-
超炫可视化大屏模版来了，Axure高保真原型。关注微信公众号“素材帮帮站”，发送消息100051，获取素材下载地址。查看往期文章，获取更多免费素材。
- Axure RP 8 Beta版正式上线（axure rp8是什么软件）
-
AxureSoftwareSolution公司于美国当地时间8月12日宣布其旗下产品AxureRP的v8版本的测试版正式上线。以下是其官方博客关于对AxureRP8Beta版的介绍：今天，...
- PM小技术:使用SAE发布在线Axure文档
-
俗话说，不会写代码的产品经理不是好的射鸡湿。关于产品经理与技术之间的微妙关系，扯开了讲可是长篇大论，比如知乎上这个问题：IT行业产品经理（尤其是创业的）需要懂技术吗？懂到什么程度？，以及这个：产品经...
- 『原型资源』Axure自带图标库不够用，第三方经典图标库来袭
-
今天小编为大家带来第三方经典图标库，己确认内容可用现推荐给大家。直接上手就可不用自己画哈~获取原型文档请与班主任联系！先睹为快，合适再拿走不谢：图标太多，截取部分给大家参考o(*￣︶￣*)o免费领取资...
- Axure RP 8 测试版:将于今年夏天到来
-
我们一直在努力的开发AxureRP8。我认为这是对现有客户以及刚接触Axure的人的一个重要版本。我们希望看到你使用这些新特性，所以我们对现有客户免费升级。所有有AxureRP授权的客户包括标准...