Egret社区

DragonBones 5.3 新特性详解

2017-7-4 11:36
1078819
本帖最后由 superlancelot 于 2017-7-12 13:40 编辑

DragonBones 5.3新特性详解

本次DragonBones5.3 相对上一个版本5.2提供了很多新增功能和用户体验提升。
具体包括:
1.      新增序列帧元件类型,更方便更直观的制作序列帧动画。
2.      支持导出二进制格式,H5运行库性能大幅提升。
3.      为元件增加画布属性,可以设置元件的边框和背景色。
4.      新增克隆元件的功能。
5.      多选网格点,也可以按Ctrl+数字编组。
6.      将发布网页的功能集成到导出面板中。(导出HTML,类型选择"发布")
7.      降低在线检测的频率,离线状态也可以保存项目。
8.      优化ps导入插件,解决有时从ps导入的图片尺寸过大无法显示的问题。
9.      右键点击时间轴空白处就能够在两帧之间创建补间
10.   导出成功后弹出的提示窗口上,点击导出路径后,提示窗口会自动关闭。

下面详细介绍前面新增的四个功能
l  新增序列帧元件类型,更方便更直观的制作序列帧动画
在游戏中有很多简单的动画需要用序列帧实现,龙骨主打骨骼动画的制作,做起简单的序列帧动画并不顺手。基于大量真实用户需求,我们决定针对最简单的序列帧动画提供单独的元件。
frames1.png
这个全新的序列帧原件,可以方便快捷的制作逐帧动画。只需要将图片序列拖拽到场景中,就会自动排列生成逐帧动画序列。可以对图片进行快速排序,通过键盘微调图片对齐,快速调节轴点位置、水平翻转、垂直反转以及应用到所有帧。还有洋葱皮功能,开启后可以方便的调节和前一帧或后一帧的对齐。
如果制作像素风的逐帧动画,建议在“偏好设置”里关闭“图片平滑显示”。

这里有一段视频做了详细介绍:(视频录制中,敬请期待…

l  支持导出二进制格式,H5运行库性能大幅提升
龙骨团队历时3个月的二进制数据格式的研究终于在这个版本正式出炉了。同时配套提供了支持解析二进制数据的TS库,已经集成到Egret 4.x引擎中,即将发布。(其他语言的解析库将在不久之后陆续上线)
binary.png
二进制数据带来的好处本质上和现在的Egret极速格式是一样的,和JSON比,他能降低70%的内存消耗,大幅减少加载时间,并且在开启数据缓存的情况下能大幅提高运行效率。那他和Egret极速格式的区别是什么呢?重点来了,使用二进制格式不会带来任何动画特性的损失。也就是说不论是是网格、蒙皮、柔体动画、多动画混合,二进制格式都能完美支持。理论上可以完全代替JSON格式!并且性能上也比Egret极速格式有了进一步的提升。

下面用一幅图回顾龙骨近3年来性能的提升。
这是龙骨从2015年到2017年针对普通动画和柔体动画在H5上的性能打分(能跑到60帧的显示对象数)
performance.png
  • 15年11月份,龙骨率先推出支持动画缓存的数据格式:“Egret极速格式1.0”。这个格式在性能上一举击败starlingswf(当时另一个支持flash动画转化的解决方案)。后来starlingswf逐渐退出历史舞台。
  • 16年7月份,龙骨再次性能升级,推出“Egret极速格式2.0”。通过对部分高级功能的裁剪,性能大幅提高,超越了Spine的H5版本,达到和当时号称H5性能之王的Laya的同样水平。(后来Laya性能又进一步提升,实现了反超)
  • 17年7月份,龙骨再次优化性能,并推出“龙骨二进制格式”。实现了在不舍弃高级功能的前提下,性能的提升和内存占用的降低。例如柔体动画,基于上图的测试环境,目前龙骨可以实现570个显示对象+9120个网格点在千元机微信环境跑到60fps,在全球H5动画运行时范围,性能最高,再次超越Laya。经测试目前龙骨的运行效率比Laya高大约30%。

下面是两个性能对比demo:

  • 老板本龙骨相比,性能提升约100%
performance.jpg
测试链接:
测试环境及结论:
在红米 Note + 微信环境,纹理集尺寸:256x128,目标帧率45帧:
新版本龙骨使用二进制格式能运行柔体动画 855个显示对象+13689个顶点
老版本龙骨使用JSON格式能运行柔体动画 475个显示对象+9025个顶点

  • 和Laya相比,性能大幅超越
performance2.jpg
测试链接:
测试环境及结论:
在红米 Note2 + 微信环境,纹理集尺寸:1024x1024,显示相同数量骨骼动画:
龙骨二进制格式 平均帧率达到 30帧
Laya官方Demo平均帧率只有 14帧

对于任何版本或者格式的升级,我们最最优先考虑的就是向下兼容问题。因为用户至上是龙骨团队一贯秉承的价值观。
使用二进制格式的(兼容)注意事项
1. 二进制格式的使用方式和JSON完全一致,所有的API都没有任何变化。
2.唯一需要注意的是,JSON是文本格式,二进制是二进制格式, 所以加载资源的时候,需要注意一下资源类型。如果您使用的是Egret官方提供的资源管理模块,则资源类型需要设置成"bin",否则将出现数据解析错误。
无标题.png


l  为元件增加画布属性,可以设置元件的边框和背景色
很多用户希望龙骨在导出序列帧的时候,能够设置边界。这期为元件增加了画布的功能,一方面能够实现导出图片的边界的自定义,另一方面能够实现任意对象的直接发布。过去只有主舞台才能够直接发布能够直接运行的网页,现在任何元件只要增加了画布属性就能够支持发布。
canvas.png
在属性面板的画布属性前打勾就能够开启画布,之后可以设置画布的尺寸、位置和颜色。颜色是可选的,不选颜色将维持透明背景。点击“匹配最小图像区域” 按钮,可以将画布设置为等同最小图像区域。
另外主舞台这个元件类型未来将会消失,因为本质上影片剪辑元件加上画布就等同于主舞台。考虑到兼容性问题,这期先保留了主舞台。如果不出意外,下期将会彻底去掉主舞台这个元件类型。

l  新增克隆元件的功能
以前想克隆元件必须要导出之后再导入,现在可以在资源面板的右键菜单中使用“直接复制了。
clone.png
分享到 :
1 人收藏

19 个回复

倒序浏览
a7416818  登堂入室 | 2017-7-4 13:06:46
先占个楼~~~~~
sxtaosdo  炉火纯青 | 2017-7-6 10:16:04
支持~~~~~~~~~~~~~~~
xiashu  圆转纯熟 | 2017-7-6 12:06:10
好样的,这个工具越来越强大了
punyswing  初学乍练 | 2017-7-6 14:25:12
二进制的数据,支持pixi版本吗,github上面的版本什么时候更新啊。。。?
superlancelot  官方团队 | 2017-7-7 11:22:13
punyswing 发表于 2017-7-6 14:25
二进制的数据,支持pixi版本吗,github上面的版本什么时候更新啊。。。?

会逐步更新的
cst4you  登堂入室 | 2017-7-7 12:23:31
帧 color matrix 功能可以考虑添加吗, 现在光一个颜色选择器无法满足需求, 我看导出来最终也是转成了 matrix
希望可以有更详细的颜色变换功能
wuzhikun3301  圆转纯熟 | 2017-7-7 14:30:23
koyonuji  登堂入室 | 2017-7-8 15:48:52
Lakeshore能支持么?
杨博士  略有小成 | 2017-7-9 11:29:28
好东西  学习一下
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2016 Comsenz Inc.

返回顶部