【Unity UI基础】Fundamentals of Unity UI

Fundamentals of 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关键系统中低级别的行为。

TERMINOLOGY

术语

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.

画布是一个本地代码（native-code）的Unity组件，Unity渲染系统使用画布，提供了被画到世界空间的分层的几何体。

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(1).

子画布，仅仅是嵌套到另一个画布组件内的画布组件。字画布将它的子物体与父子隔离开；dirty子物体不会强制父子重建几何体，反之亦然。

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.

更新布局和图形组件被称为重建。重建过程在在后面进一步讨论。

RENDERING DETAILS

渲染细节

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(CANVASES)

批量创建过程（画布）

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 (GRAPHICS)

重建过程（图形）

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’s Bitbucket.

重建过程是布局和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 WillRenderCanvases event. This event iscalled once per frame.

在CanvasUpdatedRegistry中，感兴趣的方法是PerformUpdate。每当Canvas组件调用WillRenderCanvases事件时，这个方法都会被调用。这个事件每帧都会被调用。

PerformUpdate runs a three-step process:

PerformUpdate运行的三个步骤：

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

Dirty布局组件需要重建布局，通过ICanvasElementRebuild方法。

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

任何注册的裁剪的组件（如Mask），要求剔除任何裁剪的组件。这个通过ClippingRegistryCull完成。

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 UI Auto Layout section of the Unity Manual.

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

Graphic rebuilds

图形重建

When Graphic components are rebuilt,Unity UI passes control to the Rebuild method of the ICanvasElement 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.

如果顶点数据被标记为dirty（例如组件的RectTransform改变了大小），网格就需要重建。

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.

如果材质数据被标记dirty，（例如材质组件或者纹理组件改变了），则附着的画布渲染材质将被更新。

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

图形重建不通过图形组件的任何特定顺序列表执行，并且不要求进行任何排序操作。

ENDNOTES

尾注

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

有一些说法是不正确的，如改变父物体的画布，会导致子物体画布调整大小。

原文地址：http://unity3d.com/cn/learn/tuto ... y-ui?playlist=30089