UGUI基础

一、UGUI概述

UGUI(Unity GUI)是Unity引擎中的用户界面系统，用于创建游戏和应用程序中的用户界面，它基于画布(Canvas)系统，通过组件和GameObject来排列、定位和样式化UI元素。

Unity社区的UGUI学习链接：https://developer.unity.cn/projects/637c68a3edbc2a001ba22eee

UGUI的主要特点包括：

• 基于组件:使用各种UI组件（如按钮、文本、图像等）来构建界面。
• 事件系统:处理用户输入事件，如点击、拖动等。
• 布局系统：支持自动布局和自适应布局，如水平布局、垂直布局和网格布局。
• 渲染优化：通过批量渲染和减少重绘次数来提高性能。

二、UGUI系统的原理及其组件

2.1 UGUI系统的运行原理

2.1.1 网格构建

• UGUI系统是基于3D网格来构建UI的，当Unity创建一个UI元素时，UGUI会首先为这个该元素构建方形网格。

• 每个UI元素都可以看作是一个3D模型，其网格上绑定了材质球，材质球存放了要显示的图片或纹理。

2.1.2 材质和网格合并

• 为了优化渲染性能，UGUI会将具有相同图片和着色器的材质球合并成一个，并将分散的网格合并成几个大型网格进行渲染。
• 合并规则通常是在同一个Canvas中，相同层级、具有相同材质球参数的元素会被合并，相同层级是指UI布局中覆盖的层级。

2.2 UGUI系统的组件

2.2.1 Canvas组件

• 功能：容纳所有UI元素的区域，是一直带有画布组件的游戏对象。
• 渲染模式：
  • Screen Space-Overlay: 将UI元素放置于场景之上渲染的屏幕上，常用在纯UI系统的区域内，其中组件中的Sort Order参数值越大，越靠前渲染。
  • Screen Space-Camera:UI元素由此摄像机渲染，摄像机设置会影响UI的外观。是实际项目中制作UI系统最常见的模式，不过UGUI系统底层针对排序有一些规定，如对元素的Z轴不为0的元素，会单独提取出来渲染，不参与合并。
  • World Space:用于UI物体放在3D世界中，如游戏中的3D界面、物体标记、和交互面板等。

2.2.2 Canvas Scaler组件

• 功能：用于在不同分辨率下保持UI控件大小的自适应。

• 适配模式（UI Scale Mode）：

  • Constant Pixel Size：无论屏幕大小如何，UI始终保持相同像素大小。
  • Scale With Screen Size：根据屏幕尺寸进行缩放，随之屏幕尺寸放大缩小。
  • Constant Physical Size：无论屏幕大小和分辨率如何，UI元素始终保持物理大小。

  在实际手游项目中，设备的屏幕分辨率变化比较大，通常以Scale With Screen Size来自动适配比例。

• Scale With Screen Size常用属性
  • Reference Resolution:设置参考分辨率，用于计算缩放比例。
  • Screen Match Mode:设置屏幕匹配模式，有Match Width Or Height(宽度或高度的匹配比例)，Expand(扩展)、Shrink(裁剪)
  • Match:是否以宽度、高度或者两者的平均值作为参考。
  • Reference Pixels Per Unit: Sprirt的每个像素将覆盖UI的一个单位。

2.2.3 Graphic Raycaster组件

• 功能：用于检测UI输入事件的射线发射器，主要负责通过射线检测玩家和UI元素的交互。

2.2.4 EventTrigger组件

• 功能：点击相应作用，配合前面的Graphic Raycaster进行响应。

2.2.5 Image和RawImage的区别

• 支持纹理类型：RawImage支持任何类型的Texture，Image主要支持Sprite类型的Texture。RawImage一般展示单张图片，不能采用图集获取小块图片，而Image则使用图集的性能会更高一点。
• 功能负责性：RawImage功能相对单一，一般只用来显示动态图像、视频帧、相机渲染等，Image功能丰富，提供了多种Image Type(如Simple、Sliced、Tiled、Filled)，可以实现图片的填充、拉伸、动画多种。

2.2.6 Mask组件

• 工作原理：
  1. 基于模板测试：Mask利用GPU的模板缓冲区域，它会将自身所在的GameObject的Image组件的轮廓写入模板缓冲区（重新一个材质球）。
  2. 子对象继承模板设置：所有的子UI元素在渲染时，会检查模板缓冲区域，如果子物体在模板值检测的区域才会被绘制，区域外的则被丢弃。
  3. 依赖Imag组件：Mask组件必须和Image组件绑定在同一个GameObject上才能工作，Image的alpha值决定了遮罩的形状。(alpha > 0才能有遮罩效果)
• 属性：
  • Show Mask Graphic: 是否显示Mask组件所在的GameObject上的Image图像上。
• 优点： 支持任意形状的图片来作为遮罩
• 缺点：
  • 性能开销大：每个使用Mask的Canvas都会导致一次Canvas的重新构建，并且会增加额外的绘制调用。如果场景有大量动态变化便会对性能产生明显的影响。

2.2.7 RectMask2D组件

RectMask2D是专门为矩形遮罩优化而生的组件。

• 工作原理：
  1. 基于剪裁矩形：不使用模板测试，而是直接使用自身的矩阵变换区域。
  2. 不依赖Image组件：RectMask2D不需要Image组件，其遮罩区域完全由GameObject的RectTransform来决定。
• 优点
  1. 性能极高：由于使用的是硬件裁剪，它的性能开销远低于Mask，它不会导致Canvas的重新构建。
  2. 支持任意层级子物体：只要子物体是遮罩矩阵区域的任意后代（ugui是按层级依次渲染的），都会被正确遮罩。
• 缺点： 只能支持矩阵遮罩。

2.2.8 ScollView组件

• 概念：一个复合组件，其核心功能是在一个固定的可视区域内，浏览一个更大的内容区域，当内容超过视口大小时，它会自动提供滚动条，需要用户来拖动显示。

  1. ScrollView(GameObject)： 根节点，包含主要组件。
  2. Viewport(GameObject)：定义可视区域的遮罩。
  3. Content(GameObject)：存放需要滚动内容的容器。

• Scroll Rect (滚动矩形)：Scroll View 的大脑**，控制着所有的滚动逻辑

  • 主要属性：
    1. Content (内容)：拖拽引用。这里必须引用到下面的 Content子对象。它告诉 ScrollRect哪个部分是需要滚动的。
    2. Viewport (视口)：拖拽引用。这里必须引用到下面的 Viewport子对象。它定义了内容的可视区域。如果留空，默认使用自身的 RectTransform作为视口。
    3. Horizontal / Vertical (水平/垂直滚动)：复选框，决定允许朝哪个方向滚动。
    4. Movement Type (移动类型)：滚动到边界时的行为。
       • Unrestricted：无限制，内容可以被完全拖出视口。
       • Elastic：弹性（最常用）。当滚动到边界时，会有一种弹回的效果。
       • Clamped：硬限制，滚动到边界时立即停止，无弹性效果。
    5. Inertia (惯性)：是否开启惯性效果。开启后，用户快速拖动后松开，内容会继续滚动一段距离并减速停止。
    6. Scroll Sensitivity (滚动灵敏度)：鼠标滚轮或触控板滚动的灵敏度。

• Canvas Renderer：所有 UI 元素都必须有的渲染器。

• Viewport (视口)：这个 GameObject 的核心作用是遮罩。

• Content (内容)：放置所有可滚动内容的地方，比如一列按钮、一堆图片、文本等。

  1. Content Size Fitter (可选但重要)：可以根据子物体的布局自动调整 Content矩形的大小。例如：在一个垂直滚动的列表中，可以将 Content的 Vertical Fit设置为 Preferred Size。这样 Content的高度就会自动变为所有子物体加上间距后的总高度，从而确保滚动范围是正确的。
  2. 布局组件 (Layout Group)通常你会为 Content添加一个 Vertical Layout Group或 Horizontal Layout Group或 Grid Layout Group。这些组件会自动排列其子物体，与 Content Size Fitter配合使用。