UGUI

1.UGUI概述

GUI,NGUI是过时UI系统，FairyGUI是第三方unity插件，日后可以学习，现在最重要最常用的就是UGUI

2.六大基础组件概述

  • 创建方法：

    • 在Hierarchy窗口右键选择UI选项

    • 所有UI相关内容都在该菜单下

    • 示例：创建Image控件会自动生成Canvas和EventSystem

  • 编辑技巧：

    • 场景窗口需切换为2D模式
    • 使用矩形工具(Rect Tool)进行UI编辑
    • UI内容必须保持在白色边框(摄像机可视范围)内

  • 依附对象：

    • Canvas对象上依附4个组件：Canvas、Canvas Scaler、Graphic Raycaster、RectTransform
    • EventSystem对象上依附2个组件：EventSystem、Standalone Input Module

  • 自动生成：创建任何UI控件时，这两个核心对象会自动生成

六大组件基本作用：img

3.Canvas渲染模式的控制

Canvas组件控制UI渲染，分为三种渲染模式：

（1）覆盖

  • UI始终显示在场景内容前方

  • 不需要指定摄像机

  • 参数配置：

    • Pixel Perfect: 抗锯齿开关(性能换效果，一般不开)

    • Sort Order: 多个Canvas的渲染顺序控制（数字越大越后渲染，显示越靠前）

    • Target Display: 目标显示设备

    • Additional Shader Channels: 着色器可读取的数据通道（不用管）

（2）摄像机

  • 需要指定渲染摄像机，不然就还是覆盖模式
  • 指定特定摄像机后，把此摄像机剔除遮罩（culling mask）只选UI，把摄像机渲染类型改为overlay（没有UI的部分为透明，这时候背景类型就不要管了，自动设置好了），将此UICamera加入主摄影机的栈里（渲染类型为overlay的摄影机无法单独存在），并将主摄影机的剔除遮罩去掉UI

现在的渲染逻辑是：
Unity 先渲染 Main Camera (3D世界) -> 然后保留画面 -> 再把 UICamera (UI元素) 叠加上去。

  • 指定摄像机后3D物体和UI可以互相遮挡，需要这种操作时一般让3D物体成为canvas子物体的子物体（例如image的子物体）

  • 新增参数：

    • Render Camera: 指定渲染UI的摄像机（需指定新的摄像机）

    • Plane Distance: UI平面与摄像机的Z轴距离

    • Sorting Layer：层级排序系统（默认层为Default）

    • Order in Layer：同层级内的渲染优先级（数值越大显示越靠前）

（3）世界空间

  • UI作为3D世界中的对象存在
  • 可与其他3D对象产生空间交互
  • 常用于游戏内UI、VR/AR界面等场景

额外补充： 场景中可以有多个Canvas对象 — 不同的渲染和分辨率适应方式，但是不常用

4.CanvasScaler必备知识

CanvasScaler是画布缩放控制器，用于UI分辨率自适应

1.学前准备

（1）屏幕分辨率查看

img

  • 查看位置: Unity编辑器Game窗口的Stats统计数据窗口

  • 特性:

    • 实时显示当前Game窗口尺寸

    • 会随窗口大小调整动态变化

    • 参与分辨率自适应计算

（2）画布大小和缩放系数

  • 计算公式: 画布宽高 × 缩放系数 = 屏幕分辨率

  • 验证方法:

    • 示例计算：800 × 0.97125 ≈ 777（宽度）

    • 519.9485 × 0.97125 ≈ 505（高度）

  • 重要规律: 该关系适用于所有适配模式

（3）参考分辨率

img

  • 出现条件: 仅在”Scale With Screen Size”模式中出现

以下为Gemini对参考分辨率的解释：
一、 参考分辨率是什么意义？
你可以把它理解为**“设计师的画布尺寸”或者“标准尺子”**。

  1. 它是沟通的基准
    当美术给你出 UI 图时，你必须问他：“你是按多大尺寸画的？”
    如果美术说：“我是在 PS 里按 1920x1080 画的。”
    那么你的参考分辨率就必须设为 1920x1080。
    意义在于：
    如果不设定这个基准，一个“100像素宽”的按钮，在 4K 屏幕上会像一粒米那么大，而在老式诺基亚屏幕上可能占满全屏。
    有了参考分辨率，Unity 就知道：“哦，你在这个分辨率下设计的按钮占屏幕宽度的 10%，那到了其他手机上，我也尽量让它占 10%。”
  2. 它是缩放计算的分母
    Unity 计算缩放系数（Scale Factor）的公式其实很简单：
    缩放系数=当前手机的实际分辨率/你设置的参考分辨率

举例：
参考分辨率设为 1920 (宽)。
玩家手机是 iPhone 14 Pro Max，宽度比如是 2796。
Unity 就会算出：
2796/1920≈1.45
于是，你游戏中所有的 UI 元素都会被放大 1.45 倍。(是指占用像素量放大1.45倍，但不同设备dpi每英寸像素密度是不一样的)
结果： 虽然手机像素变多了，但按钮在视觉上的占比和你在电脑上看到的一模一样。

2.三种适配方式

img

常用第二种，第一种和第三种类似

5.CanvasScaler恒定像素模式

img

核心特性：无论屏幕大小如何，UI始终保持相同像素大小

1.缩放系数

  • 作用：按此系数缩放画布中的所有UI元素

  • 计算公式：宽高×缩放系数=屏幕分辨率

  • 示例：

    • 默认值为1时，UI元素保持原始大小

    • 设置为2时，UI元素扩大两倍

    • 修改后Canvas的宽高变为屏幕分辨率的一半

2.每单位参考系数

img

  • 定义：表示多少个像素对应Unity中的一个单位
  • 默认值：100像素对应1个Unity单位
  • 关联参数：与图片设置中的Pixels Per Unit参数共同参与计算图片原始大小
  • 公式：UI原始尺寸=图片大小(像素)/(Pixels Per Unit/Reference Pixels Per Unit)

Pixels Per Unit是sprite里的每单位像素数

  • 应用：

    • 当两个参数都为100时，结果为1，图片保持原始尺寸

    • 当Reference Pixels Per Unit改为50时，计算值为2，图片尺寸减半

    • 通过Image组件的Set Native Size（设置原生大小）按钮触发计算

  • 要注意：导入的普通图片要在纹理类型选为：sprite(2D和UI)，sprite模式要选为：单一，并且保存后才能作为sprite使用

6.CanvasScaler缩放模式（最常用）

img

三种屏幕匹配模式：

1.expand

一句话：水平或垂直拓展画布区域，会尽力展示所有UI，但可能会出现黑边

具体细节：

img

2.shrink

一句话：水平或垂直裁剪画布区域，会尽力让画布充满屏幕，但可能会出现裁剪

具体细节：

img

3.match width or height(最常用)

img

7.CanvasScaler恒定物理模式

不需要知道太多，作用就是在不同设备ui的物理大小一样，基本用不到

img

img

8.CanvasScaler世界模式（3D模式）

只有在Canvas渲染模式改为worldspace才会出现的模式，不常用，只需记住DPPU越大UI文本越清晰

img

9.GraphicRaycater图形射线投射器组件

canvas渲染模式选为overlay没有后两个选项

1.第一个就是指是否能点击按钮背面（当沿x或y轴旋转后按钮背面展现在摄像机前，此时能否点击，而沿z轴旋转是转圈，正面始终朝向屏幕）

2.第二个和第三个一起作用，就是说哪些层的哪些类型的碰撞器能阻挡你不能点按钮（举例：设置一个带有collider的cube，层级是default，blocking mask选为default，blocking objects选为3D，这时cube放在按钮前的话就不能够点击了）

img

10.EventSystem和StandaloneInputModule

img

1.EventSystem组件

img

2.StandaloneInputModule

基本不需要更改，初始键位已经帮我们设置好了

img

11.RectTransform矩形变化

img

1.轴心点

各个UI的中心，绕z轴旋转基于的点，以及宽高修改基于的点

例如轴心在UI最左侧，改变宽度UI只会向右拉伸

2.锚点

注意锚点都是相对于父矩形的，

当锚点是点时：Pos(X,Y,Z)是轴心点相对于锚点的位置，可以实现分辨率改变时UI相对于父矩形位置不变

当锚点是范围时：

img

Pos(X,Y,Z)会变为左右上下，分别代表UI最左边距离父矩形左边的距离……当想让UI随父矩形大小改变而改变时可以这样做

3.快捷操作

img

shift和alt也可以同时按

重要补充：RectTransform的位置是anchoredPosition，也就是轴心点相对于父矩形锚点的位置，而localPosition是轴心点相对于父物体轴心点的位置

12.Image图像控件

1.参数详解

img

unity6版本Raycast Target翻译为了光线投射目标

四种图片类型：

（1）simple:当你的图片不需要拉伸时选这个

（2）sliced:可以在源图像的sprite editor下修改九宫格，这样image拉伸时就只拉伸十字区域，四个角是不变的，能使图片更加自然，适合设置背景时使用

（3）tiled:拉伸图片不会放大，会出现多个图片，同样能用九宫格控制，适合作为背包底图

（4）filled:可以选择多种填充方式，适合作为血条和CD

2.代码控制

常见代码：

img

13.Text文本控件

1.参数相关

img

2.富文本

img

开启富文本可以对文本分别添加不同的效果

（改正：颜色后面不是而是）

3.代码控制

img

14.RawImage原始图像控件

不常用，与image一大区别是可以用各种类型的源图像，不需要打入图集

img

15.Button按钮控件

1.参数详解

imgimg

img

2.代码控制

img

3.监听点击事件的两种方式

（1）拖脚本

img

拖入脚本选择监听的函数功能

（2）写代码

点击按钮相当于委托，用代码可以添加或去除订阅者

img

16.Toggle开关控件

img

1.参数详解

部分参数和button一样不再赘述

img

(1)一般不更改Graphic而是更改子对象Checkmark

(2)单选框操作：

在canvas下新建空物体取名ToggleGroup并添加组件Toggle Group，把互斥的按钮当做其子对象，然后把父对象ToggleGroup拖入每个子对象按钮的group里就行

这只是一种比较直观的方式，当然不创建父对象也行，直接在互斥的其中一个按钮添加toggle group组件，然后把这个对象拖到与其互斥按钮的group里就行，自己的group也要拖

2.代码控制

img

3.监听开关事件

img

两种方式都要注意，要选择传入bool类型的函数功能，开和关按钮时都会触发委托，且把按钮状态传入此bool类型

17.InputField文本输入控件

1.参数详解

img

Content Type：

img

Line Type:

img

2.代码控制

img

3.监听事件

有两种监听事件，一个是改变输入值时，一个是结束输入时（回车或光标点击文本框外）

（1）拖脚本

img

（2）代码

img

18.Slider滑动条控件

1.参数详解

img

2.代码控制

img

3.监听事件

监听的函数一定要传入一个float值

img

19.ScrollBar滚动条

一般配合ScrollView一起使用

1.参数详解

img

2.代码控制

img

3.监听事件

监听的事件要传入一个float值

20.ScrollView滚动视图

ScrollView的基本组件名叫ScrollRect，所以一般代码控制时类型要写ScrollRect

1.参数详解

img

（1）具体内容作为Content子物体

（2）改变Content宽高变成了改变其右和高度，右代表其右边距离父矩形右边的距离，向左为正

（3）当不需要一侧的滚动条时，delete控件的同时，要在ScrollRect里把对应滚动条选为null

（4）Auto Hide And Expand Viewport:意思就是当content画幅小于等于viewport时，就把滑动条隐藏了，并且把viewport拓宽到原滑动条外边界

2.代码控制

img

3.监听

一般不常用，监听函数要传入vector2

21.Dropdown下拉列表

1.参数详解

img

2.代码控制

img

3.监听事件

需要传入int类型值

22.DrawCall（性能优化）

1.定义

img

img

DrawCall在UI、3D模型、shader等方面都有，这次主要讲UI方面

2.注意事项

要注意不同图的层级关系，假设A,B,C三张图都挂在一个panel下，A和C在同一张图集，B在另一张图集，ABC的层级依次为123，此时的DrawCall为3次，然而将AC层级放在相邻时，属于同一图集所以会批处理一起渲染，DrawCall此时为2

3.用内存换取减少DC

举个例子，当三个面板都需要一张图时，你可以将这张图分别打入三份面板使用的图集，这样会减少DC但会增加内存；又或者将这张图打入通用图集，这样每个面板的DC都会增加一次，但内存会减少

23.图集制作

1.如何打开制作图集功能

img

一般我们选择最后一个Always Enabled

2.参数

img

这里先只讲两个参数，允许旋转和紧密包装一般关闭，紧密包装是指有的小图中间是透明部分，这透明部分也可以放其他小图，一般都关闭避免未知报错发生

3.代码控制

img

24.UI事件监听接口

1.何意味

img

2.常用事件接口

一定不要忘了在monobehaviour后面加上这些接口名，不加脚本不会报错但实现不了效果

img

接口名-函数名-功能

不常用的：

img

3.PointerEventData

实现接口的函数需要传入一个PointerEventData，这是一个独立的类，里面记录着鼠标的各种信息，可以调用它的内置变量，它的父类是BaseEventData

img

它的常用变量：

img

4.总结

img

怎样避免这个麻烦呢，可以在控件脚本内创建新的事件，接口函数内就调用这个新事件，然后panel脚本里订阅这个新事件，这样重要的逻辑操作就还是在panel脚本里完成

25.EventTrigger事件触发器

1.定义

img

它是一个组件，里面实现了各种接口，要哪个就把哪个加到list里

2.使用方式

（1）拖脚本

在检查器里选择想要控件实现的接口，然后添加函数，要注意函数里要传入BaseEventData变量(PointerEventData的父类)（代码控制里的函数也需要传这个类型变量），如果想在函数里用PointerEventData里面好用的变量，需要写这么一句PointerEventData eventData=data(传入的BaseEventData变量名) as PointerEventData;

（2）代码控制

稍微比较复杂，具体流程如下：

// 1. 创建Entry对象
EventTrigger.Entry entry = new EventTrigger.Entry();
// 2. 设置事件类型
entry.eventID = EventTriggerType.PointerUp;
// 3. 添加监听函数
entry.callback.AddListener((data)=>{
print(“抬起”);
});
// 4. 添加到触发器
et.triggers.Add(entry);

一句话：新建 Entry -> 设类型 -> 加函数 -> 扔进 List

EventTrigger.Entry是EventTrigger里的一个类，eventID是Entry里的一个变量名

设置完成后检查器里可能只有接口类型，没有函数，但其实效果是实现了的

3.优势

  • 接口方式（静态，写死的）：

  • 场景：你要做一个按钮，它的功能永远是“发射子弹”。

  • 写法：直接在脚本里写 OnPointerUp。

  • 优点：代码清晰，性能最好。

  • EventTrigger 代码方式（动态，灵活的）：

  • 场景：你写了一个“通用技能槽”脚本。

  • 当玩家把“火球术”放进去时，你需要在代码里动态地告诉这个格子：“按下你的时候，放火球”。

  • 当玩家把“治疗术”放进去时，你需要把之前的事件清空，改成：“按下你的时候，加血”。

  • 优点：动态灵活

26.屏幕坐标转UI相对坐标

1.何意味

img

就是鼠标的位置在ui中一般是相对于左下角而言的，用了RectTransformUtility中的函数可以将鼠标转化为想控制ui控件的父对象下的相对位置，就是和想控制ui的控件在一个坐标系了，这样更加方便控制这个控件的位置变动（注意这里返回的是localPosition）

2.如何使用

img

父对象很关键，一定明确想控制控件的父对象是谁，还需要得到渲染UI的摄像机，用eventData.enterEventCamera就能得到

27.Mask遮罩

img

28.模型和粒子显示在UI之前

1.两种方式

img

img

方法二流程：创建一个3D物体，把其图层设为model，创建一个新摄影机只拍它，剔除遮罩也只选model，Render Texture选上这个摄影机。然后在canvas里创建raw image（因为能用各种类型的图片），然后把render texture当做源图像就行了

（这种方法适合只有一个3d模型需要在ui展示）

2.粒子的特殊点

说的可以通过调整z轴来让一部分出现在image前，但我试了不行啊

粒子系统里能改变图层顺序来让粒子完全出现在image前

29.异形按钮

img

两种方式：

（1）创建image拖入异形源图像，在image下创建子对象button，去掉button的text，将button的颜色改为全透明，在button组件将目标图形改为这个image异形图像，这样点击button的话异形图像就会响应，然后在button下创建多个透明的image子对象，填满异形图片，这样点异形图就会点到透明image或者button本身，都会让button响应

（2）这种方法简单准确，但会增加内存（开启Read/Write Enabled）

30.自动布局组件

1.何意味

img

2.布局元素的布局属性

ui控件检查器最下方可以选择查看“布局属性”

img

自动布局组件会根据这些属性来进行布局

一般布局属性不需要改的，如果需要实现特定效果就加LayoutElement组件更改就行

3.各种自动布局组件

（1）水平垂直布局组件

img

（2）网格布局组件

img

（3）内容大小适配器

img

最常用的是在ui父控件上加网格布局组件（Grid Layout Group）和内容大小适配器（Content Size Fitter）一起使用

（4）宽高比适配器

img

31.CanvasGroup

img