[外文翻译] UNITY UI 基本原理
本帖最后由 仅为年时 于 2016-7-14 14:47 编辑


Unity UI 基本原理
版本检查: 5.3

难度: 高级

It is important to understand thedifferent parts making up the Unity UI system. There are several fundamentalclasses and components that, together, compose the system. This chapter firstdefines a number of terms used throughout this series of articles, thendiscusses the low-level behavior of several of Unity UI's key systems.

理解构成UI系统的每个部分是很重要的。有几个基本的类和组件,一起组成这个系统。本章首先定义了一些在本系列中使用的术语,然后讨论几个Unity UI关键系统中低级别的行为。

A Canvas is anative-code Unity component that is used by Unity’s rendering system to providelayered geometry that will be drawn in, or on top of, a game’s world-space.


Canvases are responsible for combiningtheir constituent geometry into batches, generating the appropriate rendercommands and sending these to Unity’s Graphics system. All of this is done innative C++ code, and is called a rebatch or abatch build.When a Canvas has been marked as containing geometry that requires rebatching,the Canvas is considereddirty.

画布负责将他的组件几何组成分批,产生合适的渲染命令,发送给Unity图形系统。所有这些都在本地C++代码完成,而且被称为重新分批 或则批量编译。当画布被标记为包含需要重新分批的几何体,画布就会被认为dirty。

Geometry is provided to Canvasesby Canvas Renderer components.

几何体通过Canvas Renderer组件提供给画布。

A Sub-canvas is simplya Canvas component that is nested inside another Canvas component. Sub-canvasesisolate their children from their parent; a dirty child will not force a parentto rebuild its geometry, and vice versa.


A Graphic is a baseclass provided by the Unity UI C# library. It is the base class for all UnityUI C# classes that provide drawable geometry to the Canvas system. Mostbuilt-in Unity UI Graphics are implemented via the MaskableGraphicsubclass,which allows them to be masked via the IMaskable interface.The major subclasses of Drawable are Image andText,which provide their eponymous components.

图形(Graphic )是Unity UI C#库提供的基类。它是所有Unitiy UI C#类的基类,它给画布系统提供了可绘制几何图形的功能。大部分的内置Unity UI图形由MaskableGraphics子类实现。Drawable主要的子类是Image和Text,它们提供了同名组件。

Layout components control the size and positioningof RectTransforms, and are generally used to create complex layouts thatrequire relative sizing or relative positioning of their contents. Layoutcomponents rely only on RectTransforms and only affect the properties of theirassociated RectTransforms. They are not dependent on the Graphic class, and canbe used independently from Unity UI’s Graphic components.

布局(Layout)控件控制RectTransforms的大小和位置,通常用来创建相对复杂的布局,这会需要相对它们组件的大小和位置。布局控件仅依赖RectTransforms,且仅影响它相关联的RectTransforms的属性。它们不依赖于图形类,并且可以从Unity UI图形组件中独立使用。

Both Graphic and Layout components relyon the CanvasUpdateRegistry class, which is not exposed in theUnity Editor's interface. This class tracks the set of Layout components andGraphic components that must be updated, and triggers updates as needed whentheir associated Canvas invokes the willRenderCanvases event.

图形类和布局类都依赖于CanvasUpdateRegistry 类,这不会再Unity 编辑器中看见。该类跟踪布局组件和图形组件,当相关的画布调用,它们会根据需要更新和触发更新。

The updates of Layout and Graphiccomponents is called a rebuild. The rebuild process is discussed infurther detail later in this document.



When composing user interfaces in UnityUI, keep in mind that all geometry drawn by a Canvas will be drawn in theTransparent queue. That is, geometry produced by Unity UI will always be drawnback-to-front with alpha blending. The important thing to remember from aperformance standpoint is that each pixel rasterized from a polygon will be sampled, even if it is wholly covered by other, opaque polygons.On mobile devices, this high level of overdraw can rapidly exceed the fill-ratecapacity of the GPU.

在Unity UI中制作用户界面时,记住,所有由Canvas画出的图形都会在Transparent队列中绘制。也就是说,Unity UI制作的几何体,总会与alpha混合重置。从性能的角度需要记住的重要的事情是,每个从多边形栅格化的像素会被采样,即使它被他不透明的多边形覆盖。在移动设备上,这种透支会超出GPU填充率的能力。


The batch building process is theprocess whereby a Canvas combines the meshes representing its UI elements andgenerates the appropriate rendering commands to send to Unity’s graphicspipeline. The results of this process are cached and reused until the Canvas ismarked as dirty, which occurs whenever there is a change to one of its constituentmeshes.

批量创建过程,是画布结合网格(mesh),代表UI元素,生成合适的渲染指令,发送给Unity 图形管线。这个过程最后会被缓存或者重复使用,直到画布被标记会dirty,这会在任一个网格发生变化时,发生。

The meshes used by the Canvas are takenfrom the set of Canvas Renderer components attached to the Canvas but notcontained in any Sub-canvas.

画布使用的网格从Canvas Renderer 组件中分离出来,附在Canvas上,但不会包含在任何一个Sub-Canvas中。

Calculating the batches requires sortingthe meshes by depth and examining them for overlaps, shared materials and soon. This operation is multi-threaded, and so its performance will generally bevery different across different CPU architectures, and especially betweenmobile SoCs (which generally have few CPU cores) and modern desktop CPUs (whichoften have 4 or more cores).

计算批量,需要通过深度(depth)和 检查它们的重叠,公用的材质等等来排序网格。这个操作是多线程的,因此不同的CPU结构,它的性能也不同,特别是移动SoCs(通常有几个CPU核)和台式CPU(通常有4个或更多的核)。


The Rebuild process is where the layoutand meshes of Unity UI’s C# Graphic components are recalculated. This isperformed in the CanvasUpdateRegistry class. Remember, this isa C# class and its source can be found on .

重建过程是布局和Unity UI C#图形网格组件被重新计算。这是在CanvasUpdatedRegistry类中执行。记住,这是一个C#类,源代码可以在Unity’s Bisbucket中找到。

Within CanvasUpdateRegistry,the method of interest is PerformUpdate. This method is invokedwhenever a Canvas component invokes the event. This event iscalled once per frame.


PerformUpdate runs a three-step process:


1、Dirty Layout components are requested to rebuild theirlayouts, via the method.


2、Any registered Clipping components (such as Masks) arerequested to cull any clipped components. This is done viaClippingRegistry.Cull.


3、Dirty Graphic components are requested to rebuild theirgraphical elements.
For Layout and Graphic rebuilds, theprocess is split into multiple parts. Layout rebuilds run in three parts(PreLayout, Layout and PostLayout) while Graphic rebuilds run in two (PreRenderand LatePreRender).

Dirty图形组件要求重建它的图形元素。布局和图形的重建过程被分为多个部分。布局重建分为3个部分(PreLayout,Layout 和PostLayout)图形重建分为2个部分(PreRender 和LatePreRender)。
Layout rebuilds

To recalculate the appropriate positions(and potentially sizes) of components contained within one or more Layoutcomponents, it is necessary to apply the Layouts in their appropriatehierarchical order. Layouts closer to the root in the GameObject hierarchy canpotentially alter the positions and sizes of any Layouts that may be nestedwithin them, and so must be calculated first.


To do this, Unity UI sorts the list ofdirty Layout components by their depth in the hierarchy. Items higher in thehierarchy (i.e. with fewer parent Transforms) are moved to the front of thelist.

要做到这点,Unity UI通过dirty布局组件在层次中的深度,将它们排序。层次中较高的物体(比如,有很少的父亲节点)会被移到列表前面。

The sorted list of Layout components isthen requested to rebuild their layouts; this is where the positions and sizesof UI elements controlled by Layout components are actually altered. For moredetails on how the positions of individual elements are affected by Layouts,see the section of the Unity Manual.

排序后的布局组件被要求重建它们的布局;这就是通过改变布局组件来控制UI元素位置和大小。有关布局如何影响单个元素更多详细信息,参阅Unity 手册中UI Auto Layout部分。

Graphic rebuilds

When Graphic components are rebuilt,Unity UI passes control to the method of the interface. Graphicimplements this and runs two different rebuild steps during the PreRender stageof the Rebuild process.

当图形组件重建时,Unity UI控制ICanvasElement接口的Rebuild方法。图形实现并在重建过程,PreRender阶段,运行两个不同重建步骤。

1、If the vertex data has been marked as dirty (e.g. whenthe component’s RectTransform has changed size), then the mesh is rebuilt.


2、If the material data has been marked dirty (e.g. when thecomponent’s material or texture has been changed), then the attached CanvasRenderer’s material will be updated.


Graphic Rebuilds do not proceed throughthe list of Graphic components in any particular order, and do not require anysorting operations.



1.    There are certain edge cases where thisis not true, such as when changes to a parent Canvas cause a child Canvas to beresized.



  • 沙发 fchfghy
  • 2016-7-14 16:15:21
  • 板凳 lgzaimn
  • 2016-7-15 08:56:35