Unity - UGUI

发布时间 2023-09-13 21:18:29作者: Cloudz3

UI系统

1 UGUI是什么

它是基于Unity游戏对象的UI系统,只能用来做游戏UI功能,不能用于开发Unity编辑器中内置的用户界面。

2 UGUI六大基础组件

Canvas对象上依附的:

  • Canvas:画布组件,主要用于渲染UI控件。
  • Canvas Scaler:画布分辨率自适应组件,主要用于分辨率自适应。
  • Graphic Raycaster:射线事件交互组件,主要用于控制射线响应有关。
  • RectTransform:UI对象位置锚点控制组件,主要用于控制位置和对其方式。

EventSystem对象上依附的:

玩家输入事件响应系统和独立输入模块组件,主要用于监听玩家操作。

  • EventSystem
  • Standalone Input Module

3 Canvas

Canvas的意思是画布,它是UGUI中所有UI元素能够被显示的根本,它主要负责渲染自己的所有UI子对象。如果UI控件对象不是Canvas的子对象,那么控件将不能被渲染。

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

3.1 Canvas组件的3种渲染方式

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

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

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

3.1.1 Screen Space - Overlay

Screen Space - Overlay

Pixel Perfect:是否开启无锯齿精确渲染(性能换效果)

SortOrder:排序层编号(用于控制多个Canvas时的渲染先后顺序),数字越小越先渲染

TargetDisplay:目标设备(在哪个显示设备上显示)【想一下任天堂的掌机】

Additional Shader Channels:其他着色器通道,决定着着色器可以读取哪些数据

3.1.2 Screen Space - Camera

Screen Space - Camera

Screen Space - Camera - Camera

RenderCamera:用于渲染UI的摄像机(如果不设置将类似于覆盖模式)

Plane Distance:UI平面在摄像机前方的距离,类似整体Z轴的感觉

Sorting Layer:所在排序层

Order in Layer:排序层的序号

基本上是不会将RenderCamera设置成场景中的Main Camera的,通常的做法,是在场景中再创建一个Camera,然后将其作为RenderCamera的值,为确保场景中的3D物体均出现在UI后面,此时要对Main Camera和Camera的Depth属性做设置,Main Camera的Depth设为-1,要求先渲染,再将Camera的Depth设为0,要求后渲染。此外,还要设置Main Camera和Camera的Culling Mask属性。

Culling Mask:"Culling Mask"(剔除蒙版)属性用于确定相机在渲染场景时哪些图层(Layers)的对象应该被渲染,哪些应该被忽略。这个属性控制了相机的视锥体内可见的物体。

因为我们新增了一个Camera用于专门渲染UI,所以只需将Camera的Culling Mask设置为UI,并将Main Camera的Culling Mask的UI勾选去除,要做到分工明确。此外,考虑到有多个摄像机来绘制不同的游戏元素,我们其实希望UI始终位于3D场景、3D物体之前,所以还需要设置一下的Camera的Clear Flags属性,将其设置为Depth only。

Clear Flags:Determines which parts of the screen will be cleared. This is handy when using multiple Cameras to draw different game elements. "Clear Flags"(清除标志)属性用于控制相机在渲染新一帧之前如何清除屏幕上的内容。这个属性决定了相机在渲染时是否清除背景,并且如果需要清除,清除的方式是什么。

Unity官方文档,关于将Clear Flags属性设置为Depth only给了一个具体的应用场景,符合我们这里的需求。如果你想在不让玩家的枪支被环境剪裁的情况下绘制它,可以设置一个深度为0的相机来绘制环境,另一个深度为1的相机来单独绘制武器。将武器相机的"Clear Flags"设置为"仅深度"。这将保留环境的图形显示在屏幕上,但会丢弃关于每个物体在三维空间中的位置的所有信息。当绘制枪支时,不透明部分将完全覆盖任何绘制的东西,无论枪支离墙有多近。

Sorting Layer和Order in Layer主要用于确定多个Canvas间渲染的先后关系。

判定渲染的先后关系时,先依据所在的Layer来判断,Layer越靠前越先渲染,如果两个canvas处于同一个Layer,则再看Order in Layer,Order in Layer的值越小越先渲染。

如果确实需要3D模型在UI前显示,则可以将3D物体作为UI Image的子元素进行创建,主要调整下缩放。

3.1.3 World Space

World Space

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

Event Camera:用于处理UI事件的摄像机(如果不设置,不能正常注册UI事件),关联场景中的Main Camera即可,因为往往使用这种世界模式的时候,就希望用主摄像机和其他3D物体来进行交互。

4 CanvasScaler

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

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

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

4.1 背景知识

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

屏幕分辨率

画布大小和缩放系数:选中Canvas对象后在RectTransform组件中看到的宽高和缩放,宽高 \(\times\) 缩放系数 \(=\) 屏幕分辨率

画布大小和缩放系数

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

RPPU

汇总:

  • 屏幕分辨率——当前设备的分辨率,编辑器下Game窗口中可以查看到
  • 参考分辨率——在其中一种适配模式中出现的关键参数,参与分辨率自适应的计算
  • 画布宽高和缩放系数——分辨率自适应会改变的参数,通过屏幕分辨率和参考分辨率计算而来
  • 分辨率大小自适应——通过一定的算法以屏幕分辨率和参考分辨率参与计算得出缩放系数,该结果会影响所有UI控件的缩放大小
4.2 CanvasScaler的三种适配模式
  • Constant Pixel Size(恒定像素模式):无论屏幕大小如何,UI始终保持相同像素大小
  • Scale With Screen Size(缩放模式):根据屏幕尺寸进行缩放,随着屏幕尺寸放大缩小
  • Constant Physical Size(恒定物理模式):无论屏幕大小和分辨率如何,UI元素始终保持相同物理大小
4.2.1 Constant Pixel Size

Constant Pixel Size

Scale Factor:缩放系数,按此系数缩放画布中的所有UI元素。

Reference Pixels Per Unit:单位参考像素,多少像素对应Unity中的一个单位(默认一个单位为100像素),图片设置中的Pixels Per Unit设置,会和该参数一起参与计算。

恒定像素模式计算公式:UI原始尺寸\(=\)图片大小(像素)\(/\) (Pixels Per Unit \(/\) Reference Pixels Per Unit)

个人感觉唐老狮这一块还是有点讲的云里雾里,我在这里继续补充一个别人写的博客来帮助理解。PPU & RPPU讲解

世界坐标系中对PPU的理解:在世界坐标系中使用PPU,PPU指的就是1个单位能放下多少个图片像素。如果PPU设置为100,那么假设你导入一个\(500\times 200\)的图片,那么导入后,按照默认的100PPU来算,实际在世界坐标系中的unity单位尺寸就是\(5\times2\)个单位。如果你不希望通过缩放来调整图片显示的尺寸,就可以用PPU来做。

对于RPPU而言,我们看上面的恒定像素模式计算公式也可以知道,在不改变RPPU的情况下,导入图片后默认PPU是100的情况下,UI大小是等于原图的,如果你将PPU改的越小,那么UI大小就会成倍变大,比如PPU改为25,那么原图就会在UI中放大4倍。

总结:恒定像素模式,它不会让UI控件进行分辨率大小自适应,会让UI控件始终保持设置的尺寸大小显示。

未完待续...