UGUI笔记

六大基础组件

Canvas对象上依附的

Canvas：画布组件，主要用于渲染UI

Canvas Scaler：画布分辨率自适应组件，主要用于分辨率自适应

Graphic Raycaster：射线事件交互组件，主要用于控制射线响应相关

RectTransform：UI对象位置锚点控制组件，主要用于控制位置和对其方式

EventSystem对象上依附的

EventSystem、Standalone Input Module：玩家输入事件响应系统和独立输入模块组件，主要用于监听玩家操作

Canvas组件

canvas的作用：
渲染自己所有的UI子对象

如果UI控件对象不是Canvas的子对象，那么控件将不能被渲染
可以通过修改Canvas组件上的参数修改渲染方式

场景上可以有多个Canvas对象
可以分别管理不同画布的渲染方式，分辨率适应方式等参数

三种渲染模式

Screen Space -Overlay:屏幕空间，覆盖模式，UI始终在前

Screen Space -Camera:屏幕空间，摄像机模式，3D物体可以显示在UI之前

World Space:世界空间，3D模式

Screen Space -Overlay

覆盖模式，UI始终显示在场景内容的前方

Pixel Perfect:是否开启无锯齿精确渲染(性能换效果)
SortOrder:排序层编号(用于控制多个Canvas时的渲染先后顺序)
TargetDisplay:目标设备(在哪个显示设备上显示
Additional Shader Channels:其他着色器通道，决定着色器可以读取哪些数据

Screen Space -Camera

摄像机模式，3D物体可以显示在UI之前

RenderCamera:用于渲染Ul的摄像机(如果不设置将类似于覆盖模式)（建议用单独一个摄像机来渲染  ）
Plane Distance:U平面在摄像机前方的距离，类似整体Z轴的感觉（不建议用这个来调整3D物体和UI的先后顺序）
Sorting Layer: 所在排序层
Order in Layer:排序层的序号

World Space

3D模式，可以把UI对象像3D物体一样处理，常用于VR或AR

Event Camera：用于处理UI事件的摄像机（不设置的话不能正常注册UI事件）

CanvasScaler组件

CanvasScaler意思是画布缩放控制器，它用于分辨率自适应的组件

它主要负责在不同分辨率下UI控件大小自适应，它并不负责位置，位置由之后的RectTransform组件负责

它主要提供了三种分辨率自适应的模式，我们可以选择符合我们项目需求的方式进行分辨率自适应

必备知识点

屏幕分辨率:
Game窗口中的Stats统计数据窗口看到的当前“屏幕”分辨率会参与分辨率自适应的计算

画布大小和缩放系数：
选中Canvas对象后在RectTransform组件中看到的宽高和缩放
宽高*缩放系数 = 屏幕分辨率

Reference Resolution:
参考分辨率
在缩放模式的宽高模式中出现的参数，参与分辨率自适应的计算

分辨率大小自适应
通过一定的算法以屏幕分辨率和参考分辨率参与计算得出缩放系数
该结果会影响所有UI控件的缩放大小

三种适配模式

Constant Pixel Size(恒定像素模式)无论屏幕大小如何，U始终保持相同像素大小
Scale With Screen Size(缩放模式):根据屏幕尺寸进行缩放，随着屏幕尺寸放大缩小
Constant Physical Size(恒定物理模式):无论屏幕大小和分辨率如何，UI元素始终保持同物理大小

Constant Pixel Size(恒定像素模式)

Scale Factor ： UI缩放比例，按此系数缩放UI

Reference Pixels Per U：单位参考像素，多少像素对应Unity中的一个单位(默认一个单位为100像素)

图片设置中的Pixels Per Unit设置，会和该参数一起参与计算

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

Pixels Per Unit在图片中修改

Set Native Size就是设置成原始尺寸

这种模式各种UI大小都是固定的（保持原始尺寸）

但是我们可以通过代码得到屏幕分辨率然后修改Scale Factor从而达到放大缩小的效果

Scale With Screen Size(缩放模式)

Reference Resolution:参考分辨率(美术同学出图的标准分辨率)
缩放模式下的所有匹配模式都会基于参考分辨率进行自适应计算

Screen Match Mode

屏幕匹配模式，当前屏幕分辨率宽高比不适应参考分辨率时，用于分辨率大小自适应的匹配模式

Expand

水平或垂直拓展画布区域，会根据宽高比的变化来放大缩小画布，可能有黑边
将Canvas Size进行宽或高扩大，让他高于参考分辨率计算公式
缩放系数 = Mathf.Min(屏幕宽/参考分辨率宽屏幕高/参考分辨率高)
画布尺寸 屏幕尺寸/缩放系数

就是通过扩大画布来显示全部UI

表现效果:最大程度的缩小UI元素，保留UI控件所有细节，可能会留黑边

Shrink

水平或垂直裁剪画布区域，会根据宽高比的变化来放大缩小画布，可能会裁剪

将Canvas Size进行宽或高收缩，让他低于参考分辨率计算公式:
缩放系数 =Mathf.Max(屏幕宽/参考分辨率宽，屏幕高/参考分辨率高)
画布尺寸=屏幕尺寸/缩放系数

就是缩小画布，让长或宽完全显示，另一个维度不完全显示

表现效果:最大程度的放大UI元素，让UI元素能够填满画面，可能会出现裁剪

Match Width Or Height

以宽高或者二者的平均值作为参考来缩放画布区域

Match:确定用于计算的宽高匹配值

表现效果
主要用于只有横屏模式或者竖屏模式的游戏
竖屏游戏:Match=0将画布宽度设置为参考分辨率的宽度并保持比例不变，屏幕越高可能会有黑边
横屏游戏:Match=1将画布高度设置为参考分辨率的高度并保持比例不变，屏幕越长可能会有黑边

Constant Physical Size(恒定物理模式)

DPI：图像每英寸长度内的像素点数

Physical Unit：物理单位，使用的物理单位种类

Fallback Screen DPI：备用DPI，当找不到设备DPI时使用此值

Default Sprite DPI：默认图片DPI

目的是在不同DPI设备上显示相同像素的大小相同

总结：

它不会让UI控件进行分辨率大小自适应、但是会让UI始终保持设置的大小显示
并且会根据设备DPI进行计算，让不同设备上的显示大小更为准确

3D模式

当渲染模式为World Space时，缩放模式会会强制转换成World 3D世界模式

Dynamic Pixels PEr Unit：UI中动态创建的位图（例如文本）中，单位像素数。

可以让动态创建的位图变得更清晰（例如文本中的文字）

Graphic Raycaster组件

图形射线投射器，用于检测UI输入事件的射线发射器，主要负责通过射线检测玩家和UI元素的交互，判断是否点击了UI

参数

Ignore Reversed Graphics：是否忽略反转图形
选中时X轴或Y轴翻转时按钮将不能响应点击
 

Blocking Objects：射线被哪些类型的碰撞器阻挡（在Screen Space -Overlay渲染模式下无效）
为None时可以透过显示在UI之前的带有碰撞体的3D、2D物体点击按钮
还可以选Two D、Three D即不能透过这类物体点击按钮
All就是都不能透过
 

Blocking Mask：射线被哪些层级的碰撞器阻挡（在Screen Space -Overlay渲染模式下无效）
默认是Everything即所有层级都会被阻挡（在Blocking Objects参数的基础上）
如果不选择某些某些层级，就可以透过某些层级的物体点击

EventSystem和Standalone Input Module组件

Event System

事件系统
管理玩家的输入事件并分发给各个UI控件
所有UI事件都通过EventSystem组件中轮询检测并做相应的执行
类似中转站、与许多模块共同协作

若没有，所有点击拖曳行为都不会被响应

提供了调试打印信息帮助我们查看鼠标位置、选中内容等信息

参数

FirstSelected：

首先选择的游戏对象，可以设置游戏一开始的默认选择

Send Naviagation Events：

是否允许导航事件（移动/按下/取消）
可以通过上下左右WASD来移动选择

Drag Threshould：拖曳操作阈值（拖动多少像素算拖拽）

Standalone Input Module

独立输入模块
针对处理鼠标/键盘/控制器/触屏的输入
输入的事件通过EventSystem进行分发
它依赖于EventSystem组件

参数（了解）

RectTransform组件

RectTransform意为矩形变换、它继承于Transform

参数

Pivot：
轴心点，取值范围0-1（左下角为0,0点）
旋转会以该点进行
Anchors（相对父矩形锚点）：
Min是矩形锚点范围X和Y的最小值
Max是矩形锚点范围X和Y的最大值
取值范围都是0-1

Pos(X,Y,Z)：轴心点相对锚点的位置

若将锚点改成一个矩形范围：
原本的位置信息和长宽：

会变成距离上下左右的距离（可以是负数）：

若锚点改成一条线，则对应X/Y仍会出现，表示位置

Blueprint Mode（蓝图模式）：启用后，编辑旋转和缩放不会影响矩形，只会影响显示内容

Raw Edit Mode(原始编辑模式)，启用后，改变轴心和锚点值不会改变矩形位置（图片实际位置会改变，即改变Pivot位置但PosXY不会改变）

三大基础控件

Image图像控件

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

图片显示顺序：越下面越后渲染，后渲染的在上面

参数

切片模式：一般在面板背景图使用

平铺模式：重复原图，可以用做面板底纹

填充模式：可以用作进度条/血条

代码控制

Image img = this.GetComponent<Image>();
img.sprite = Resources.Load<Sprite>("小刻");
(transform as RectTransform).sizeDelta = new Vector2(200, 200);

Text文本控件

用于显示文本的组件

参数

类似于html

边缘线：要加上Outline组件

阴影：加上Shadow组件

代码控制

        Text text = this.GetComponent<Text>();
        text.text = "星穹铁道高手";

Rawimage（原始图片）大图控件

原始图像组件
是UGUI中用于显示任何纹理图片的关键组件
它和Image的区别是：一般RawImage用于显示大图（背景图，不需要打入图集的图片，网络下载的图等等）

参数

Texture可以拖入任何形式的图片，不止sprite

代码控制

RawImage raw = this.GetComponent<RawImage>();
raw.texture = Resources.Load<Texture>("阿能");

组合控件

button按钮控件

默认创建的Button由两个对象组成
父对象：Button组件依附的对象，同时挂载了一个Image组件，作为按钮的背景图
子对象：按钮文本（可选）

参数

代码控制

对于拖脚本来说只能拖公共函数

        Button bnt = GetComponent<Button>();
        bnt.interactable = true;
        bnt.transition = Selectable.Transition.None;

        Image img = GetComponent<Image>();

        //监听点击事件的两种方式
        //点击事件需要在按钮内完成一次按下和抬起


        //1.拖脚本


        //2.代码添加
        bnt.onClick.AddListener(ClickBnt2);//传入无参无返回值的委托
        bnt.onClick.AddListener(() =>
        {
            print("lambda");
        });
        bnt.onClick.RemoveListener(ClickBnt2);//无法指定删除lambda表达式，因为没有名字
        bnt.onClick.RemoveAllListeners();

Toggle开关控件

UGUI中用于处理玩家单选框多选框相关交互的组件

默认是多选框，但可以配合ToggleGroup组件制作为单选框

由四个对象组成：
父对象：Toggle组件依附
子对象：背景图（必须）、选中图（必须）、说明文字（可选）

参数

这部分参数与按钮的相同

构造单选框：
创建空物体，添加Toggle Group组件，然后再把若干个toggle放进去（成为其子对象）
再把父对象拖入各个子对象Toggle组件上的Group参数中

但是其实只要使各个对象的Group是同一个对象即可（不一定要父对象，父对象只是为了直观）

代码控制

    void Start()
    {
        Toggle tog = this.GetComponent<Toggle>();
        tog.isOn = true;
        print(tog.isOn);
        ToggleGroup toggleGroup = this.GetComponent<ToggleGroup>();
        toggleGroup.allowSwitchOff = false;
        //得到当前处于选中状态的Toggle
        foreach(Toggle item in toggleGroup.ActiveToggles())
        {
            print(item.name + "" + item.isOn);
        }
        //监听事件两种方式

        //public函数直接拖入

        //代码控制
        tog.onValueChanged.AddListener(ChangeValue2);
        tog.onValueChanged.AddListener((b) =>
        {
            print("状态改变" + b);
        });
    }

    //与按钮不同的是，函数需要传入一个bool参数
    public void ChangeValue(bool isOn)
    {
        print("状态改变"+isOn);
    }
    private void ChangeValue2(bool isOn)
    {
        print("状态改变" + isOn);
    }

InputField文本输入控件

用于处理玩家文本输入相关交互的组件

默认由三个对象组成：
父对象：InputField组件依附对象以及同时在其上挂载了一个Image作为背景图
子对象：文本显示组件（必须）、默认显示文本组件（必须）

参数

和Button相同的参数作用相同

Line Type：

代码控制

类似Toggle
对于事件监听含有改变文本触发和文本结束触发，函数都需要包含一个string参数
监听方式都是public拖入或者直接代码控制

Slider滑动条控件

用于处理滑动条相关交互的组件

默认由四个对象组成
父对象：Slider组件依附的对象
子对象：背景图、进度图、滑动块

参数

与Button相同的参数不再赘述

代码控制

    void Start()
    {
        Slider s = this.GetComponent<Slider>();
        print(s.value);
        //监听事件两种方式
        //函数需要传入一个float参数
        //1.拖脚本

        //2.代码添加
        s.onValueChanged.AddListener ((v) =>
        {
            print("代码添加" + v);
        });
    }
    public void ChangeValue(float value)
    {
        print(value);
    }

ScrollBar滚动条

处理滚动条相关交互的关键组件

默认由两个对象组成
父对象：Scrollbar组件依附对象
子对象：滚动块对象

一般情况下不会单独使用滚动条
都是配合ScrollView滚动视图来使用

参数

相同参数不再赘述

代码控制

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

        //监听事件两种方式
        //1.拖脚本（public函数）

        //2.代码添加
        sb.onValueChanged.AddListener((v) =>
        {
            print("代码监听" + v);
        });
    }
    public void ChangeValue(float v)
    {
        print(v);
    }

ScrollView滚动视图

创建时是创建ScrollView，实际控制的脚本是Scroll Rect

Scroll Rect 是UGUI中用于处理滚动视图相关交互的组件

默认由四个对象组成
父对象：ScrollRect组件依附的对象 还有一个Image组件作为背景图片
子对象：Viewport控制滚动视图可视范围和内容显示、Scrollbar Horizontal水平滚动条、Scrollbar Vertical 垂直滚动条

参数

代码控制

    void Start()
    {
        ScrollRect sr = GetComponent<ScrollRect>();
        //改变内容的大小 根据该尺寸决定具体可以拖动多少
        // sr.content.sizeDelta = new Vector2(200, 200);
        sr.normalizedPosition = new Vector2 (0, 0.5f);

        //事件监听两种方式
        //1.拖脚本


        //2.代码添加
        sr.onValueChanged.AddListener((v) =>
        {
            print("代码控制" + v);
        });
    }

    public void ChangeValue(Vector2 v)
    {
        print(v);
    }

DropDown下拉列表

处理下拉列表相关交互的组件

默认由四个对象组成
父对象：DropDown组件依附的对象以及一个Image组件作为背景图
子对象：Label为当前选项描述、Arrow右侧小箭头、Template下拉列表选单（本质是ScrollView）

参数

代码控制

    void Start()
    {
        Dropdown dd = GetComponent<Dropdown>();
        print(dd.value);//索引值
        print(dd.options[dd.value].text);
        dd.options.Add(new Dropdown.OptionData("蒂蒂"));
        //事件监听两种方式

        //1.拖脚本

        //2.代码添加

        dd.onValueChanged.AddListener((index) =>
        {
            print("代码添加"+index);
        });
    }

    public void ChangeValue(int index)
    {
        print(index);
    }

图集制作

DrawCall

CPU准备好要渲染的数据交给GPU进行渲染
可以把DrawCall看成GPU进行渲染前的准备工作，会产生额外的开销，如果过多的话CPU会把大量时间花在提交DrawCall上从而会造成卡顿

降低DrawCall数量：

在UI层面上，  小图合成大图->多个小DrawCall变成一次大DrawCall

降低技巧

注意不同图集之间的层级关系

注意Label的层级关系

图集

打图集的目的就是减少DrawCall

创建图集（要先装2D sprite包）

打UI图集不建议勾选:

Allow Rotation 打图集时会自动旋转以节省空间

Tight Packing 非矩形包装，有空就能放图

此时Batches为4

 加了一张图Batches变为5，但若加同一张图则不会变

打包成图集后Batches变成3

此时加上蒂蒂（由于蒂蒂不在图集中故Batches为4）

此时层级如下

但是如果打乱渲染顺序：

此时dc为5，是由于渲染顺序改变（打断了批处理）
如果是顺序摆放均在图集中的图片dc则不会增加

代码加载

        SpriteAtlas sa = Resources.Load<SpriteAtlas>("粥");
        sa.GetSprite("年");