UGUI是Unity官方的UI系统，用于开发游戏内菜单、血条、按钮、背包等 2D UI 界面。

概述

  • 使用：在Hierarchy窗口右键 -> UI -> Scene窗口选择2D，工具栏选择方框（T）

  • 两个重要的对象：

    • Canvas

    • EventSystem

这两个对象上还分别依附了UGUI的重要组件，如下：

Canvas

组件名称 作用
Canvas 画布组件 渲染UI控件
Canvas Scaler 画布分辨率自适应组件 分辨率自适应
Graphic Raycaster 射线事件交互组件 控制射线响应
RectTransform UI对象位置锚点控制组件 控制位置和对齐方式

EventSystem

组件名称 作用
EventSystem 玩家输入事件响应系统 监听玩家操作
Standalone Input Module 独立输入模块组件 监听玩家操作

核心

组件

Canvas 画布组件

Canvas组件用于渲染挂载在其上的所有子对象。

场景中允许有多个Canvas对象，用于分别管理不同画布的渲染方式、分辨率自适应方式等等。

  • 3种渲染方式
渲染方式名称 表现形式
Screen Space - Overlay 屏幕空间 - 覆盖模式 UI始终在前
Screen Space - Camera 屏幕空间 - 摄像机模式 3D物体可以显示在UI之前
World Space 世界空间 3D模式

接下来是对3种渲染方式参数的详细讲解：

  1. Screen Space - Overlay 屏幕空间 - 覆盖模式
  • Pixel Perfect：是否开启无锯齿渲染效果（性能换效果）
  • SortOrder：Canvas排序层编号，数字越小越先渲染
  • TargetDisplay：UI效果要渲染到哪个目标设备上
  • Additional Shader Channels：其他着色器通道，决定着色器可以读取哪些内容
  1. Screen Space - Camera 屏幕空间 - 摄像机模式
  • RenderCamera：用于渲染的摄像机（不设置默认覆盖模式效果），建议专门用一个摄像机渲染UI（UI摄像机上的Clear Flags改为Depth Only）
  • Plane Distance：UI平面在摄像机前方的距离，类似整体z轴
  • Sorting Layer：渲染所在层级
  • Order in Layer：在同一层时的渲染顺序

其中，如果想让3D物体显示在UI之前，可以直接在该UI下创建该物体（记得改缩放大小），把层级layer改为UI

  1. World Space 世界空间
  • EventCamera：用于处理UI事件的摄像机

在这种模式下，UI可以看作3D物体处理。

Canvas Scaler 画布分辨率自适应组件

Canvas Scaler 主要用于UI控件在不同分辨率下的大小自适应。

宽（高） 缩放大小 = 屏幕分辨率*

  • 3种适配模式：
模式名称 含义
Constant Pixel Size 恒定像素模式 无论屏幕大小如何，UI始终保持相同像素大小
Scale With Screen Size 缩放模式 根据屏幕尺寸进行缩放
Constant Physical Size 恒定物理模式（与恒定像素模式类似） 无论屏幕大小和分辨率如何，UI元素始终保持相同物理大小

还有一种特殊的3D模式：当Canvas的渲染设置为World Space世界空间3D渲染模式时，Canvas Scaler就会自动变成world世界3D模式。

模式名称 含义
World 世界模式 3D模式

接下来是对3种适配模式参数的详细讲解：

  1. Constant Pixel Size 恒定像素模式
  • Scale Factor：缩放系数
  • Reference Pixels Per Unit：单位参考像素，多少像素对应Unity中的一个单位（默认一个单位为100像素），该参数会与图片中的Pixels Per Unit这个参数一起参与计算。

恒定像素计算公式：

UI原始尺寸 = 图片大小（像素）/ （Pixels Per Unit / Reference Pixels Per Unit）

  1. Scale With Screen Size 缩放模式
  • Reference Resolution：参考分辨率（由美术给出），缩放模式下所有匹配模式都会基于参考分辨率进行自适应计算。
    • PC端：1920 x 1080
  • Screen Match Mode：屏幕匹配模式，当前屏幕分辨率宽高比不适应参考分辨率时，用于分辨率大小自适应的匹配模式。
    • Expand：拓展画布区域，可能有黑边
    • Shrink：裁剪画布区域，可能有裁剪
    • Match Width Or Height：以宽高或者二者的平均值作为参考来缩放画布区域
      • Match（0~1）
        • Width（Match = 0）：适用于竖屏游戏
        • Height（Match = 1）：适用于横屏游戏
  1. Constant Physical Size 恒定物理模式

在学习恒定物理模式的参数之前，要首先了解一个概念——DPI
它是Dots Per Inch的缩写，即图像每英寸长度内的像素点数（即像素密度）。

  • Physical Unit：物理单位，使用的物理单位种类（与1英寸的计算关系）
  • Fallback Screen DPI：备用DPI，当找不到设备DPI时，使用此值
  • Default Sprite DPI：默认图片DPI

恒定物理模式的作用：因为DPI的值较高的细节更完整，尺寸也较大。所以用这个模式可以进行不同设备的调整。

  1. World 世界模式
  • Dynamic Pixels Per Unit：UI中动态创建的位图（例如文本）中，单位像素数（类似密度）

Graphic Raycaster 射线事件交互组件

Graphic Raycaster的意思是图形射线投射器，它是用于检测UI输入事件的射线发射器。

  • Ignore Reversed Graphics：是否忽略反转图形
  • Blocking Objects：射线被哪些类型的碰撞器阻挡（在覆盖渲染模式下无效）
  • Blocking Mask：射线被哪些层级的碰撞器阻挡（在覆盖渲染模式下无效）

RectTransform UI位置锚点组件

RectTransform的意思是矩形变换。他继承于Transform，是专门用于处理UI元素位置大小相关的组件。与Transform不同的是，他在位置、角度、缩放的基础上加入了矩形相关的中心点、锚点、长宽等属性，可以更方便的控制其大小以及分辨率自适应中的位置适应。

  • Pivot：中心点（0~1）
  • Anchors：相对父矩形锚点
    • 合成一点：相对与一个点的位置自适应
      • Pos(X,Y,Z)：轴心点相对锚点的位置
      • Weidth/Height：矩形的宽高
    • 分成四个箭头：各边的距离，大小自适应
      • Left/Right/Bottom：矩形边缘相对于锚点的位置

另外，左上角的方框点开可以快捷设置轴心点和锚点，其中，按住shift键，可以在设置锚点的同时设置轴心点；按住Alt键，可以同时设置的同时放置在相应位置。

  • Rotation：围绕轴心点旋转的角度
  • Scale：缩放大小
  • 右侧还有两个按钮：
    • 虚线框：Blueprint Mode(蓝图模式)，启用后编辑旋转和缩放不会影响矩形，只会影响显示内容
    • R：Raw Edit Mode(原始编辑模式)，启用后，改变轴心和锚点值不会改变矩形位置

玩家输入响应相关的两个组件

与玩家输入响应相关的两个组件分别是EventSystem和Standalone Input Module。

  1. EventSystem意思是事件系统。它是用于管理玩家的输入事件并分发给各UI控件的，类似一个中转站。
  • First Selected：首先选择的游戏对象，可以设置游戏一开始的默认选择
  • Send Navigation Events：是否允许导航事件（AWSD键、回车键移动/按下/取消）
  • Drag Threshold：拖拽操作的阈值（移动多少像素算拖拽）
  1. Standalone Input Module意思是独立输入模块。它主要针对处理鼠标/键盘/控制器/触屏的输入，输入的事件通过EventSystem进行分发，依赖于EventSystem组件。
  • Horizontal Axis、Vertical Axis、Submit Button、Cancel Button 都是对应Input管理器中的热键名
  • Input Actions Per Second：每秒允许键盘/控制器输入的数量
  • Repeat Delay：重复操作生效的延迟时间
  • ForceModule Active：是否强制模块处于激活状态

值得一提的是，在运行状态下，EventSystem的Inspector窗口下方提供了调试用的打印信息，我们可以根据其中的信息来判断自己进入了哪个控件，从而判断控件是否被挡住。

控件

关于使用控件都需要引用命名空间：

1
using UnityEngine.UI;

三大基础控件

三大基础控件包括Image图片、Text文本、Rawimage大图。

Image 图片

Image是图像控件，是UGUI中用于显示精灵图片的关键组件，除了背景图等大图，一般都使用Image来显示UI中的图片元素。

  1. 参数相关
  • Source Image：图片来源，必须是sprite
  • Color：颜色
  • Material：图像的材质
  • Raycast Target：是否作为射线检测的目标
  • Maskable：是否能被遮罩
  • Image Type：图片类型
    • Simple：普通模式。均匀的缩放整个图片
    • Sliced：切片模式。9宫格拉伸，只拉伸中央十字区域
      • Fill Center：中心是否填充
      • Pixel Per UnitMultiplier：每单位像素乘数
    • Tiled：平铺模式。重复平铺中央部分
    • Filed：填充模式。可以用来做血条、CD效果
  • Use Sprite Mesh：使用精灵网格，勾选后Unity会帮我们生成图片网格
  • Preserve Aspect：保持宽高比
  • Set Native Size：设置为图片资源的原始大小
  1. 代码相关

得到组件即成员：

1
2
Image img = this.GetComponent<Image>();
img.sprite = Resources.Load<Sprite>(""); // 参数填Resources文件夹下图片名字

Text 文本控件

Text是文本组件，是UGUI中用于显示文本的关键组件。

  1. 参数相关
  • Text：文本显示内容
  • Front：字体 （找字体的路径：C:\Windows\Fronts）
  • FrontStyle：字体样式
  • Front Size：字体大小
  • Line Spacing：行之间的垂直间距
  • Rich Text：是否开启富文本
  • Alignment：对齐方式
  • Align By Geometry：使用字形集合形状范围进行水平对齐，而不是字形指标
  • Horizontal Overflow：横向溢出模式
    • Wrap：包裹模式。超出范围自动换行
    • Overflow：溢出模式。
  • Vertical Overflow：竖向溢出模式
    • Truncate：裁剪模式。超出范围不显示
    • Overflow：溢出模式。
  • Best Fit：忽略字体大小，始终把内容完全显示在矩形框中，会自动调整字体大小。
  1. 富文本

在输入文本的地方自己通过输入特殊符号标记来改变字体样式。

  • 加粗
1
<b>文本内容</b>
  • 斜体
1
<i>文本内容</i>
  • 大小
1
<size=50>文本内容</size>
  • 颜色

控制颜色有两种方式。

第一种是通过十六进制来写，其中每两位对应一种颜色，对应关系是RGBA(red green blue 阿尔法通道)，输入ff就是默认开启，00就是关闭，下面是一个例子：

1
<color=#00ff00ff>文本内容</color>

最终显示的颜色就是绿色。

还有一种方式：

1
<color=red>文本内容</color>

以下是Unity官方支持的颜色对照表：

富文本 - Unity 手册

  1. 边缘线和阴影

可以通过添加脚本组件来为字体加上边缘线和阴影。

  • 边缘线：Outline
  • 阴影：Shadow
  1. 代码相关
1
2
Text txt = this.GetComponent<Text>();
txt.text = "大鱼飞九草";

RawImage 原始图片（大图控件）

RawImage是原始图像控件。是UGUI中用于显示任何纹理图片的关键组件。

它和Image的区别是：一般RawImage用于显示大图（背景图，不需要打入图集的图片、网络下载的图片）

  1. 参数相关
  • Texture：图像纹理
  • UV Rect：图像在UI矩形内的偏移和大小
    • X\Y：位置偏移，取值0~1
    • W\H：大小偏移，取值0~1
  1. 代码相关
1
2
RawImage raw = this.GetComponent<RawImage>();
raw.texture = Resources.Load<Texture>(""); // 参数填Resources文件夹下图片名字

组合控件

Button 按钮

Button是按钮组件，是UGUI中用于处理玩家按钮相关交互的关键组件。

Button的组成如下：

  • Button（上面挂了Image组件）
    • Text
  1. 参数相关
  • Interactable：是否接受输入
  • Transition：响应用户输入的过渡效果
    • None：没有状态变化效果
    • ColorTint：有颜色变化效果
      • TargetGraphic：控制的目标图形
      • Normal Color：正常状态的颜色
      • Highlighted Color：鼠标进入时的高亮颜色
      • Pressed Color：按下颜色
      • Selected Color：选中的颜色
      • Disabled Color：禁用时的颜色
      • Color Multiplier：颜色倍增器，过渡颜色乘以该值
      • FadeDuration：从一个状态到另一个状态所需要的时间
    • Sprite Swap：用图片表示变化效果
    • Animation：用动画表示变化效果
  • Navigation：导航模式。WASD键盘控制的使用
    • None：无键盘导航
    • Horizontal：水平导航
    • Vertical：竖直导航
    • Automatic：自动导航
    • Explicit：自定义按键
    • Visualize：可以在Scence窗口中看到导航连线
  • OnClick：单击执行的函数列表
  1. 代码相关

得到按钮组件即成员：

1
2
3
Button btn = this.GetComponent<Button>();
// 改变用户输入的过渡效果（枚举）
btn.transition = Selectable.Transition.None;

也可以得到上面的Image组件，再控制。

  1. 监听点击事件

监听点击事件有两种方式：拖脚本和代码添加。

拖脚本

需要在OnClick上添加一个对象，上面再关联对应的脚本上的函数。

代码添加

1
2
// 参数：无参无返回值值的委托函数
btn.onClick.AddListener();

代码移除

1
2
// 参数：无参无返回值值的委托函数
btn.onClick.RemoveListener();

还有一种可以移除所有监听函数：

1
btn.onClick.RemoveAllListener();

另外，还有异形按钮。我们需要使异形按钮被准确的点击可以这样操作：

方法1：添加子对象

  1. 创建一个Image作为按钮范围的显示
  2. 为Image创建一个子对象按钮，更改透明度，将按钮的Target Graphic改为父对象，使其有颜色变化
  3. 在Button下方创建很多Image拼成异形图案

方法2：通过代码改变图片的透明度响应阈值

  1. 修改图片参数：开启Read/Write Enabled开关
  2. 通过代码修改图片的响应阈值（当像素点的alpha值小于了该值，就不会被射线检测了）
1
2
3
4
5
6
7
8
9
10
11
using UnityEngine.UI;

public class Program : MonoBehaviour
{
	public Image img;
	
	void Start()
	{
		img.alphaHitTestMinimumThreshold = 0.1f;
	}
}

第二种方式更准确，但是更浪费性能。

Toggle 单（多）选框

Toggle是开关组件，是UGUI中用于处理玩家单选框、多选框相关交互的关键组件。

Toggle组件默认是多选框，可以通过配合ToggleGroup组件制作为单选框。

Toggle的组成如下：

  • Toggle
    • Background
      • Checkmark
    • Label
  1. 参数相关
  • IsOn：当前是否处于打开状态
  • Toggle Transition：在开关值变化时的过渡方式
    • None：无任何过渡
    • Fade：淡入淡出
  • Graphic：表示选中状态的图片
  • Group：单选框分组
  • OnValueChanged：开关状态变化时执行的函数列表

下面是制作单选框的思路：

首先，在Hierarchy窗口下的Canvas中创建一个ToggleGroup空物体，用于管理一组Toggle对象。为这个空物体添加一个Toggle Group组件

然后，将每一个Toggle对象上的Group参数都选择为ToggleGroup

需要注意的是：组件Toggle Group上有一个参数——Allow Switch Off，表示是否允许不选中任何一个单选框

  1. 代码相关

得到组件即成员：

1
Toggle tog = this.GetComponent<Toggle>();
  1. 监听事件

与Button的差不多，但是有一个bool参数

以下是一个改变值的实例：

1
2
3
4
tog.onValueChanged.AddListener((b) =>
{
	// 内部逻辑
});

InputField 文本输入控件

InputField是输入字段组件，是UGUI中用于处理玩家文本输入相关交互的关键组件。

InputField的组成如下：

  • InputField（上面有一个Image组件）
    • Placeholder：默认提示字样
    • Text
  1. 参数相关
  • TextComponent：用于关联显示输入内容的文本组件
  • Text：输入框的起始默认值
  • Character Limit：可以输入字符长度的最大值
  • Content Type：输入的字符类型限制
    • Standard：标准模式。可以输入任何字符
    • Autocorrected：自动更正模式
    • Integer Number：整数模式
    • Decimal Number：十进制数模式
    • Alphanumeric：字母数字模式。只能输入字母和数字
    • Name：名字模式。自动将每个单词首字母大写
    • Email Address：邮箱地址模式。允许最多输入一个@符号组成的字符和数字字符串
    • PassWord：密码模式。用星号隐藏输入的字符，允许使用符号
    • Pin：别针模式。用星号隐藏输入的字符，只允许输入整数
    • Custom：自定义模式
  • Line Type：行类型，定义文本格式
    • Single Line：只允许单行显示
    • Multi Line Submit：允许使用多行。仅在需要时使用新的一行
    • Multi Line NewLine：允许使用多行。用户可以按回车键空行
  • Placeholder：默认文本内容
  • Caret Blink Rate：光标闪烁速率
  • Caret Width：光标宽
  • Custom Caret Color：自定义光标颜色
  • Selection Color：批量选中的背景颜色
  • Hide Mobile Input：隐藏移动设备屏幕上的键盘，仅适用于ios
  • Read Only：只读，不能改
  1. 代码相关
1
InputField input = this.GetComponnet<InputField>();
  1. 监听事件

与Button的差不多，但是有一个string参数

以下是一个改变值的实例：

1
2
3
4
input.onValueChanged.AddListener((str) =>
{
	// 内部逻辑
});

Slider 滑动条

Slider是滑动条组件。是UGUI中用于处理滑动条相关交互的关键组件。

Slider的组成如下：

  • Slider
    • Background 背景图
    • Fill Area 填充图
      • Fill
    • Handle Slide Area 滑动块
      • Handle
  1. 参数相关
  • FillRect：用于填充的进度条图形
  • Handle Rect：滑动块图形
  • Direction：滑动条值增加的方向
  • Min Value\Max Value\Value：滑动条的数值
  • Whole Numbers：是否约束为整数值变化
  • OnValueChanged：滑动条值改变时执行的函数列表
  1. 代码相关
1
Slider s = this.GetComponent<Slider>();
  1. 监听事件

与Button的差不多，但是有一个float参数

以下是一个改变值的实例：

1
2
3
4
s.onValueChanged.AddListener((v) =>
{
	// 内部逻辑
});

ScrollBar 滚动条

ScrollBar是滚动条组件。是UGUI中用于处理滚动条相关交互的关键组件。

ScrollBar的组成如下：

  • ScrollBar（上面有一个Image组件）
    • Sliding Area 滑动块

一般情况都是配合ScrollView 滚动视图来使用。

  1. 相关参数
  • Handle Rect：滚动块
  • Direction：滚动条值增加的方向
  • Value：滚动条初始位置值（0~1）
  • Size：滚动块在条中的比例大小（0~1）
  • Number Of Steps：允许可以滚动多少次
  • OnValueChanged：滚动条值改变时执行的函数列表
  1. 代码相关
1
ScrollBar sb = this.GetComponent<ScrollBar>();
  1. 监听事件

与Button的差不多，但是有一个float参数

以下是一个改变值的实例：

1
2
3
4
sb.onValueChanged.AddListener((v) =>
{
	// 内部逻辑
});

ScrollView 滚动视图

ScrollView是滚动视图。但是其上的关键组件是ScrollRect，ScrollRect是UGUI中用于处理滚动视图相关交互的关键组件。

ScrollRect的组成如下：

  • ScrollRect（上面有一个Image组件）
    • Viewport
      • Content 控制滚动视图可视范围和内容显示
    • Scrollbar Horizontal
    • Scrollbar Vertical
  1. 参数相关
  • Content：滚动视图的大小，他的尺寸有多大就能拖多远
  • Horizontal：启用水平滚动
  • Vertical：启用竖直滚动
  • Movement Type：滚动视图元素的运动类型。主要控制拖动时的反馈效果
    • Unrestricted（一般不使用）。不受限制，随便拖动
    • Elastic（常用）：回弹效果。滚出边缘后会弹回边界
      • Elasticity：回弹系数。值越大回弹越慢
    • Clamped：夹紧效果。没有回弹效果
  • Inertia：移动惯性
    • Deceleration Rate：减速率（0~1），0没有惯性，1不会停止
  • Scroll Sensitivity：滚轮和触摸板的滚动事件敏感性
  • Viewport：滚动视图视口对象
  • Horizontal（Vertical） Scrollbar：水平（竖直）滚动条
    • Visibility：是否在不需要时自动隐藏
      • Permanent：一直显示滚动条
      • Auto Hide：自动隐藏滚动条
      • Auto Hide And Expand Viewport：自动隐藏滚动条并且自动拓展内容视口
    • Spacing：滚动条和视口之间的间隔空间
  • OnValueChanged：滚动视图位置改变时执行的函数列表

注意：如果删除滚动条需要将Inspector窗口上的关联滚动条的地方置为None，并且将视图窗口手动拖满。

  1. 代码相关
1
ScrollRect sr = this.GetComponent<ScrollRect>();

另外，可以通过得到content来改变内容的大小：

1
sr.content.sizeDelta = new Vector2(200, 200);

也可以通过这种方式来改变当前的位置：

1
2
3
// 参数1：x的位置
// 参数2：y的位置
sr.normalizedPosition = new Vector2(0, 0.5f);
  1. 监听事件

与Button的差不多，但是有一个Vector2参数

以下是一个改变值的实例：

1
2
3
4
sr.onValueChanged.AddListener((vec) =>
{
	// 内部逻辑
});

DropDown是下拉列表。DropDown是UGUI中用于处理下拉列表相关交互的关键组件。

DropDown的组成如下：

  • DropDown（上面有一个Image组件）
    • Label
    • Arrow 箭头
    • Template 选单
  1. 参数相关
  • Template：关联下拉列表对象
  • Caption Text：关联显示当前选择内容的文本组件
  • Caption Image：关联显示当前选择内容的图片组件
  • Item Text：关联下拉列表选项用的文本控件
  • Item Image：关联下拉列表选项用的图片控件
  • Value：当前所选选项的索引值
  • Alpha Fade Speed：下拉列表窗口淡入淡出的速度
  • Options：存在的选项列表
  1. 代码相关
1
2
3
4
DropDown dd = this.GetComponent<DropDown>();

// 得到当前内容
dd.options[dd.value];
  1. 监听事件

与Button的差不多，但是有一个int参数

以下是一个改变值的实例：

1
2
3
4
dd.onValueChanged.AddListener((index) =>
{
	// 内部逻辑
});

图集制作

图集就是把很多小图片打包成一张大图，核心是为了优化性能、减少 Draw Call。其中，Draw Call可以理解为依次绘制请求，cpu每帧能发起的 DC 数量有限，所以DC越多，就越卡。

因此，我们可以通过打图集来提高性能。

详情参见：Unity核心 - 2D图片相关 - Sprite 精灵图片 - Sprite Atlas 精灵图集制作

看Draw Call的方法：查看在Game窗口中的Stats中的Batches（初始为2）

注意：如果一张图集之间插入了别的图或者文本，就要多渲染一次。

进阶

UI事件监听接口

使用UI事件监听接口有2个好处。其一是可以处理长按、双击、拖拽等功能；另一个是能让Image和Text和RawImage三大基础控件能响应玩家输入。

需要引用一个命名空间：

1
using UnityEngine.EventSystems;

常用的事件接口

以下是一些常用的事件接口：

接口名 函数名 含义
IPointerEnterHandler OnPointerEnter 鼠标进入
IPointerExitHandler OnPointerExit 鼠标离开
IPointerDownHandler OnPointerDown 鼠标按下
IPointerUpHandler OnPointerUp 鼠标抬起
IPointerClickHandler OnPointerClick 鼠标点击
IBeginDragHandler OnBeginDrag 开始拖拽
IDragHandler OnDrag 拖拽中
IEndDragHandler OnEndDrag 结束拖拽

以上方法也适用于触屏。

想使用这些事件只需继承上述对应的接口，实现里面的函数，并且将脚本挂载在相应对象上即可。

还有一些不常用的事件接口，这里不做举例。

值得注意的是，上面提到的所有接口里的函数都有一个参数PointEventData eventData，接下俩详细讲解这个参数相关的知识。

  1. 父类：BaseEventData

  2. 参数

  • pointerId：鼠标哪个键按下（左：-1 中：-3 右：-2）
  • position：当前鼠标位置（屏幕坐标系），拖拽也适用
  • pressPosition：当前鼠标位置（屏幕坐标系），拖拽不适用
  • delta：鼠标指针移动增量
  • clickCount：连击次数
  • clickTime：点击时间
  • pressEventCamera：最后一个OnPointerPress按下事件关联的摄像机
  • enterEventCamera：最后一个OnPointerEnter进入事件关联的摄像机

EventTrigger 事件触发器

EventTrigger 事件触发器是一个脚本组件，其上集成了以上提到的所有事件接口，可以让我们更方便的为控件添加事件监听。

有两种使用方法：

拖曳脚本关联
在Inspector窗口选择要使用的事件接口，关联相应的面板对象，选择要实现的函数。

通过代码添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class program : MonoBehaviour
{
	public EventTrigger et;
	
	void Start()
	{
		// 申明一个希望监听的事件对象
		EventTrigger.Entry entry = new EventTrigger.Entry(); // 其中，Entry是一个内部类
		// 初始化申明事件的类型
		entry.eventID = EventTriggerType.PointerUp;
		// 监听回调函数关联
		entry.callback.AddListener((data) =>
		{
			// 抬起后的具体逻辑
		});
		// triggers是一个List<>
		et.triggers.Add(entry);
	}
}

屏幕坐标转UI相对坐标

详情参见 游戏开发 - 坐标转换相关 - 屏幕坐标 -> UI本地坐标

Mask 遮罩

遮罩是在不改变图片的情况下，让图片只显示一部分。

通过在父对象上添加Mask组件即可遮罩其子对象。

注意：

  1. 想要被遮罩的Image需要勾选Maskable
  2. 只要父对象添加了Mask组件，那么所有的UI子对象都会被遮罩
  3. 遮罩父对象图片中，不透明的地方显示，透明的地方被遮罩

另外，如果不想让遮罩图片显示出来的话只需取消Mask组件上的Show Mask Graphic

模型和粒子显示在UI之前

模型显示在UI之前

方法1：直接用摄像机渲染3D物体

  1. Canvas渲染模式改为摄像机模式或者世界模式
  2. 专门用一个摄像机来进行UI和要出现在UI前物体的渲染
  3. 要渲染的3D物体层级必须是UI层，也要改变缩放大小

方法2：将3D物体渲染在图片上，通过图片显示

  1. 专门用一个摄像机渲染3D模型
  2. 将其渲染内容输出到Render Texture上（在Project窗口创建），将摄像机上的Target Texture选为Render Texture
  3. 在渲染UI的摄像机下创建RawImage，将Render Texture拖给RawImage

这种方式的好处是不管Canvas的渲染模式是哪种都可以使用。不过只建议只有一个模型的时候使用。

粒子特效显示在UI之前

和3D物体一样，不过在摄像机模式下可以改变Particle System粒子组件下的Render参数中的Sorting Layer ID或者Order in Layer，使其始终渲染在其他物体前。

自动布局组件和适配器

自动布局组件可以帮助我们自动设置UI控件的位置和大小等。

自动布局 = 自动布局组件 + 布局元素。其中，布局元素是指具有布局属性的对象，主要是指有RectTransform的UI组件。

  1. 水平/垂直布局组件（Horizontal Layout Group和Vertical Layout Group）

水平垂直布局组件会将子对象并排或者垂直的放在一起。

参数相关：

  • padding：左右上下边缘偏移位置
  • Spacing：子对象之间的间距
  • ChildAlignment：九宫格对齐方式
  • Control Child Size：是否控制子对象的宽高
  • Use Child Scale：在设置子对象大小和布局时，是否考虑子对象的缩放
  • Child Force Expand：是否强制子对象拓展以填充额外可用空间

另外，可以给子对象添加一个组件Layout Element布局元素，可以设置子对象的最小（Min）/最大（Preferred）宽高

  1. 网格布局组件（Grid Layout Group）

网格布局组件可以将子对象当成一个个的格子设置他们的大小和位置。

参数相关：

  • padding：左右上下边缘偏移位置
  • Cell Size：每个格子的大小
  • Spacing：格子间隔
  • Start Corner：第一个元素所在位置（4个角）
  • Start Axis：沿哪个轴放置元素
  • Child Alignment：格子对齐方式（9宫格）
  • Constraint：行列约束
    • Flexible：灵活模式，根据容器大小自动适应
    • Fixed Column Count：固定列数
    • Fixed Row Count：固定行数
  1. 内容大小适配器（Content Size Fitter）

内容大小适配器可以自动的调整RectTransform的长宽来让组件自动设置大小。一般在Text、ScrollView上使用，或者配合其他布局组件一起使用。

参数相关：

  • Horizontal/Vertical Fit：如何控制宽度/高度
    • Unconstrained：不根据布局元素伸展
    • Min Size：根据最小宽高伸展
    • Preferred Size：根据偏好宽度伸展
  1. 宽高比适配器（Aspect Ratio Fitter）

宽高比适配器可以让布局元素按照一定比例来调整自己的大小，也可以使布局元素在父对象内部根据父对象的大小进行适配。

参数相关：

  • Aspect Mode：适配模式
    • None：不让矩形适应宽高比
    • Width Controls Height：根据宽度自动调整高度
    • Height Controls Width：根据高度自动调整宽度
    • Fit In Parent：自动调整宽度、高度、位置和锚点。使矩形适应父矩形，同时保持宽高比，会出现“黑边”
    • Envelope Parent：自动调整宽度、高度、位置和锚点。使矩形填满父矩形，同时保持宽高比，会出现“裁剪”
  • Aspect Ratio：宽高比

CanvasGroup 画布组

CanvasGroup 画布组是一个组件，添加到一个父对象后可以帮助我们整体的控制一个面板的淡入淡出、整体禁用。

参数相关：

  • Alpha：整体透明度控制
  • Interactable：整体启用禁用设置
  • Blocks Raycasts：整体射线检测设置
  • Ignore Parent Group：是否忽略父级CanvasGroup的作用