Unity3D - UGUI

UGUI是Unity4.6开始，Unity自家的GUI系统，已经相当成熟了，其功能和易用性上一点也不逊于NGUI（Unity上一款流行的第三方UI插件）。

画布（Canvas）

每一个GUI控件必须是画布的子对象。如果当前不存在画布，那么系统会自动创建一个画布。

UI元素的绘制顺序依赖于它们在Hierarchy面板中的顺序。如果两个UI元素重叠，后添加的UI元素会出现在之前添加元素的上面。

Render Mode:渲染模式

• Screen Space-Camera：画布以特定的距离放置在指定的相机前，UI元素被指定的相机渲染，相机设置会影响UI的呈现。
• Screen Space-Overlay：使画布拉伸以适应全屏大小，并且事GUI空间在场景中渲染与其他物体的前方。如果调整屏幕大小或改变分辨率，画布将会自动的改变大小以适应屏幕显示。
• World Space：该选项使画布渲染于世界空间。该模式使画布在场景中像其他游戏对象一样。可以通过手动调整它的Rect Transform来改变画布的大小，GUI空间可能会绘制于其他物体的前方或后方。

使用Canvas Group组件：可以对UI元素进行分组方便统一管理。

• Alpha：可调节该组UI元素的透明度。
• Interactable：选项可通知该组件是否接受输入控制。
• Blocks Raycasts：选项控制该组件是否作为碰撞器的RayCasts。注意这不适用于Physics.Raycast，当要处理Canvas上UI元素的RayCast时应当调用绑定在Canvas上的Graphic Raycaster组件的RayCast方法。
• Ignore Parent Groups：用于控制是否忽略父对象上的Canvas Group设置。

Rect Transform（矩形变换）

Rect Transform（矩形变换）是一种新的变换组件，适用于所有的GUI控件上来替代原有的变换组件。

矩形变换组件区别于原有变换的地方是在场景中Transform组件表示一个点，而Rect Transform表示一个可以容纳UI元素的矩形，而且矩形变换还有锚点和轴心点的功能。

矩形变换的属性和功能

属性	功能
Pos(x,y,z)	定义矩形相当于锚的轴心点位置。
Width/Height	定义矩形的宽度和高度
Left/Top/Right/Bottom	定义矩形的边缘相对于锚点的位置，锚点分离时会显示在Pos和Width、Height的位置。
Anchors	定义矩形在左下角和右上角的锚点
Min	定义矩形左下角锚点。(0,0)对应父物体的左下角，(1,1)对应父物体的右上角
Max	定义矩形右上角锚点。(0,0）对应父物体的左下角，(1,1)对应父物体的右上角
Pivot	定义矩形旋转时围绕的中心点坐标
Rotation	定义矩形围绕旋转中心点的旋转角度
Scale	定义该对象的缩放系数

为了布局的统一，一般建议调整UI元素的大小，而不是对其进行缩放（Scale）。调整UI元素的大小不会影响字体大小、切片图像的边界大小。缩放（Scale）可用于动画的效果或其他效果，缩放会作用于整个元素，包括字体和边框。

所有的旋转和缩放都是围绕轴心点（Pivot）发生变化的。

文本（Text）

文本控件显示非交互文本。可以作为其他GUI控件的标题或者标签，也可用于显示指定或者其他文本。

文本控件的属性和功能：

属性	功能
Text	控制显示的文本
Font	用于显示文本的字体
Font Style	文本样式，可选择：正常、粗体、斜体、粗体
Font Size	文本的字体大小
Line Spacing	文本行之间的垂直间距
Rich Text	是否为富文本样式
Alignment	文本的水平和垂直对齐样式
Horizontal Overflow	用于处理文字太宽而无法适应文本框的方法，选项包含自动换行和溢出
Vertical Overflow	用于处理文字太高而无法适应文本框的方法，选项包含截断和溢出
Best Fit	忽略大小属性使文本适应控件大小
Color	文本颜色
Material	渲染文本的材质

图像（Image）

图像控件用来显示非交互式图像。可用于作为装饰、图标等。在其他控件中也可通过脚本控制来改变图像。该控件类似于原始图像（Raw Image）控件，但是提供了更多选项的动画控制和准确的填充控制功能。图像控件需要Sprite类型的纹理，原始图像（Raw Image）可以接受任何类型的纹理。

图像控件的属性和功能：

属性	功能
Source Image	表示要显示的图像纹理（类型必须为Sprite）
Color	应用与图像的颜色
Material	图像着色所需的材质
Image Type	显示图像的类型，选项包括Simple、Sliced、Tilled、Filled
Preserve Aspect(仅适用于Simple和Filled模式)	图像的原始比例的高度和宽度是否保持相同比例
Fill Center（Sliced和Tiled模式）	是否补填图像的中心部分
Fill Method（仅适用于Filled模式）	用于指定动画中图像的填充方式，选项有Horizontal、Vertical、Radial90、Radial180、Radial360
Fill Origin（仅用于Filled模式）	填充图像的起始位置，选项包括Bottom、Right、Top、Left
Fill Amount（仅适用于Filled模式）	当前填充图像的比例（范围从0.0到1.0）
Clockwise（仅适用于Filled模式）	填充方向是否为顺时针
Set Native Size	设置图像尺寸为原始图像纹理的大小

图像类型如下：

• Simple：默认情况下适应控件的矩形大小。如果启用Preserve Aspect选项，图像的原始比例会被保存，剩余的未被填充的矩形部分会被空白填充。
• Sliced：图像被切成九宫格模式，图片的中心被缩放以适应矩形控件，边界仍会保持它的尺寸。禁用Fill Center选项后的图像的中心将会被挖空。
• Tiled：图像会保持原始大小， 如果控件的大小大于原始图片大小，图像会重复填充到控件中。
• Filled：图像被显示为Simple类型，但是可以通过调节填充模式和参数使图像呈现出从空白到完整的填充过程。

原始图像（Raw Image）

原始图像控件用来显示非交互图像控件，可以用于装饰或图标等。在其他控件中也可以通过脚本控制来改变原始图像。原始图像支持显示任何类型的纹理，而图像控件仅支持Spirte类型的纹理。

原始图像控件的属性和功能：

属性	功能
Texture	表示要显示的图像纹理
Color	应用到图像的颜色
Material	为图像着色所使用的材质
UI Rect	在控件矩形中图像的偏移和尺寸以规范化坐标的形式表示（0.0~1.0)，图像边缘被拉伸以填充UV矩形周围控件

UV属性允许显示较大图像的一小部分。X和Y坐标指定图像的那一部分与控件的左下角对齐。比如X坐标为0.25表明从图像的四分之一处进行切割。W和H属性表示缩放以适应控件矩形部分的宽度和高度，宽度和高度为0.5表示缩放图像的四分之一在控件矩形上显示。

遮罩（Mask）

遮罩是一种不可见的UI组件（在Inspector中Add Component按钮后搜索Mask添加），它可以用来修饰控件子元素的外观。遮罩将子元素限制为父物体的形状。如果子物体大于父物体将只显示和父物体大小相同的那一部分。

其中Show Mask Graphic表示是否绘制父物体的图形。Mask通常和Image控件组合使用。

过渡选项（Transition Options）

过渡选项及其功能：

属性	功能
Color Tint	状态决定颜色，可以为每个单独的状态选择颜色。也可以设置不同状态之间的淡入淡出持续时间，数值越高，颜色之间的淡入淡出会越慢。
Sprite Swap	允许不同的状态下显示不同的Sprite，Sprite可以定制
Animation	在不同的状态播放动画，使用Animation过度必须要有动画组件，并确保Root motion为禁用状态
None	此选项仅适用于按钮控件，表示没有任何状态效果

Color Tine过渡选项面板：

Color Tine过渡选项及其功能：

属性	功能
Target Graphic	用于交互组件的图形
Normal Color	控件的正常颜色
Highlighted Color	控件高亮时的颜色
Pressed Color	控件被按下时的颜色
Disabled Color	控件被禁用时的颜色
Color Multiplier	与颜色数值相乘
Fade Duration	从一种状态过渡到另一种状态的时间

Sprite Swap过渡选项面板

Sprite Swap过渡选项及其功能：

属性	功能
Target Graphic	正常状态显示的Sprite类型图片
Highlighted Sprite	鼠标滑过控件时显示的Sprite类型图片
Pressed Sprite	图片被按下时显示的Sprite类型图片
Disabled Sprite	控件被禁用时显示的Sprite类型图片

Animation过渡选项面板

Animation过渡选项及其功能：

属性	功能
Normal Trigger	正常状态下使用的动画触发器
Highlighted Trigger	高亮状态下使用的动画触发器
Pressed Trigger	按下状态下使用的动画触发器
Disabled Trigger	禁用状态下使用的动画触发器

按钮（Button）

按钮控件响应来自用户的单击事件，用于启动或确认某项操作。

按钮控件属性及其功能：

属性	功能
Interactable	控制该组件是否接受输入，如果该组件选项没有被选中时，按钮则不能够接受输入，且动画过渡为不可用
Transition	用于控制按钮响应用户操作的方式
Navigation	确定控件的顺序

按钮控件事件和功能：

属性	功能
On Click	响应按钮的单击事件，当用户单击并释放按钮时触发

开关（Toggle）

Toggle控件时一个允许用户选择或取消选中某一个选项的复选框。

按钮控件属性和功能：

属性	功能
Interactable	控制该组件是否接受输入，如果该选项没有选中，按钮则不能接受输入且动画过渡为不可用
Transition	用于控制按钮响应用户操作的方式
Navigation	确定控件的顺序
Is On	初始控件时是否启用
Toggle Transition	当Toggle值改变是Toggle响应用户操作的方式
Graphic	Toggle被勾选时显示的图形
Group	表示Toggle所在的Toggle Group，属于同一组的Toggle控件一次只能选择其中一个Toggle，当一个Toggle被选中时其他的选择就会被自动取消。

Toggle控件事件和功能：

属性	功能
On Value Change	当控件值改变时，处理控件值切换时的响应。

Toggle控件允许用户打开或者关闭选项。在多选一的情况下可以把几个Toggle控件组合成一个Toggle Group。Toggle控件有一个On Value Change的事件，当值改变时会做出响应。

滑动条（Slider）

Slider控件允许用户通过鼠标从一个预先确定的范围选择一个数值。

属性和功能：

属性	功能
Interactable	控制该组件是否接受输入，如果该选项没有选中，按钮则不能接受输入且动画过渡为不可用
Transition	用于控制按钮响应用户操作的方式
Navigation	确定控件的顺序
Fill Rect	填充控制区域的图形
Handle Rect	滑动“处理”部分的图形，即滑动条上的滑块
Direction	当移动滑块时，滑动条的值会增加的方向，包括LeftToRight、RightToLeft、BottomToTop、TopToBottom
Min Value	最小值
Max Value	最大值
Whole Numbers	滑块值是否限定为整数
Value	滑动块当前的数值

事件和功能：

属性	功能
On Value Changed	每当滑动块的数值由于拖动被改变时调用，float类型的值会被传递无论Whole Number属性是否被启用。

滚动条（Scrollbar）

滚动条允许用户滚动因图像或者其他可视物体太大而不能完全看到视图。滚动条与滑动条的区别在于后者选择数值而后者主要用于滚动视图。例如：文本编辑器中的垂直滚动条。

属性和功能：

属性	功能
Interactable	控制该组件是否接受输入，如果该选项没有选中，按钮则不能接受输入且动画过渡为不可用
Transition	用于控制按钮响应用户操作的方式
Navigation	确定控件的顺序
Handle Rect	滑动“处理”部分的图形，即滑动条上的滑块
Direction	当移动滑块时，滑动条的值会增加的方向，包括LeftToRight、RightToLeft、BottomToTop、TopToBottom
Value	Scrollbar的初始值，范围为0.0~1.0
Size	滑块的大小，范围为0.0~1.0
Number Of Setup	ScrollBar控件所允许的独特的滚动位置数目

事件和功能：

事件	功能
On Value Changed	每当滚动条的位置由于拖动被改变时调用，float类型的值会被传递给响应函数

布局元素控件（Layout Element）

Layout Element控件的属性和功能

事件	功能
Ignore Layout	是否忽略布局
Min Width	该布局元素应具有的最小宽度
Min Height	该元素布局应具有的最小高度
Preferred Width	该布局元素在另外的宽度分配之前的首选宽度
Preferred Height	该布局元素在另外的高度分配之前的首选高度
Flexible Width	该布局元素与同级对象填充的相对宽度
Flexible Height	该布局元素与同级对象填充的相对高度

内容尺寸裁剪（Content Size Fitter）

Content Size Fitter控件的属性和功能

事件	功能
Horizontal Fit	宽度如何被控制
None	对基布局元素的宽度不做控制
Minimun	基于布局元素的最小宽度控制
Preferred	基于布局元素的首选宽度控制
Vertical Fit	高度如何被控制
None	对基布局元素的高度不做控制
Minimun	基于布局元素的最小高度控制
Preferred	基于布局元素的首选高度控制

长宽比例裁剪（Aspect Ratio Fitter）

Aspect Ratio Fitter控件的属性和功能

事件	功能
Aspect Mode	矩形长宽的执行模式
None	不适用矩形的长度比
Width Controls Height	基于宽度自动调节高度
Height Controls Width	基于高度自动调节宽度
Fit In Parent	宽度、高度、位置、和锚点会自动调整以保持与父对象相同的宽高比，父对象的矩形控件可能不被该矩形覆盖
Envelope Parent	宽度、高度、位置、锚点会自动调整以覆盖父对象，同时也会与父对象保持相同的宽高比，该矩形的空间可能比父对象的矩形空间更大
Aspect Ratio	执行的宽高比，这是宽度除以高度

水平布局组（Horizontal Layout Group）

Horizontal Layout Group控件的属性和功能

属性	功能
Padding	布局组的内边距
Spacing	布局元素之间的间距
Child Alignment	没有完全填充可用空间的子布局元素的对齐方式
Child Force Expand	是否强制子元素扩展填充额外的可用空间

垂直布局组（Vertical Layout Group）

Vertical Layout Group控件的属性和功能

属性	功能
Padding	布局组的内边距
Spacing	布局元素之间的间距
Child Alignment	没有完全填充可用空间的子布局元素的对齐方式
Child Force Expand	是否强制子元素扩展填充额外的可用空间

网格布局组（Grid Layout Group）

Grid Layout Group控件的属性和功能

属性	功能
Padding	布局组的内边距
Cell Size	组中布局元素的尺寸
Spacing	布局元素之间的间距
Start Corner	第一个元素所在的位置
Start Axis	放置元素沿那个主坐标轴。在开始一个新行之前Horizontal选项将添补一整行，Vertical将添补一整列
Child Alignment	没有完全填充可用空间的布局元素的对齐方式
Constraint	限制网格的行列数的一个固定数值，以舒服自动布局系统