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 Image和RawImage的区别

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

2.2.5 Mask组件

Mask组件通过修改模板缓冲区（Stencil Buffer）来实现遮罩效果。具体来说，Mask会赋予Image一个特殊的材质（GetModifierMaterial），这个材质会对Image的每个像素点进行标记，并将标记结果存放在模板缓冲区中。当子级UI进行渲染时，会检查模板缓冲区内的标记，如果当前覆盖的区域存在标记（即该区域在Image的覆盖范围内），则进行渲染；否则，不渲染。