Unity UI 基础【译】

翻译自https://unity3d.com/cn/learn/tutorials/topics/best-practices/fundamentals-unity-ui?playlist=30089

理解组成Unity UI系统的各个部分很重要。一些基础的类和组件一起组成了这个系统。这一章节介绍一些的这系列文章所用到的术语,然后讨论一些Unity UI 关键系统的底层行为。

术语

Canvas是Unity的一个内部组件(native-code Unity Component)。由Unity渲染系统使用,可以提供将在游戏世界空间中绘制的分层几何图形。

Canvas负责把它们上面几何体合并成批次,生成合适的渲染指令,发送给Unity的图像系统。所有这些都是Unity 本地C++代码实现的,被称作rebatch 或者 batch build。当一个Canvas被标记为包含需要被rebatch的几何图形,那这个Canvas被认为dirty

几何图形通过 Canvas Render 组件传递给Canvas。

一个 Sub-canvas 是一个嵌套在另一个Canvas下的Canvas。Sub-canvas 是它的子级和它们的父级隔离:一个dirty的子级不会强制它的父级去重新生成几何图形,反之亦然。(一个canvas是一个重绘单位)[1]

Graphic是Unity UI库提供的基类。它是所有能为Canvas系统提供可绘制几何图形的Unity UI C# 类的基类(Image,RawImage,Text)。大部分内置的Unity UI图形都是 MaskableGraphic的子类,这样它们可以通过IMaskable接口来实现遮罩。主要的可绘制的子类是 ImageText,它们提供了同名的组件。

Layout components 控制RectTransform的大小和位置,通常被用来创建一些复杂的排版,这些排版依赖于它们内容的相对大小和相对位置。排版组件只依赖于RectTransform,并且只影响它们管理的RectTransform。它们不依赖图形类,并且它们可以独立于Unity UI图形组件使用。

图形组件和排版组件,都依赖于CanvasUpdateRegistry类,这是UnityEditor内不可见的接口。这个类记录那些需要被更新的排版和图形组件,并且当其关联的Canavs触发willRenderCanvases事件时,触发更新。

图形组件和排版组件的更新被称为重建(rebuild)。重建的过程会在之后的文档中详细介绍。

渲染细节

当使用Unity UI 制作用户界面时,记住,所有的被canvas绘制的图形都是被放在透明渲染队列。这意味着,Unity UI产生的图形都会使用透明混合(alpha blending)从后向前渲染。有一个重要的性能点要注意:图形上的每一个像素都会被采样,即使它被另一个不透明的图形完全覆盖。在移动设备上,大量的的过度绘制(overdraw)可以快速超出GPU填充率的上限。

合批过程(Canvases)

合批过程是指Canvas合并UI元素的网格,并且生成发送给Unity渲染管线的命令。这个过程产生的结果会被缓存住,直到他们被重新标记为dirty,组成它的任何一个网格变化都会使其变为dirty。

Canvas使用的网格都是从绑定在Canvas上的CanvasRenderer获得,但是不包含子Canvas的网格。

计算合批需要按照网格的深度,是否遮挡,是否共享材质等方面排序。这个操作是多线程的,因此不同的CPU结构,它的性能也不同,特别是移动SoCs(通常有几个CPU核)和台式CPU(通常有4个或更多的核)。

重绘过程(Graphics)

重绘过程是指Unity UI 的C# 图形组件的排版和网格被重新计算。这在 CanvasUpdateRegistry类中执行。记住这是一个C#类,并且可以再Unity Bitbucket上找到。

CanvasUpdateRegistry内部,需要关注的方法是PerformUpdate。当Canvas组件触发WillRenderCanvases事件时都会调用这个方法。这个事件每一帧都会执行一次。

PerformUpdate执行三个步骤:

  • 标记为dirty的排版组件通过ICanvasElement.Rebuild方法重建布局。
  • 任何注册过的裁剪组件(如mask),需要去裁剪所有可剔除的组件。这是通过ClippingRegistry.Cull实现的。
  • 被标记为dirty的图形组件,重建它们的图形元素。

对于排版和图形的重建,这些过程都会分解成过个部分。排版重建分成三个过程(PreLayout, Layout and PostLayout),图形重建包含两个过程(PreRender and LatePreRender)。

排版重建

要重新计算包含一个或多个布局组件合适的位置(大小),设置合适的层级顺序很重要。在层级监视器(hierarchy )中排版靠近根节点的可以能会影响它子集的排版,所以需要被先计算。
为了实现这个,Unity UI 按照hierarchy中深度对dirty的排版组件排序,越高的(父节点少的)排在前面。排序后的布局组件被要求重建它们的布局;这就是通过改变布局组件来控制UI元素位置和大小。有关布局如何影响单个元素更多详细信息,参阅Unity 手册中UI Auto Layout部分。

图形重建

当重建UI的时候,Unity UI 会调用ICanvasElement的Rebuild接口。图形实现这个接口,在PreRender阶段执行两个步骤。

  • 如果定点数据被标记为dirty(如RectTransfom改变大小),那么需要重建网格。
  • 如果材质数据标记为dirty(如材质或者纹理改变),关联的CanvasRenderer的材质也需要被更新。
    图形重建不是通过按照指定顺序设置图形组件层级执行的,不需要任何排序操作。

尾注

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

推荐阅读更多精彩内容