• 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 控件属性

1. Interactable（是否启用交互）。
   如果把该选项取消，则该 Button 在运行时将不可点击，失去了交互性。

2. 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：允许文本换行。用户可以按回车键来换行。