Unity笔记—10（Unity常用插件整理之UGUI）

Unity笔记—10（Unity常用插件整理之UGUI）

---

---

前言

自学笔记，没有历史知识铺垫（省略百度部分），系列性的记录核心的实用笔记，本章主要记录Unity中自带的UI插件体系UGUI

---

Unity版本（Unity Hub管理）：2020.1.14f1c1
IDE工具（Unity Hub管理）：Visual Studio 2019

Unity3d知识体系思维导图
Unity—UGUI入门基础
Unity 3D图形用户界面

---

一、UGUI体系图

UGUI官方内置版本1.0

二、UGUI常用控件

1.通过编辑器在Canvas外创建UI控件时,都会自动创建一个父级Canvas,UI控件通常是Canvas的子物体
2.如果没有EventSystem还会自动创建一个EventSystem(UI事件系统)的GameObject,用于控制UI控件
3.每一个UI控件都有两个固定组件 Rect Transform (位置变形组件)和Canvas Renderer(画布渲染)

常用的UGUI控件列表

1. Canvas: – 画布,其他UI组件需要在Canvas中绘制
2. Text: – 文字
3. Image: – Sprite格式的图片
4. RawImage: – Texture格式的图片
5. Button: – 按钮
6. Toggle: – 开关按钮
7. Slider: – 滑动控制条
8. Scrollbar: – 滚动条
9. Dropdown: – 下拉菜单
10. InputField: – 输入框
11. Scroll View: – 滚动视图

Canvas(画布)

创建UI其他控件时,如果没有父Canvans,则会自动创建一个父级的Canvas

Unity界面操作

Rect Transform组件

用于布局操作

Canvas组件

Render Mode属性有三种渲染模式

1. ScreenSpace- Overlay: 此模式会将UI渲染到屏幕上,如果屏幕大小或分辨率发生变化,UI将会自动适配,该模式下不需要UI相机,UI将自动展现在所有相机的最前方

   Pixel Perfect: 重置元素大小和坐标，使贴图的像素完美对应到屏幕像素上
   Sort Order:UI排序
   Additional Shader Channels:其他着色器通道(正常用不到,默认即可)
   

2. Screen Space-Camera: 类似ScreenSpace- Overlay模式的自动适配,区别是指定一个相机并设置相机和UI的距离,之间可以被其他物体遮挡

   Pixel Perfect: 重置元素大小和坐标，使贴图的像素完美对应到屏幕像素上
   Render Camera: 对象UI 的指定相机
   Plane Distance: UI和相机的距离,越大越远
   Sorting Layer:选择界面所在图层,越下方的图层越靠前
   Order Layer: 界面排序,越大越靠前
   Additional Shader Channels:其他着色器通道(正常用不到,默认即可)
   

3. World Space:此模式会将UI像Plane一样展示在场景中,大小取决于与相机的角度和距离(将UI改为3D对象一样的效果)

   Event Camera:展示UI的相机
   Sorting Layer:选择界面所在图层,越下方的图层越靠前
   Order Layer: 界面排序,越大越靠前
   Additional Shader Channels:其他着色器通道(正常用不到,默认即可)
   

Canvas Scaler组件

UI Scale Mode属性为UI缩放模式

1. Constant Pixel Size:根据像素大小计算UI尺寸和位置,屏幕大小改变UI本身不会改变

   Scale Factor:UI的缩放系数
   Reference Pixels Per Unit:每个UI单位的像素点
   Reference Pixels Per Unit详情见UGUI（二）- Canvas Scaler

2. Scale With Screen Size:根据屏幕尺寸缩放UI大小

   Reference Resolution：设置为屏幕尺寸
   Screen Match Mode: 屏幕匹配模式:根据宽度或高度适配(通过Match左右控制)/缩放不裁剪/缩放裁剪
   Reference Pixels Per Unit:每个UI单位的像素点

3. Constant Physical Size: 保持物理大小(使用场景较小)
   UI Scale Mode可参考该链接底部

Graphic Raycaster组件

Graphic Raycaster：图形光线投射器,只有UI的元素才继承了Graphic基类，才能响应图片射线。
Ignore Reversed Graphic: 图片反转后点击无效
Blocking Objects:阻挡点击物体(当UI前面有物体时，点击前面的物体射线是否阻挡)
Blocking Mask：阻挡层级

代码层操作

官方文档Demo

using System.Collections;
using System.Collections.Generic;
using UnityEditor;
using UnityEngine;
using UnityEngine.UI;

// Create a Canvas that holds a Text GameObject.

public class ExampleClass : MonoBehaviour
{
    void Start()
    {
        GameObject myGO;
        GameObject myText;
        Canvas myCanvas;
        Text text;
        RectTransform rectTransform;

        // Canvas
        myGO = new GameObject();
        myGO.name = "TestCanvas";
        myGO.AddComponent<Canvas>();

        myCanvas = myGO.GetComponent<Canvas>();
        myCanvas.renderMode = RenderMode.ScreenSpaceOverlay;
        myGO.AddComponent<CanvasScaler>();
        myGO.AddComponent<GraphicRaycaster>();

        // Text
        myText = new GameObject();
        myText.transform.parent = myGO.transform;
        myText.name = "wibble";

        text = myText.AddComponent<Text>();
        text.font = (Font)Resources.Load("MyFont");
        text.text = "wobble";
        text.fontSize = 100;

        // Text position
        rectTransform = text.GetComponent<RectTransform>();
        rectTransform.localPosition = new Vector3(0, 0, 0);
        rectTransform.sizeDelta = new Vector2(400, 200);
    }
}

成员属性

1. additionalShaderChannels:获取或设置在创建Canvas网格时要使用的其他着色器通道的蒙版。
2. cachedSortingLayerValue:基于SortingLayerID的缓存计算值。
3. isRootCanvas:是否为根画布
4. normalizedSortingGridSize:画布将分割可渲染区域的规格化栅格大小。
5. overridePixelPerfect:画布将可渲染区域划分为的标准化网格大小。

   在渲染期间，画布将可渲染区域（所有UI元素的边界）划分为网格。这是该网格的标准化大小。
   例如，如果您的可渲染区域为100个单位，而sortingGridNormalizedSize为0.1f，则每个网格单元将为10个单位。
   注意：值0将默认为0.1f。

6. overrideSorting:允许嵌套画布覆盖从父画布继承的pixelPerfect设置。
7. pixelPerfect:强制画布中的元素与像素对齐。仅适用于renderMode中的两个屏幕空间模式。

   启用pixelPerfect可以使元素显得更清晰并防止模糊。但是，如果许多元素被缩放或旋转，或者使用细微的动画位置或缩放，则禁用pixelPerfect可能是有利的，因为如果不这样做，则移动将更加平滑。

8. pixelRect:获取Canvas的渲染矩形。

   如果处于重叠模式，则将为屏幕尺寸。如果在世界模式下，这将是相机屏幕视口。

9. planeDistance:画面与相机的距离
10. referencePixelsPerUnit:每单位的像素数被认为是默认值。

    子画面具有一个单位像素，可控制子画面的像素密度。对于具有与“画布”中的“参考单位像素”相同的“单位像素”的子图形，像素密度将为一对一。

11. renderMode:渲染模式(RenderMode.ScreenSpaceOverlay/RenderMode.ScreenSpaceCamera/ RenderMode.WorldSpace)
12. renderOrder:将画布发射到场景的渲染顺序。（只读）

    注意：目前，仅按Screen Space - Overlay以下顺序正确地订购画布，Screen Space - Camera并且World Space根据与相机的距离对其进行发射和分类。

13. rootCanvas:返回最接近根的画布,如果找不到则返回自己本身
14. scaleFactor:画布缩放因子
15. sortingLayerID: 该画布的唯一ID
16. sortingLayerName: 当前画布所在的图层名
17. sortingOrder:当前画布所在的图层中的顺序
18. targetDisplay:对于“覆盖(Overlay )”模式，显示在其上"显示UI画布"的索引。

    此设置使Canvas渲染到指定的显示中。支持的辅助显示器（例如监视器(monitors)）的最大数量为8。

19. worldCamera:返回Screen Space - Camera模式或 World Space模式的相机

静态方法

1. ForceUpdateCanvases:强制所有画布更新其内容。
2. GetDefaultCanvasMaterial:返回可用于在Canvas上渲染普通元素的默认材质。
3. GetETC1SupportedCanvasMaterial:获取或生成 ETC1 Material

   必须在“Always Included Shader”列表中指定的UI/DefaultETC1 Shader使用

事件

willRenderCanvases:在画布渲染前调用的事件:可以将画布元素的一些操作延迟到渲染前进行

继承于Behaviour

方法见Behaviour常规方法

Text

文字控件

Rect Transform组件

用于布局操作

Canvasd Renderer

【UGUI】利用CanvasRenderer.cull来实现低消耗界面显隐

Text

Text属性:文本显示的内容
Font:设置字体
Font Style:设置字体样式
Font Size:设置字体大小
Line Spacing:设置行间距（多行）
Rich Text:设置富文本,可以同一个文本框中实现不同字体颜色和大小等
Alignment:设置文本在 Text 框中的水平以及垂直方向上的对齐方式
Align By Geometry: 按几何图形对齐,而不是字形指标。
Horizontal Overflow:设置水平方向上溢出时的处理方式。分两种：Wrap(隐藏）；Cverflow(溢出）
Vertical Overflow:设置垂直方向上溢出时的处理方式。分两种：Truncate(截断）；Overflow(溢出）
Best Fit:设置当文字多时自动缩小以适应文本框的大小
Color:设置字体颜色
Raycast Target: 接受射线(不需要时记得关闭,否则仍会工作且消耗性能)
maskable: 遮罩

Image/RawImage/Button/Toggle/ Slider/Scrollbar/Dropdown/InputField/Scroll View

详情使用见Unity—UGUI入门基础

三、UGUI EventSystem事件系统

Unity事件系统EventSystem简析

---

总结

本章主要记录Unity中自带的UI插件体系UGUI