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. 有一些说法是不正确的,如改变父物体的画布,会导致子物体画布调整大小。

Unity UI 基础【译】的更多相关文章

  1. 转发-UI基础教程 – 原生App切图的那些事儿

    UI基础教程 – 原生App切图的那些事儿 转发:http://www.shejidaren.com/app-ui-cut-and-slice.html 移动APP切图是UI设计必须学会的一项技能,切 ...

  2. Unity UI on the HoloLens

    Following the steps under "Required configuration" will allow Unity UI to continue to work ...

  3. Android UI基础之五大布局

    Android  UI基础之五大布局 Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Andro ...

  4. 关于 Unity UI 中 GraphicRaycaster.Raycast 数量巨大的问题

    有时候会发现 Unity UI 非常耗时,在 Profiler 中可以轻易的看到 UI 中 的 GraphicRaycaster.Raycast 单帧调用可以成百上千,甚至好几千,帧速率前不忍赌,一关 ...

  5. iOS开发UI基础—手写控件,frame,center和bounds属性

    iOS开发UI基础—手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...

  6. Android UI基础教程 目录

    从csdn下载了这本英文版的书之后,又去京东搞了一个中文目录下来.对照着看. 话说,这本书绝对超值.有money的童鞋看完英文版记得去买中文版的~~ Android UI基础教程完整英文版 pdf+源 ...

  7. UI基础UIButton

    UI基础UIButton 前面写了UIWindow.UIViewController,那些都是一些框架,框架需要填充上具体的view才能组成我们的应用,移动应用开发中UI占了很大一部分,最基础的UI实 ...

  8. UI基础UIWindow、UIView

    UI基础UIWindow.UIView 在PC中,应用程序多是使用视窗的形式显示内容,手机应用也不例外,手机应用中要在屏幕上显示内容首先要创建一个窗口承载内容,iOS应用中使用UIWindow.UIV ...

  9. unity UI如何开启(显示)或者关闭(隐藏)Panel界面最好?

    https://segmentfault.com/a/1190000012357091 unity UI如何开启(显示)或者关闭(隐藏)Panel界面,相信大家都是知道的,但是如何做最好呢? 可能大家 ...

随机推荐

  1. 算法模板——平衡树Treap 2

    实现功能:同平衡树Treap 1(BZOJ3224 / tyvj1728) 这次的模板有了不少的改进,显然更加美观了,几乎每个部分都有了不少简化,尤其是删除部分,这个参照了hzwer神犇的写法,在此鸣 ...

  2. Spring Boot HTTP over JSON 的错误码异常处理

    摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! “年轻人不要怕表现,要敢于出来表现,但还是那句话,要有正确的度,你的表现是分析问题和解决问题的能 ...

  3. 用递归的方式处理数组 && 把递归方法方法定义到数组的原型上 (这是一次脑洞大开的神奇尝试)

    在 javascript 里,如果我们想用一个函数处理数组 (Array) 中的每个元素,那我们有很多种选择,最简单的当然就是用自带的 forEach 函数(低版本也可以使用 lodash 中的 fo ...

  4. 简单的add函数的N种写法

    最近在学习es6,看到for-of这里,就想自己写着练习一下,于是就准备写一个小函数add来求和.函数很简单,如add(1,2,3)这样.于是我开始着手 一开始我是这么写的 function add( ...

  5. 使用javascript解一道关于会议日程安排的面试题

    这道面试题是从 HarrisonHao 的一篇博文中看到的:原文链接 我看到之后,感觉此题十分有趣,遂自己用 node.js 以不同的思路实现了一遍,实现中使用了 lodash 原题比较长,而且是英文 ...

  6. V3 微信支付-预支付C#

    首先不得不吐槽下腾讯,升级微信支付为毛不兼容V2版本呢?V2算是白研究了. V3预支付文档几个坑,不知道你们有没有中招 商户号 mch_id 是 String(32) 微信支付分配的商户号   其实是 ...

  7. iOS开发之transform

    transform主要应用于动画 1.让一个按钮每次向上移动100的距离 UIButton *head = (UIButton *)[self.view viewWithTag:10]; head.t ...

  8. kvm的sshd起不来

    同事不知道在一台KVM虚拟机执行了chmod -R 777 /  将更目录中的所有文件的权限都改为777,重启该虚拟机之后发现该虚拟机登不上去了,来找我,我尝试重启了几次虚拟机之后,发现总是可以被pi ...

  9. Maven项目搭建(二):Maven搭建SSM框架

    上一章给大家讲解了如何使用Maven搭建web项目. 这次给大家介绍一下怎么使用Maven搭建SSM框架项目. 首先我们来看一下pom.xml的属性介绍: project: pom的xml根元素. p ...

  10. poj 3270 Cow Sorting (置换入门)

    题意:给你一个无序数列,让你两两交换将其排成一个非递减的序列,每次交换的花费交换的两个数之和,问你最小的花费 思路:首先了解一下什么是置换,置换即定义S = {1,...,n}到其自身的一个双射函数f ...