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

画布(Canvas)

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

Unity3D - UGUI

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控件上来替代原有的变换组件。

Unity3D - UGUI

矩形变换组件区别于原有变换的地方是在场景中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控件的标题或者标签,也可用于显示指定或者其他文本。

Unity3D - UGUI

文本控件的属性和功能:

属性 功能
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)可以接受任何类型的纹理。

Unity3D - UGUI

图像控件的属性和功能:

属性 功能
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类型的纹理。

Unity3D - UGUI

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

属性 功能
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添加),它可以用来修饰控件子元素的外观。遮罩将子元素限制为父物体的形状。如果子物体大于父物体将只显示和父物体大小相同的那一部分。

Unity3D - UGUI

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

过渡选项(Transition Options)

过渡选项及其功能:

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

Color Tine过渡选项面板:

Unity3D - UGUI

Color Tine过渡选项及其功能:

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

Sprite Swap过渡选项面板

Unity3D - UGUI

Sprite Swap过渡选项及其功能:

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

Animation过渡选项面板

Unity3D - UGUI

Animation过渡选项及其功能:

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

按钮(Button)

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

Unity3D - UGUI

按钮控件属性及其功能:

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

按钮控件事件和功能:

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

开关(Toggle)

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

Unity3D - UGUI

按钮控件属性和功能:

属性 功能
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控件允许用户通过鼠标从一个预先确定的范围选择一个数值。

Unity3D - UGUI

属性和功能:

属性 功能
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)

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

Unity3D - UGUI

属性和功能:

属性 功能
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)

Unity3D - UGUI

Layout Element控件的属性和功能

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

内容尺寸裁剪(Content Size Fitter)

Unity3D - UGUI
Content Size Fitter控件的属性和功能

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

长宽比例裁剪(Aspect Ratio Fitter)

Unity3D - UGUI

Aspect Ratio Fitter控件的属性和功能

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

水平布局组(Horizontal Layout Group)

Unity3D - UGUI

Horizontal Layout Group控件的属性和功能

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

垂直布局组(Vertical Layout Group)

Unity3D - UGUI

Vertical Layout Group控件的属性和功能

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

网格布局组(Grid Layout Group)

Unity3D - UGUI

Grid Layout Group控件的属性和功能

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

相关文章: