- UGUI Canvas 画布
- UGUI Event System 事件系统
- UGUI Panel 控件
- UGUI Text 控件
- UGUI Image 控件
- UGUI Raw Image 控件
- UGUI Button 控件
- UGUI Toggle 控件
- UGUI Slider 控件
- UGUI Scrollbar 控件
- TUGUI Input Field 控件
UGUI 是 Unity 官方的 UI 实现方式，自从 Unity 4.6 起，Unity 官方推出了新版 UGUI 系统。
新版 UGUI 系统相比于 OnGUI 系统更加人性化，而且是一个开源系统，利用游戏开发人员进行游戏界面开发。
UGUI 系统有 3 个特点：灵活、快速、可视化。
对于游戏开发者来说，UGUI 运行效率高，执行效果好，易于使用，方便扩展，与 Unity 3D 兼容性高。
在 UGUI 中创建的所有 UI 控件都有一个 UI 控件特有的 Rect Transform组件。
在 Unity 3D 中创建的三维物体是 Transform，而 UI 控件的 Rect Transform 组件是UI控件的矩形方位，其中的 PosX、PosY、PosZ 指的是 UI 控件在相应轴上的偏移量。
UI 控件除了 Rect Transform 组件外，还有一个 Canvas Renderer（画布渲染）组件。
- UGUI Canvas 画布
Canvas画布是摆放所有 UI 元素的区域，在场景中创建的所有控件都会自动变为 Canvas游戏对象的子对象。
若场景中没有画布，在创建控件时会自动创建画布。
不论是你主动创建还是被动创建，系统都会自动创建一个名为 EventSystem 的游戏对象，该对象挂载了若干与事件监听相关的组件，可供设置。
渲染模式
在画布属性栏中有一个 Render Mode 属性。
image.png
1.Screen Space-Overlay 渲染模式。
在
Screen Space-Overlay 渲染模式下，场景中的 UI 会被渲染到屏幕上，如果屏幕大小或分辨率发生改变，画布会自动适配。
该模式下不需要 UI 摄像机， UI 将永远出现在所有摄像机的最前面。
| 参数 | 功能 |
|---|---|
| Pixel Perfect | 重置元素大小和坐标，使贴图的像素完美对应到屏幕像素上。 |
| Sort Order | 排列顺序。 |
2.Screen Space-Camera 渲染模式。
Screen Space-Camera 渲染模式类似于Screen Space-Overlay 渲染模式。
这种渲染模式下，画布被放置在指定摄像机前的一个给定距离上，它支持在 UI 前方显示 3D 模型与粒子系统等内容，通过指定的摄像机 UI 被呈现出来，如果屏幕大小改变或更改了分辨率，画布将自动更改大小以适配屏幕。
| 参数 | 功能 |
|---|---|
| Pixel Perfect | 重置元素大小和坐标，使贴图的像素完美对应到屏幕像素上。 |
| Render Camera | UI 绘制所对应的摄像机。 |
| Plane Distance | UI 距离摄像机镜头的距离。 |
| Sorting Layer | 界面分层，执行 Edit → Project Setting → Tags and |
| Layers → Sorting Layers | 命令进 行界面分层，越下方的层在界面显示时越在前面。 |
| Order Layer | 界面顺序，该值越高，在界面显示时越在前面。 |
3.World Space 渲染模式。
在 World Space 渲染模式下呈现的UI 好像是 3D 场景中的一个Plane对象。与前两种渲染模式不同，其屏幕的大小将取决于拍摄的角度和相机的距离。
它是一个完全三维的 UI，也就是把 UI 也当成三维对象，例如摄像机离 UI 远了，其显示就会变小，近了就会变大。
| 参数 | 功能 |
|---|---|
| Event Camera | 设置用来处理用户界面事件的摄像机。 |
| Sorting Layer | 界面分层，执行 Edit → Project Setting → Tags and |
| Layers → Sorting Layers | 命令进 行界面分层，越下方的层在界面显示时越在前面。 |
| Order Layer | 界面顺序，该值越高，在界面显示时越在前面。 |
UGUI Event System 事件系统
在 Unity 3D 中创建 UGUI 控件后，会同时创建 Event System 事件系统的 GameObject，用于控制各类事件。
Unity 3D 自带两个 Input Module ，一个用于响应标准输入，另一个用于响应触摸操作。
Input Module 封装了 Input模块的调用，根据用户操作触发各 Event Trigger。
Event System 事件处理器
-
Event System事件处理组件。
将基于输入的时间发送到应用程序中的对象，使用键盘、鼠标、触摸或自定义输入均可。 -
Standalone Input Module独立输入模块。
基于输入InputManager管理器的状态发送事件，用于鼠标、键盘和控制器。该模块被配置为查看InputManager。 -
Touch Input Module触控输入模块。
被设计为使用在可触摸的基础设备上。
UGUI Panel 控件
Unity 3D panel 控件又叫面板，该面板实际上就是一个容器，在其上可放置其他 UI 控件。
当移动该面板时，放在其中的UI 控件就会跟随移动，这样可以更加合理与方便地移动与处理一组控件。
拖动面板控件的 4 个角或 4 条边可以调节面板的大小。
一个功能完备的 UI 界面往往会使用多个 Panel 容器控件，而且一个面板里还可套用其他面板，如下图所示。
image.png
当面板被创建时，会默认包含一个
Image （Script 组件）。
image.png
-
Source Image用来设置面板的图像。 -
Color用来改变面板的颜色。
UGUI Text 控件
在 Unity 3D UGUI 中创建的很多 UI 控件都有一个支持文本编辑的 Text控件。
Text 控件也被称为标签。Text区域用于输入将要显示的文本。通过它可以设置字体、样式、字号等内容。
image.png
参数列表
| 参数 | 描述 |
|---|---|
| Font | 设置字体。 |
| Font Style | 设置字体样式。 |
| Font Size | 设置字体大小。 |
| Line Spacing | 设置行间距（多行）。 |
| Rich Text | 设置富文本。 |
| Alignment | 设置文本在 Text 框中的水平以及垂直方向上的对齐方式。 |
| Horizontal Overflow | 设置水平方向上溢出时的处理方式。分两种：Wrap(隐藏）；Overflow(溢出）
|
| Vertical Overflow | 设置垂直方向上溢出时的处理方式。分两种：Truncate(截断）；Overflow(溢出）
|
| Best Fit | 设置当文字多时自动缩小以适应文本框的大小 |
| Color | 设置字体颜色 |
UGUI Image 控件
Unity 3D Image 控件除了两个公共的组件 Rect Transform与 Canvas Renderer 外，默认的情况下就只有一个 Image 组件，如下图所示。
image.png
其中，
Source Image 是要显示的源图像，要想把一个图片赋给 Image，需要把图片转换成精灵格式，转化后的精灵图片就可拖放到 Image 的 Source Image 中了。
转换方法为：在 Project 视图中选中要转换的图片，然后在 Inspector 属性面板中，单击 Texture Type（纹理类型）右边的下拉列表，选中 Sprite（2D and UI）并单击下方的 Apply按钮，就可以把图片转换成精灵格式，然后就可以拖放到 Image 的 Source Image 中了。
参数列表
| 参数 | 描述 |
|---|---|
| Color | 设置应用在图片上的颜色 |
| Material | 设置应用在图片上的材质 |
| Image Type | 设置贴图类型 |
UGUI Raw Image 控件
Unity 3D Raw Image 控件向用户显示了一个非交互式的图像，如下图所示。它可以用于装饰、图标等。
image.png
Raw Image 控件类似于 Image 控件，但是，Raw Image 控件可以显示任何纹理，而 Image只能显示一个精灵。参数列表
| 参数 | 描述 |
|---|---|
| Texture | 设置要显示的图像纹理 |
| Color | 设置应用在图片上的颜色 |
| Material | 设置应用在图片上的材质 |
| UV Rect | 设置图像在控件矩形中的偏移和大小，范围为0〜1 |
UGUI Button 控件
除了公共的 Rect Transform 与 Canvas Renderer 两个 UI 组件外，Unity 3D Button 控件还默认拥有 Image 与 Button 两个组件，如下图（a）所示。
Image 组件里的属性与前面介绍的是一样的。Button是一个复合控件，其中还包含一个 Text 子控件，通过此子控件可设置 Button 上显示的文字的内容、字体、文字样式、文字大小、颜色等，与前面所讲的 Text 控件是一样的。
Button 控件属性
-
Interactable（是否启用交互）。
如果把该选项取消，则该 Button 在运行时将不可点击，失去了交互性。 -
Transition（过渡方式）。
共有 4 个选项，如下图（b）所示。默认为Color Tint（颜色色彩）。
-
None：没有过渡方式。 -
Color Tint：颜色过渡，相关属性参考下文列表。 -
Sprite Swap：精灵交换，需要使用相同功能、不同状态的贴图，相关属性参考下文列表。 -
Animation：动画过渡。
image.png
Color Tint 属性
| 属性 | 描述 |
|---|---|
| Target Graphic | 设置目标图像。 |
| Normal Color | 设置正常颜色。 |
| Highlighted Color | 设置高亮色。 |
| Pressed Color | 设置单击色。 |
| Disabled Color | 设置禁用色。 |
| Color Multiplier | 设置颜色倍数。 |
| Fade Duration | 设置变化持续的时间。 |
Sprite Swap 属性
| 属性 | 描述 |
|---|---|
| Target Graphic | 设置目标图像。 |
| Highlighted Sprite | 设置鼠标经过时的贴图。 |
| Pressed Sprite | 设置单击时的贴图。 |
| Disabled Sprite | 设置禁用时的贴图。 |
UGUI Toggle 控件
Unity 3D Toggle控件也是一个复合型控件，如下图所示。它有 Background与 Label 两个子控件，而 Background控件中还有一个 Checkmark子控件。
Background是一个图像控件，而其子控件 Checkmark也是一个图像控件，其 Label控件是一个文本框，通过改变它们所拥有的属性值，即可改变 Toggle 的外观，如颜色、字体等。
image.png
参数列表
| 属性 | 描述 |
|---|---|
| Is On | 设置复选框默认是开还是关。 |
| Toggle Transition | 设置渐变效果。 |
| Graphic | 用于切换背景，更改为一个更合适的图像。 |
| Group | 设置多选组。 |
UGUI Slider 控件
在游戏的 UI 界面中会见到各种滑块，用来控制音量或者是摇杆的灵敏度。
Unity 3D Slider控件也是一个复合控件，Background 是背景，默认颜色是白色，Fill Area 是填充区域，如下图所示。
image.png
Slider 控件的一个需要注意的参数是 Whole Number，该参数表示滑块的值是否只可为整数，开发人员可根据需要进行设置。
除此以外，Slider 控件也可以挂载脚本，用来响应事件监听。
参数列表
| 属 性 | 描述 |
|---|---|
| Fill Rect | 设置填充矩形区域。 |
| Handle Rect | 设置手柄矩形区域。 |
| Direction | 设置 Slider 的摆放方向。 |
| Min Value | 设置最小数值。 |
| Max Value | 设置最大数值。 |
| Value | 设置滑块当前的数值。 |
UGUI Scrollbar 控件
Unity 3D Scrollbar（滚动条）控件可以垂直或水平放置，主要用于通过拖动滑块以改变目标的比例，如下图所示。
它最恰当的应用是用来将一个值变为指定百分比，最大值为1（100%），最小值为0（0%），拖动滑块可在0和1之间改变，例如改变滚动视野的显示区域。
image.png
参数列表
| 属 性 | 描述 |
|---|---|
| Handle Rect | 设置最小值与最大值之间的范围，也就是整个滑条的最大可控制范围。 |
| Direction | 设置滚动条的方向为从左至右、从上至下或其他的方向。 |
| Value | 设置当前滚动条对应的值。 |
| Size | 设置操作条矩形对应的缩放长度，即 handle 部分的大小，取值为 0〜1。 |
| Numbers Of Steps | 设置滚动条可滚动的位置数目。 |
| On Value Changed | 设置值改变时触发消息。 |
UGUI Input Field 控件
Unity 3D Input Field 控件也是一个复合控件，包含 Placeholder 与 Text 两个子控件，如下图所示。
其中，Text是文本控件，程序运行时用户所输入的内容就保存在Text控件中，Placeholder 是占位符，表示程序运行时在用户还没有输入内容时显示给用户的提示信息。
image.png
Input Field输入字段组件与其他控件一样，也有Image（Script）组件，另外也包括 Transition 属性，其默认是 Color Tint，如下图所示，具体属性如下表所示。参数列表
| 属 性 | 描述 |
|---|---|
| Interactable | 设置是否启用 Input Field 组件。勾选表示输入字段可以交互，否则表示不可以交互。 |
| Transition | 设置当正常显示、突出显示、按下或禁用时输入字段的转换效果。 |
| Navigation | 设置导航功能。 |
| Text Component | 设置此输人域的文本显示组件，用于显示用户输人的文本框。 |
| Text | 设置此输入域的初始值。 |
| Character Limit | 设置此输人域最大的输入字符数，0 为不限制输入字符数。 |
| Placeholder | 设置此输入域的输人位控制符，对于任何带有 Text 组件的物体均可设置此 |
另外还有两个较为特殊的参数：
1.Content Type 属性。
输入此输入域的内容类型，包括数字、密码等，常用的类型如下：
-
Standard：允许输入任何字符，只要是当前字体支持的即可。 -
Autocorrected:自动校正输入的未知单词，并建议更合适的替换候选对象，除非 用户明确地覆盖该操作，否则将自动替换输入的文本。 -
Integer Number：只允许输入整数。 -
Decimal Number：允许输入整数或小数。 -
Alpha numeric：允许输入数字和字母。 -
Name：允许输入英文及其他文字，当输入英文时能自动提示姓名拼写。 -
Email Address：允许输入一个由最多一个 @ 符号组成的字母数字字符串。 -
Password：输入的字符被隐藏，只显 7K 星号。 -
Pin：只允许输入整数。输入的字符被隐藏，只显示星号。 -
Custom：允许用户自定义行类型、输入类型、键盘类型和字符验证。
image.png
Line Type 属性。
设置当输入的内容超过输入域边界时的换行方式：
-Single Line：超过边界也不换行，继续向右延伸此行，即输入域中的内容只有一行。
-
Muhi Line Submit:允许文本换行。只在需要时才换行。 -
Multi Line Newline：允许文本换行。用户可以按回车键来换行。
网友评论