我成功将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除了支持使用单个图集作为图片来源,还额外支持外部图片资源抓取,方便在单个文本中使用不同图集切片或散图;

相关性能测试案例本人将会整理成视频发布到B站上,敬请关注。

源码也将在近段时间发布到Cocos Store中。

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

3赞

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

1赞

牛哇牛哇!

1赞

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

1赞

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

看过不太好,就不一样

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

1赞

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

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

1赞

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

太牛了啦!!!!Mark!

1赞