我成功将Egret TextField搬到了Cocos 3.x(已开源)


我成功将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给我吧,谢谢各位大佬的赏识

这是本人第一次在论坛上发长帖,排版比较粗糙请大家见谅。

17赞

++++++++++++++++++点赞

1赞

牛哇牛哇!

1赞

谁要是能把白鹭的UI状态控制器移过来就厉害了,一直觉的白鹭那个控制器好用

2赞

这玩意已经有cocoser做过了,你论坛翻翻看 :rofl:

看过不太好,就不一样

白鹭引擎的默认Label等,我记得字体会模糊,在页游上

1赞

几个截图都是在浏览器上做测试整的,你看糊不胡 :stuck_out_tongue:

不是截不截图的问题,就是那种缩放没有SDF那样依然保持清晰的效果,当然cocos的应该也没有吧

1赞

如果要用SDF,那还是用TextMeshPro比较好,论坛里也有人开源了 :stuck_out_tongue:

太牛了啦!!!!Mark!

1赞

!感概万千!

1赞

别发Cocos Store了。根本没人审核了目前。github 和 Cocos Store一起发。

1赞

为啥不移植laya的

牛蛙!!!

因为我基本没用过laya,对它不熟悉 :rofl:

目前我放在gitee上,只不过还没开放出来

这就是传说中的COCOS 做了这么多年,连个基础UI控件都做不好的案例吗!
结果现在又跑去玩AI了

1赞

其实这玩意对引擎开发者来说根本不困难,去隔壁抄个过来根本没啥难度 :rofl:

原生能用么?