LayaAir引擎与IDE提供了丰富的文本组件,适用于各种文本应用场景。发现一些用LayaAir引擎开发过项目的开发者,也对引擎与IDE的各个文本组件的区分不是太了解。所以本篇分别就IDE中的显示文本组件、HTML文本组件、位图文本组件、可输入文本组件,这几个类型的组件进行介绍,让大家全面了解一下LayaAir引擎的各个文本组件。
一、显示文本组件
显示文本就是只能看,不能编辑修改的基础文本。LayaAirIDE中提供了Text、FillText、Label这三种基础的显示文本组件。
1.1、文本的底层渲染机制
LayaAir引擎在文本的底层渲染上,有两种方式。
分别是Text文本类的文本统一提交方式,和Graphics类的fillText文本单字符绘制提交方式。
如果采用了Text文本,那每一个Text文本对象中的文本字符会一起形成小图集提交到大图合集中,比如游戏中某个文本对象有300字,其中一个字符发生改变,也会对该文本对象的300字整段文本图集重新提到大图合集中。
又假如,在一个剧情游戏中,两人在对话。那其中一个文本对象,要不断的重新取值和赋值操作,使得该文本对象的显示内容频繁发生改变。此时,Text文本对象,就会不断的向大图合集进行文本图集的提交,占满大图集后,又需要创建一个新的图集继续提交,而不用的旧图集,如果没达到GC条件,也会一直存在,所以如果此次查看内存占用统计信息,就可以看到会一直在涨内存,直到GC条件达到之后,才会被销毁。并且GC在清空垃圾内存的时候,还有可能会导致瞬间的卡顿。
而采用Graphics类的fillText文本绘制,则是按单个字符向大图合集中进行提交,并且大图合集中已经存在的字符不会重复提交。所以对于图集的利用率比较好,即便是发生文本改变的时候,也不会向Text文本那样,创建很多垃圾图集。
这样看来,是不是fillText就是最好用的呢?
如果文本不需要改变,那按单字提交图集的效率是不如一次性直接提交的。
所以,我们还是要看文本的类型,对应文本使用时的类型,选用相应的引擎API,才会更好。
1.2、静态文本与动态文本
基于上一小节的文本渲染提交的机制,以及文本仅用于展示或用于交互的区别,我们分成两种概念,就是把仅用于显示,文本内容无需改变的文本叫静态文本。对于文本内容需要改变的文本叫动态文本。
Text和Label都属于处理静态文本的类,它们都是把文本的每次改动都统一提交大图集的渲染机制。
fillText、fillBorderText、strokeText等,都是Graphics类中用于单字符提交的文本绘制方法。
在LayaAirIDE中,Text和Label属于静态文本组件,FillText属于动态文本组件。而LayaAir引擎中Graphics类的fillBorderText、strokeText等文本绘制方法,在IDE中是没有封装为组件的,需要在项目代码中直接使用引擎的API。
1.3、不同的文本组件使用区别与选择
如果我们已经理解了什么是静态文本和动态文本,那使用起来的选择就比较简单了,例如,一些导航和标签按钮等,他在UI上完全没有必要进行改变,完全可以使用静态文本。文字剧情和任务等,就需要动态文本了。
那静态文本组件有Text和Label两种,那是怎么选择呢。
其中Text是最基础的文本组件,他直接继承于Sprite,而Label继承于UIComponent再往上才是Sprite,从原理上,路径越短,性能自然越好。所以,比较简单的文本,当Text可以满足时,原则上优先使用Text,而Label由于属性非常丰富,适用于相对布局等等Text无法满足的应用场景。
而对于FillText组件,我们不仅要了解它的优势,也要了解他的不足。FillText文本由于是引擎自己绘制的,目前只适用于中英文等主流国家语言,对于泰国语、阿拉伯语等复杂的语言,显示可能会有异常。所以对于这些排版复杂的国际语言游戏,那只能是采用静态文本组件的系统字或者是位图字,尽可能减少文本动态修改的产品需求。
1.4、使用时要注意的
静态的文本优先使用Text组件,因为只显示静态文本的时候性能最好。动态文本优先使用FillText,除非是国际化等需求不能满足的时候。
静态文本,对于有相对布局等复杂需求时,Label组件的功能比较强大。
具体的属性使用特别简单,IDE中的属性面板中都有说明,不需要写代码也可以直接运行查看效果,另外在官网的文档和视频教学中,对于每个组件的使用与属性效果也都有介绍,就不逐一介绍了,重点介绍一下FillText中font属性与其它几个文本font属性区别。
在Text与Label中,font仅仅是指系统字体,例如该文本是Microsoft YaHei
或是Arial
,选择或者输入对应的字体就可以。而FillText中,font是字体与字体大小的设置值,也可以把所有相关的文本样式(大小、字体、斜体、加粗)也在这里指定。
例如,当值为 60px simHei
,是将文本大小设置为60像素大小,采用simHei字体。如下图所示:
值为60px simHei italic