【Unity3D】【UGUI】UI Overview

UGUI讨论群：261319969

Unity3D版本：5.1.1f1 (64-bit)

Unity3D UI 代码：https://bitbucket.org/Unity-Technologies/ui/downloads

UI概览

此段内容会介绍UI系统的基本内容。从介绍放置所有UI元素的区域——Canvas开始。

会有关于布局UI元素的Rect Tool和Rect Transform的讨论。

之后会介绍一些可视化的UI元素，比如Text和Image，还有一些可交互的空间如Button和Slider。

-----------------------------------------------------------------------------------------------------------------------------------------

Canvas

Canvas，所有的UI元素都应该在它里面。它是一个拥有Canvas 组件的Game Object，所有的UI元素需要是这个Game Object的节点。

当场景中不存在Canvas时，创建一个新的UI元素，比如通过菜单GameObject>UI>Image来创建一个Image，会自动创建一个Canvas，之后这个UI元素会成为这个Canvas的子节点

在Scene View中，Canvas区域是一个矩形区域。这样修改UI元素位置的时候，就不需要总是切换到Game View窗口了。

UI元素的绘制顺序

在Canvas里的UI元素的绘制顺序和它们在Hierarchy里面的顺序是一致的。第一个子节点先绘制，之后第二个，以此类推。如果两个UI元素有覆盖关系，那么后面UI元素的会绘制到前面的UI元素上面。

只需要在Hierarchy里面拖拽UI元素来对它们重新排序，即可实现让UI元素绘制到其他UI元素上面。你也可以通过脚本来控制，使用Transform组件上的函数：SetAsFirstSibling、SetAsLastSibling、和SetSiblingIndex。

渲染模式

可以通过设置Canvas的Render Mode来使其渲染到屏幕空间（2D）或者世界空间（3D）

屏幕空间-遮盖

此模式会把UI元素渲染到场景的最上层。如果屏幕的尺寸或分辨率有改变，Canvas会自动的变化它的大小来适应这些修改。

屏幕空间-相机

这种模式和“屏幕空间-遮盖”类似，但这种渲染模式下需要将Canvas放置到一个指定的Camera的一定距离前面。UI元素通过这个相机渲染，所有相机的设置会影响到UI的显示。如果相机设置成透视（Perspective），那么UI元素会使用透视方式渲染，而且透视变形（Perspective distortion）的大小可以通过相机的Field of View（FOV）来控制。如果屏幕大小、分辨率或者相机的锥体大小发生改变，Canvas会自动的变化它的大小来适应这些修改。

世界空间

在这个渲染模式下，Canvas就像其他在场景里面的object一样。通过Rect Transform来手动设置Canvas的大小，UI元素会根据3D的位置来决定渲染到其他object的前面或者是后面。这样的渲染模式，让UI看起来就像是世界里面的一部分。也通常称为“diegetic interface”。

Basic Layout

这部分讨论UI元素相对于Canvas和其他UI元素的位置关系。可以先通过菜单GameObject>UI>Image创建一个Image，然后变阅读下面的文章，边进行测试。

The Rect Tool

每个UI元素在布局的时候，都是以矩形的形式来表现。这个矩形可以在Scene View里通过在工具栏上的Rect Tool来操作。Rect Tool可以给用在Unity的2D特性以及UI上，当然，也可以用在3D的物体上

Rect Tool可以用来移动、改变尺寸或旋转UI元素。当你选择一个UI元素的时候，点在矩形里面的任意一点并且拖动来移动它。拖动矩形的边缘或者角来改变尺寸。把鼠标远离一点矩形的角落，当鼠标变成一个旋转符号的时候，点击并向任意方向拖拽就可以对UI元素进行旋转。

和其他工具一样，Rect Tools使用当前支点模式和空间，在toolbar里面改变。使用工具操作UI的时候，最好让这些值设置为Pivot和Local。