Unity UI 优化指南 (1. Unity UI 的基础)

理解组成Unity UI系统的不同部分是非常重要的,有一些基础类和组件共同组成了Unity UI系统。这个章节首先会介绍经常会用到的一些术语,然后会讨论Unity UI关键系统的底层细节。

术语

Canvas:画布
Unity渲染系统用来提供层次化几何布局的类,是用原生的C++代码编写,会在游戏世界坐标系之中或者之上进行显示。
画布负责将其包含的几何图元组合成批,生成合适的渲染命令,然后把这些发送给Unity的图形系统。以上部分都在原生的C++代码中完成,这个过程称为重建或者批处理。当某个画布中的几何图元被认为需要重新批处理,这个画布就被认为已经是脏画布。

Geometry:几何结构
通过Canvas Renderer组件提供给画布

Sub-canvas:子画布或者嵌入画布
子画布指的是嵌入到其他的画布控件之中的画布。子画布会将其包含的控件和其父画布包含的控件进行分离;如果子画布已脏,则只会对自己进行重新批处理的过程,不会影响父画布,反之亦然。(某些情况下,这个说法也不正确,例如当父画布导致子画布重绘大小的时候)

Graphic:图形类
图形类是Unity UI的C#代码库中提供的基类,它是所有向Canvas系统提供绘制的几何结构的Unity UI类的基类。大部分内置的Unity UI图形是派生自MaskableGraphic这个子类,这个子类实现了IMaskable的接口,从而可以实现被遮罩的效果。Drawable的子类主要有ImageText,这两个类组成了对应的ImageText组件。

Layout components:布局组件
布局组件控制RectTransform的尺寸和位置,通常用来构建复杂的布局,比如说根据内容来适配大小和位置。布局组件只依赖与RectTransform而且只会改变关联的RectTranform的属性。布局组件不依赖于Graphic类,可以独立于Unity UI的Graphic组件使用。

Graphic和布局组件都依赖于CanvasUpdateRegistry类,这个类并没有在Unity编辑器中暴露出来。这个类会跟踪需要更新的布局组件和Graphic组件,并且当关联的Canvas触发了willRenderCanvases事件的时候触发更新操作。

布局组件和Graphic组件的更新被称为重建。重建的过程细节将在之后详细讨论。

渲染的细节

当使用Unity UI构建用户界面的时候,需要牢牢记住Canvas绘制几何图元的顺序是按照透明队列进行的。也就是说,Unity UI产生的几何图元都是按照从后向前使用alpha混合进行绘制。从性能角度解释就是,多边形栅格化之后的每个像素都会被采样,即使他会被其他的不透明像素完全挡住。在手机设备上,很高程度的重绘会超出GPU的填充率能力。

画布的批处理过程

画布的批处理过程是将UI元素的网格合并,产生合适的渲染命令发送给Unity的图形管道。处理的结果会被缓存和重用,直到Canvas被标记为dirty,这种情况会在画布包含的某个Mesh改变的时候出现。

画布使用的mesh来自于画布的CanvasRenderer组件,但是不包含任何子画布。

计算批处理需要将Mesh按照深度进行排序并且检查它们的覆盖情况和是否共享了材质等等。这个操作是多线程的,所以性能差异在不同的CPU架构上面比较大,尤其是移动设备和桌面计算机环境。

图形的重建过程

图形的重建过程指的是Unity UI的C#库中的图形组件的布局和mesh被重新计算的过程。这些操作是在CanvasUpdateRegistry类中完成的。相关代码可以在Unity UI的源代码中找到。

CanvasUpdateRegistry中,值得关注的方法是PerformUpdate方法。只要画布组件调用WillRenderCanvases事件的时候,这个方法就会被调用。这个事件每帧只会被调用一次。

PerformUpdate分三步进行:

  • 脏布局组件需要重建布局,通过ICanvasElement.Rebuild方法
  • 任何注册的需要剪切组件(如Mask组件)需要剔除被剪切掉的部分。这个操作是通过ClippingRegistry.Cull完成的。
  • 脏Graphic组件需要重建图形元素。

对于布局重建和图形重建而言,都需要分成多个部分完成。布局重建分成三步完成(PreLayout,Layout和PostLayout),图形的重建则是分成两部分完成(PreRender和LatePreRender)

布局重建

为了重新计算在一个或者多个布局组件下的组件的位置(和大小),需要将不同的布局组件按照合适的层次进行排序。在GameObject的层级中,越靠近根节点的布局组件可以改变其包含的Layout组件的大小和位置,所以需要首先倍计算。

为了完成这个任务,Unity UI 会将标记为dirty的布局组件按照在层级中的深度进行排序。层次越高(父Transform越少的元素)会排到列表的前面。

排好序的Layout组件需要重建布局,这时候Layout组件绑定的UI元素的位置和大小才会实际改变。对于Layout布局如何改变单个元素的位置和大小,参见Unity手册的UI Auto Layouts章节。

图形重建

当Graphic组件重建的时候,Unity会通过ICanvasElement接口的Rebuild方法控制。Graphic实现这个方法并且在PreRender阶段执行两种不同的重建步骤。

  • 如果顶点数据被标记成dirty(例如组件的RectTransform改变大小),mesh会被重建;
  • 如果材质数据被标记为dirty(例如组件的材质或者纹理改变),那么绑定的CanvasRenderer的材质信息会被更新;
    Graphic重建的过程不需要对Graphic组件进行排序。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容