我成功将Egret的富文本组件TextField迁移到了Cocos中
产生将Egret富文本组件迁移到Cocos中的想法,始于两年多前我所在的项目组新开项目,从Egret转型成Cocos,其中的RichText组件在排版时,使游戏表现出了极其明显的卡顿问题,在游戏列表中使用分帧渲染也难以解决这一问题,想起以前使用Egret的文本组件未曾出线这种问题,就萌生了这一想法,无奈好长一段时间游戏开发任务繁重,这想法就搁置了。近段时间有闲才尝试把该想法付诸实现,从开始行动到今天基本完成功能实现大概花费了一周时间。
下面来讲一下我迁移到Cocos的TextField的各种特性和优势。
相比Cocos原生的RichText、Label:
1.该组件比CacheMode=None状态下的RichText,在排版时表现出了低得多的cpu开销;
2.该组件比CacheMode=None状态下的RichText,表现出了低得多的drawcall,在没有使用图片内容时,TextField无论渲染多长内容,本体始终只有1个drawcall;
3.该组件对比其他CacheMode状态下的RichText,所占用的纹理内存也小得多;
4.RichText在CacheMode=None状态下时,反复切换富文本长文内容,会有非常明显的内存泄漏问题,TextField相比之下内存占用更低且无内存泄漏问题;
5.RichText在其他CacheMode状态下,为了优化drawcall会使用自动图集,当文字内容过多时,超出图集存储上限将无法再进行正常渲染,TextField无此问题;
6.TextField从Egret中继承的排版方式更合理,以下三图为图示,其中图一图二为RichText,图三为TextField
如上图所示,RichText无法为不同高度的文本保持每行各自的高度,为了防止文字高度大的文字被切割,只能强行将行高设定为全文最大文本尺寸,TextField则可保持;同时RichText在排版复杂富文本的时候会有异常折行问题,TextField则没有此问题;
7.TextField同时基本保留了Egret原生TextField和Cocos RichText、Label中的绝大部分功能;
8.TextField一样可以进行图文排版,相比原生RichText,TextField除了支持使用单个图集作为图片来源,还额外支持外部图片资源抓取,方便在单个文本中使用不同图集切片或散图;
9.对于图文排版中的图片元素,相比原生RichText必须自设宽高,TextField中的图片元素宽高属性可缺省:a.在没有宽高时,会将高度默认为当前上下文的文本高度,宽度则根据当前高度与原始高度等比例缩小;b.只有宽或高时,未定义的高或宽将根据原始尺寸等比例缩小;c.也可以通过设置origin=true属性直接使用原始宽高。这一设定更方便富文本编辑,无需再操心图片元素的尺寸问题。
10.富文本格式支持为Egret中的html格式,而非RichText中的BB code格式
测试案例体验地址: Cocos Creator | TextField
源码已在Gitee中开源:https://gitee.com/iClassic_Live/TextField
各位大佬若要将本组件拉入个人或企业项目中使用,麻烦点个Star给我吧,谢谢各位大佬的赏识
这是本人第一次在论坛上发长帖,排版比较粗糙请大家见谅。







