Skip to content

UGUI

UnityUI,是Unity引擎自带的UI系统,只能用于游戏开发的GUI,不能用于编辑器的UI。

创建UGUI组件

在Hierarchy窗口右键,选择UI即可创建UGUI组件。

注意事项

  1. 在进行UI编辑的时候,注意开启以下选项:

image-20251224155725653

  1. 在UGUI中如果想要使用图片,需要首先选中图片,将类型修改为"Sprite(2D and UI)"并应用。

image-20260124212957353

UGUI组件

UGUI共有六个基础组件,分别依附在CanvasEventSystem对象上。

其中,以下组件依附于Canvas:

  • Canvas:画布组件,主要用于渲染UI控件;
  • Canvas Scaler:画布分辨率自适应组件,主要用于分辨率自适应。
  • Graphic Raycaster:主要用于控制射线检测和相应相关。
  • RectTransform:UI对象位置锚点控制组件,主要用于控制位置和对齐方式。

以下组件依附于EventSystem,是输入事件相应系统和独立输入模块,主要用于监听输入操作:

  • Event System
  • Standalone Input Module

Canvas

意为画布,负责渲染所有UI子对象。只有被设置为Canvas的子对象,UI控件才能被渲染。 Unity允许场景中存在多个Canvas对象,每个Canvas对象各自挂载Canvas组件,通过修改参数控制较为复杂的效果。 Canvas组件提供RenderMode控制整个Canvas的渲染模式,共有三个选项。

Screen Space-Overlay

屏幕空间,覆盖模式,UI始终位于最前面。该模式有以下参数:

  • Pixel Perfect:是否开启无锯齿精确渲染。

    该选项实质为性能换效果,在实际应用中大多不需要开启。

  • Sort Order:排序层。 当场景中存在多个Canvas对象时,SortOrder决定Canvas的渲染顺序,越大越后渲染。

  • Target Display:渲染的输出设备(屏幕)。

  • Additional ShaderChannels:其他着色器通道,决定着色器读取的内容。

Screen Space-Camera

屏幕空间,摄像机模式,3D物体可以显示在UI前。该模式有以下参数:

  • Pixel Perfect:是否开启无锯齿精确渲染。

该选项实质为性能换效果,在实际应用中大多不需要开启。

  • Render Camera:渲染摄像机,决定渲染该Canvas及其子对象的渲染摄像机。

通常不会设置为主摄像机,而是单独使用一个只显示UI层的DepthOnly摄像机进行UI渲染。如果不设置,其渲染效果和覆盖模式类似。

  • Plane Distance:UI平面在摄像机前方的距离。

  • Sorting Layer:所在的排序层。

当存在多个Canvas对象时,排序层越靠后越后渲染。

排序层:

image-20251225204548620

  • Order Layer:当存在位于同一SortingLayer的多个Canvas时,值越小越先渲染。

World Space

世界空间,3D模式,将UI控件视为3d物体进行处理。该模式有以下参数:

  • Event Camera:关联的摄像机,用于处理点击事件,通常设置为主摄像机。如果置空,将无法正常接收和处理点击事件。

  • Sorting Layer:所在的排序层。 当存在多个Canvas对象时,排序层越靠后越后渲染。

  • Order Layer:当存在位于同一SortingLayer的多个Canvas时,值越小越先渲染。

Canvas Scaler

画布缩放控制器,用于分辨率自适应,主要提供了三种用于分辨率自适应的模式和对应的属性。

注意:缩放已经由该控件统一管理,通常不需要再额外乱改子控件的Scale

Constant Pixel Size

恒定像素模式,无论屏幕大小如何,UI控件始终保持相同的像素大小。该模式有以下参数:

  • Scaler Factor:缩放因子。根据缩放系数计算Canvas下的所有控件的大小。

  • Reference Pixels Per Unit:单位参考像素,Unity中一个单位单位长度对应的像素数量。默认值为100。 该值也会参与UI大小的计算。

恒定像素模式下,计算遵守以下公式: $$ UI原始尺寸=图片原始大小(像素)/(Pixels Per Unit/Reference Pixels Per Unit) $$ 其中Pixels Per Unit表示将图片转换为Unity中的对象时,每个单位对应的像素数量,由图片提供:

image-20260124214411459

UI原始尺寸则指Image对象的Rect Transform组件在Set Native Size(设置为原始尺寸)后计算出的WidthHeight

image-20260124215230602

Scale With Screen Size

缩放模式,根据屏幕尺寸进行缩放,是实践中最常用的模式。该模式有以下属性:

  • Reference Resolution:参考分辨率,缩放模式下的所有匹配模式都会基于参考分辨率进行自适应计算。 其有$X$和$Y$两个值,填写时按照主要面向设备的主流分辨率进行填写,如1080*1920。
  • Screen Match Mode:屏幕匹配模式,当当前屏幕分辨率宽高比不适应参考分辨率时的分辨率大小的自适应模式。

屏幕匹配模式提供了以下三个选项:

  1. Expand 拓展匹配:将Canvas的宽或高扩大,令Canvas保持能够在屏幕上完全显示。

  2. Shrink 裁剪匹配:将Canvas的宽或高扩大,令Canvas填满整个屏幕,可能会有溢出。

  3. Match Width Or Height 匹配宽度或高度:提供一个值为 $0-1$ 的Match滑动条,其中:

  4. 值取$0$时,完全以宽度为基准进行缩放,无论屏幕多高,UI元素的水平布局比例保持不变;

  5. 值取$0.5$时,同时考虑宽和高,取中间值;
  6. 值取$1$时,完全以高度为基准内进行缩放。

大多数横屏游戏通常设为$1$或$0.5$,竖屏游戏则取$0$。

Constant Physical Size

恒定物理模式,无论屏幕大小和分辨率如何,ui元素始终保持相同的物理大小,通常极少使用。该模式有以下属性:

  • Physical Unit:物理单位,使用的物理单位像素。
  • Fallback Screen DPI:备用DPI,当找不到设备DPI时,使用此值
  • Default Sprite DPI:默认图片DPI,导出图像素材时使用的DPI。

World

该模式仅在Render ModeWorld Space时使用,且无法更改。

  • Dynamic Pixrls Per Unit:UI中动态创建的位图(如文本)中,单位像素数