Egret社区

一个高性能的文本控件

2017-12-25 15:44
7350251
本帖最后由 qibu111 于 2018-1-19 12:31 编辑

官方提供的文本控件,在webgl下面,每多一个,就会增加一个draw。
优化思路:
webgl下面,如果所有的纹理都在一个图集,并且渲染序列是在一起的,egret底层会进行合并提交,也就是说,如果有3张图片,并且属于同一个图集,并且这3张图片的渲染顺序是上下一起的(中间没有其他图集的图片插入),那么,就是1个draw。假设我们的渲染顺序是AAAABBBB(其中A和B分别属于2个图集),那么,webgl下面就会是2个draw。同理,如果渲染顺序是ABABABAB,那么就是8个draw。根据这个思路,我们把所有的文本,变成Texture,并通过程序动态生成图集,只要我们保证文本的渲染顺序一样,即可进行文本的draw的优化。所以实际应用,建议把文本都放在一个容器中,这样文本的draw次数就会合并。
优化效果:

原生

原生

高性能

高性能

我们可以看到,除去按钮、背景、2个按钮的文字,这4个draw,我们高性能文本的draw只占了一个,而且是不同颜色的。
为什么要优化:
QuickLabel比cacheAsBitmap的好处是,前者可以移动,可以缩放等很多好处,而且内存占用没有cacheAsBitmap高。
怎么使用:
QuickLabel有个DSpriteSheet构造,这个DSpriteSheet默认尺寸是2048x2048,可以自己修改全局尺寸。另外,因为是QuickLabel是个位图,所以修改文字尺寸建议用Scale。
如果有高级需求,比如下划线、滤镜,请自己写,也很简单,在QuickLabel的key属性那进行差异化即可。
--------------------------------------------------2017-12-28日更新-----------------------------------------------------
实际使用中,为了方便,我又加了文本尺寸、布局、宽高等属性。
可以看到,我图中,这么复杂的界面,只有2个draw!
TIM截图20171228102615.png

--------------------------------------------------2017-12-29日更新-----------------------------------------------------
修复一个会导致前后key不一致的BUG
以下是最新的代码
游客,如果您要查看本帖隐藏内容请回复


1、目前有个BUG,后台切换回来会导致界面卡住。(已经修复)
2、只在webgl下面有效果,canvas因为有脏矩形,所以直接用原生的文本控件就行了。



--------------------------------------------------2017-1-19日更新-----------------------------------------------------
加入应用暂停和启动接口,调用下界面就不会卡住了
动态纹理也支持加入图片了,addTexture就行
游客,如果您要查看本帖隐藏内容请回复
分享到 :
12 人收藏

251 个回复

倒序浏览
gaoyiquan  登堂入室 | 2017-12-25 16:14:49
6666
skybearr  圆转纯熟 | 2017-12-25 16:15:07
屌屌屌
app小王子  社区管理员 | 2017-12-25 16:15:12
感谢分享
qibu111  圆转纯熟 | 2017-12-25 16:24:33
刚少个文件,重新上传了
xiaobai6414101  登堂入室 | 2017-12-25 20:51:13
666666666666
D114836  初学乍练 | 2017-12-25 23:22:13
66666666
D114836  初学乍练 | 2017-12-25 23:22:26
66666666
cpo320  登堂入室 | 2017-12-26 09:49:06
666666
kezhenyong  初学乍练 | 2017-12-26 10:02:20
dashen 66666
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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

返回顶部