UGUI相关——基础篇

canvas组件

基础使用

• 渲染基础：作为UGUI系统中所有UI元素显示的根本，必须依附于Canvas游戏对象
• 子对象依赖：任何UI控件必须作为Canvas的子对象才能被渲染，否则将不可见

场景中允许存在多个Canvas对象，可以分别管理不同画布的渲染方式和分辨率适应方式等参数

**常规使用:**如果没有特殊需求，一般情况下场景中只需要一个Canvas对象即可

三种渲染模式

在屏幕空间渲染，且覆盖在其他游戏对象之上，则是 Screen Space - Overlay 模式

Screen Space - Camera

在屏幕空间渲染，且根据摄像机视野进行渲染，则是 Screen Space - Camera 模式

SortingLayer所在排序层级相同时，OrderInLayer越是越大，越后渲染，然后覆盖在最上面

使用流程------UI在3d物体前

1、新建一个专门用来显示UI的摄像机，与画布的Overlay---Camera模式挂载

将该摄像机挂载到Canvas中

2、主摄像机不渲染UI层

另外主摄像机的深度要小于UI摄像机（让UI摄像机的UI盖在场景上）

这样无论3D物体是在UI前还是后，表现出的渲染效果都是在UI前面

使用流程------UI在3d物体后

将物体放在Canvas对应UI物体下，然后将3D物体设置为UI层级

在全局空间渲染，（一定是根据摄像机视野进行渲染的）是 World Space 模式

必须设置Event Camera，否则无法正常注册UI事件

典型关联对象：主摄像机（Main Camera）

此图主要用于观察单位统一性

• 单位统一性:
  • UI元素尺寸与世界坐标系单位一致（如100x100的UI与1x1的3D物体大小相同）
  • 可自由调整XYZ坐标位置
• 交互特性:
  • UI可像3D物体一样进行旋转、移动等操作
  • 可实现围绕玩家角色旋转的效果

三种模式的使用环境：

观看这里的塞尔达UI的举例

需要额外注意：这种摄像机模式的------我似乎感觉跟那种用Render Texture的功能有些重合------搜了几篇文章都是说用于MMO中的角色模型展示和UI界面一块的

CanvasScaler的三种参数

• 核心功能:
  • 画布缩放控制器，用于分辨率自适应
  • 只负责UI控件大小自适应，不负责位置（位置由RectTransform组件负责）

屏幕分辨率

• 在Game窗口的Stats统计数据窗口中查看，显示为"Screen"后的数值

画布大小和缩放系数

画布宽高 × 缩放系数 = 屏幕分辨率（如下图所示）

参考分辨率

在缩放模式的宽高模式中出现

• 作用:
  • 参与分辨率自适应的计算
  • 影响最终UI控件的缩放系数

CanvasScaler的三种适配模式

恒定像素模式

这个模式用的比较少------因为不会因为Game界面窗口大小缩放UI，所以用不上

单位参考像素：定义：表示多少个像素对应Unity中的一个单位

计算公式

图片大小98×98像素
Pixels Per Unit=100
Reference Pixels Per Unit=100
计算结果：98×98像素

然后点击Set Native Size其实就是在执行这个公式

缩放模式

**定义：**根据屏幕尺寸进行缩放，会随着屏幕尺寸变化来放大或缩小UI元素。

宽高比: 宽度除以高度的比值（如1920×1080的宽高比为16:9）

功能: 通过参考分辨率与实际分辨率的比例计算，动态缩放UI图标，使其在不同分辨率下显示为合适的大小和自适应UI缩放后的位置

另外需要注意的是：这不是"实际分辨率" ，而是 Unity 编辑器中 Game View 的显示比例和预设分辨率选项。

只是模拟显示，不代表运行时的真实分辨率

• 这些选项（如 Full HD (1920x1080)）只是告诉 Unity：现在 Game View 按照这个尺寸来渲染画面。
• 游戏运行时的实际分辨率是由代码、平台设置（如手机、PC）、或用户设置决定的，与这里的选择无关。

Expand

关键点：

拓展模式会把cameras的这个画布大小，设置的比我们的这种参考分辨率还要大，它的目的就是把整个UI的细节显示的更完整。

但这缺点就是在一些过宽或者过高的屏幕下，不做其他处理的话，背景图是没法填充满的，所以会出现黑边

shrink

这里的案例结果如下：

这里你就能看出和Expand的区别了，Expand尽可能展示细节，所以会出现黑边，Shrink尽可能占满窗口所以会出现裁剪

Match Width Or Height

计算公式

恒定物理模式

也用的少

UI 元素无论屏幕大小和分辨率如何都保持相同的物理大小。

无论换用手机、平板、4K显示器等任何屏幕，用真实尺子去量UI元素（如按钮、文字），其长度/宽度在现实世界中始终是固定值（例如：按钮高1厘米）。

计算公式：

根据DPI算出新的Reference Pixels Per Unit （单位参考像素）

新单位参考像素 = 单位参考像素 * Physical Unit /Default Sprite DPI

配合恒定像素模式使用

3D模式

这种模式比较好理解，可以直接把对应的UI对象当作一个3D对象，会被位置在它前面的其他3D物体挡住，也会挡住位置在它后面的3D物体。

当Canvas的渲染模式为World Space时,Canvas Scaler就变成World模式

只有在3D渲染模式下才会启动的模式，一般用于控制该模式下的像素密度。

Graphic Raycaster

用于检测UI输入事件的射线发射器,通过射线检测玩家和UI元素的交互判断是否点击到了UI

Ignore Reversed Graphics

是否忽略反转的 UI 元素的射线检测，如果勾选此项，射线将会穿过被翻转（正反面）的 UI 元素

我们把实例中 ResetBtn 沿X或Y轴翻转180°（沿Z轴旋转不会翻转 UI）

你会发现ResetBtn不会出现点击效果（因为它被穿透了）------只有取消勾选Ignore Reversed Graphics才会出现点击效果

https://picx.zhimg.com/v2-dc4078998ab5439251f5aa755a5237ef_b.webp

Blocked Objects 和 Blocking Mask

这两个属性一块使用，用来阻止 UI 射线的延伸

Blocked Objects 阻挡物体的类型（2D或3D或者二者都判断），官方字面是这么解释，其实是根据阻挡物上挂的 Collider （必须要有Collider） 类型来判断 阻挡物是 2D 还是 3D

Blocking Mask 阻挡物的 Layer

Blocking Mask也是同理------只不过选择类型不同而已

EventSystem组件

EventSystem是Unity UGUI中的一个重要组件，用于处理用户输入事件，如点击、拖拽、滚动等。

它负责将用户输入事件传递给合适的UI元素，并触发相应的事件回调函数。

EventSystem组件的工作原理：

EventSystem组件通过射线检测来确定用户输入事件发生的位置，并将事件传递给最合适的UI元素------它会根据UI元素的层级关系和射线检测结果来确定事件的目标对象。

组件参数

拖拽操作的阈值：即鼠标移动了多少像素才能拖拽UI

First Selected：拖拽对象后，游戏一开始就默认选择

sendNavigationEvents：勾选它才能使用键盘控制Button的选择切换

Standalone Input Module

Standalone Input Module是Unity UI系统中用于处理输入事件的组件。它能够将用户的输入转换为UI事件，如点击、拖拽等，并根据配置的射线投射器来确定哪些UI元素响应这些事件。

就是因为这个组件------所以我们才能使用键盘/或者其他控制器控制UI相关功能

RectangleTransform

RectTransform是专用于2D布局的Transform组件（相对3D）。

Transform定义了一个点，但Rect Transform定义了可摆放UI元素的一个矩形。如果Rect Transform的父节点也是Rect Transform，则子节点可参照父节点来定义位置和尺寸。

RectTransform继承于Transform，在 Transform 基础上，RectTransform 增加了 轴心（pivot）、锚点（anchors）、和 尺寸变化量（sizeDelta）。

注意事项：

anchors与缩放时的UI自适应相关------确保缩放前后UI的大小与位置的合理性。

Pivot与物体本身的位置，缩放，旋转有关（即这些行为的基准点）

Archor与pivot

anchors的向量空间是子UI相对父UI的比例位置，pivot的向量空间是相对UI本身的比例位置。

进一步说明

GameObject的Anchor是基于Canvas大小的

Archor与Position

如果子物体Pivot为（0,0）------你会发现子物体轴心点和锚点的对应位置发生了改变

Archor的矩形模式

如果锚点在某轴上重合------则相当于改变单边的位置

快捷操作

Image

Image用于显示UGUI中的图片元素

Raycast Target

不勾选，该UI就不会被鼠标的射线检测到。

图片类型（Slice/Tiled/Simple/full）

普通模式不多讲了------正常缩放，均匀缩放

Slice模式和Tiled模式

先设置好sprite Editor中的划分，都是可以用九宫格法进行缩放------Slice是通过直接拉伸进行缩放，而Tiled通过填充中间部分内容进行缩放

填充模式

感觉有点像做CD技能冷却动画或者进度条动画的东西

保持宽高比: 勾选后无论容器如何变形都保持原图比例------这是图片类型通用的

以上内容以及组件中的全部参数可以交由代码控制

public class Lesson7 : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        // 知识点一：Image 是什么？
        // 知识点二：Image 参数

        #region 知识点三：代码控制
        Image img = this.GetComponent<Image>();
        img.sprite = Resources.Load<Sprite>("ui_TY_fanhui_01");
        #endregion
    }

    // Update is called once per frame
    void Update()
    {
        // 空实现
    }
}

Text

了解即可

RawImage

软式图像控件,用于显示任何纹理图片的组建,与Image相比,RawImage一般用于显示大图(背景图,不需要打入图集的图片,网络下载的图等)

Button组件

用颜色表示按钮状态变化

用图片表示按钮状态变化

用动画表示按钮状态变化

红色选框位置------自动生成动画状态机，然后在对应动画状态机中修改你要的对应动画效果

导航模式

Toggle组件

定义: Toggle是Unity UGUI中的开关组件，用于处理玩家单选框和多选框相关交互。

● 默认类型: 开关组件默认是多选框形式。

多选框

多选框特性: 默认创建的Toggle相互独立，可同时选中多个

单选框

单选框特性：当我选择一个时，其他的都要取消选择

Toggle组件基本参数

Group如何改变为单选框

这里三个Toggle对象的组件的Group同时挂载这三个组件的父对象（ToggleGroup组件持有者），就说明这三个关联一个单选结果。

补充，重要的不是ToggleGroup组件放在哪儿，而是多个Toggle共用同一ToggleGroup（即使不是父级物体，也不影响）

另外，ToggleGroup组件中的Allow Switch Off参数，如果勾选，说明多选框可以一个都不勾选

Toggle代码相关控制

#region 知识点三 代码控制

Toggle tog = this.GetComponent<Toggle>();
tog.isOn = true;
print(tog.isOn);

ToggleGroup togGroup = this.GetComponent<ToggleGroup>();
togGroup.allowSwitchOff = false;

// 可以遍历提供的迭代器，得到当前处于选中状态的 Toggle
foreach (Toggle item in togGroup.ActiveToggles())
{
    print(item.name + " " + item.isOn);
}

// 代码监听toggle开关的启动
tog.onValueChanged.AddListener(ChangeValue2);

InputField组件

组件定义：InputField是UGUI中处理玩家文本输入交互的关键组件

具体使用案例

以此图为例

输入内容本质是先要InputField组件挂载好Text组件才能运行时输入内容（输入内容在InputField组件中的Text）

• Placeholder：它是 InputField 的子对象，类型是 Text，用于显示默认提示文字（如 "请输入..."）。
  • 当用户开始输入时，Placeholder 会自动隐藏；当输入为空时，它又会显示出来。

Content Type

输入类型的字符限制

Line Type

行类型的限制

InputField代码控制

#region 知识点三 代码控制

InputField input = this.GetComponent<InputField>();
print(input.text);
input.text = "123123123123";

#endregion

#region 知识点四 监听事件的两种方式
//1.拖脚本
//2.代码添加

input.onValueChanged.AddListener((str) =>
{
    print("代码监听 改变" + str);
});


//当用户结束编辑时触发（例如点击其他地方、按回车键）
input.onEndEdit.AddListener((str) =>
{
    print("代码监听 结束输入" + str);
});

#endregion

Slider组件

**组件定义：**Slider是UGUI中用于处理滑动条相关交互的关键组件

注意如果未勾选Whole Numbers------会导致value在滑动过程中出现小数

代码控制

Slider s = this.GetComponent<Slider>();
print(s.value);

#endregion

#region 知识点四 监听事件的两种方式

//Slider的回调函数需要传入值
s.onValueChanged.AddListener((v) =>
{
    print("代码添加的监听" + v);
});

//似乎Slider组件没有结束监听的函数

ScrollBar组件

**定义:**Scrollbar是UGUI中用于处理滚动条相关交互的关键组件

• 通常不单独使用，主要配合ScrollView滚动视图使用

这里Number Of Steps：是将滑动的距离0~1，平均分成多少次------就会最多滑动多少下

代码控制

Scrollbar sb = this.GetComponent<Scrollbar>();
print(sb.value);
print(sb.size);


sb.onValueChanged.AddListener((v) => {
    print("代码监听的函数" + v);
});

ScrollView滚动视图

• 本质：ScrollRect是Unity中控制滚动视图的核心组件，创建时命名为ScrollView但实际由ScrollRect组件驱动
• 功能：处理UGUI中所有滚动视图相关的交互逻辑

这里滚动滑动条------你会发现Content视图窗口和Content整体面板发生了相对位移

1、**Inertia：**直接拖拽Content面板，松开后会有一定惯性进行移动

代码控制

void Start()
{
    #region 知识点三 代码控制
    ScrollRect sr = this.GetComponent<ScrollRect>();
    // 改变内容的大小 具体可以拖动多少 都是根据它的尺寸来的
    // sr.content.sizeDelta = new Vector2(200, 200);

    sr.normalizedPosition = new Vector2(0, 0.5f);
    #endregion

    #region 知识点四 监听事件的两种方式
    // 1. 拖脚本
    // 2. 代码添加

    sr.onValueChanged.AddListener((vec) =>
    {
        print(vec);
    });
    #endregion
}

DropDown下拉面板

**定义：**Dropdown是UGUI中用于处理下拉列表交互的关键组件

Caption Text是当前选择好的选项内容，已进行显示的文本组件

Item Text是其他下拉列表的文本控件，其他下拉选项都是通过该文本组件复制得来的

如何添加图片控件给下拉内容

1、设置图片位置

2、利用图片控件进行编辑

代码控制

#region 知识点三 代码控制
Dropdown dd = this.GetComponent<Dropdown>();
print(dd.value);
print(dd.options[dd.value].text);

dd.options.Add(new Dropdown.OptionData("123123123"));
#endregion

#region 知识点四 监听事件的两种方式
// 1. 拖脚本
// 2. 代码添加
dd.onValueChanged.AddListener((index) => {
    print(index);
});
#endregion