UGUI学习笔记（一）Canvas

最新推荐文章于 2024-07-30 18:29:33 发布

夜槿笙歌

最新推荐文章于 2024-07-30 18:29:33 发布

阅读量610

点赞数

分类专栏： # UGUI 文章标签： ui unity

本文链接：https://blog.csdn.net/LWR_Shadow/article/details/126631012

版权

UGUI 专栏收录该内容

16 篇文章 12 订阅

订阅专栏

一、Canvas

画布（Canvas）是容纳所有UI元素的区域。当我们创建UI元素时如果场景中没有Canvas，Unity会自动创建一个，并将UI元素作为Canvas的子项。

二、Canvas组件

Canvas上一个最重要的组件就是Canvas组件，所有UI元素都必须是添加了Canvas组件的游戏物体的子对象。它主要设置了UI的渲染模式，包括：Screen Space - Overlay、Screen Space - Camera 和 World Space。

首先看「Screen Space - Overlay」模式
在此模式下，Canvas会进行缩放来适应屏幕。

即便场景中没有相机，也会渲染UI。
如果更改屏幕的大小或分辨率，则UI将自动重新缩放来进行适应。
需要注意，官方文档中强调Screen Space - Overlay模式下的Canvas必须处于Hierarchy中的最顶层，否则可能出现UI消失的问题

再来看「Screen Space - Camera」模式
在此模式下，画布的渲染效果就像在摄像机前一定距离的平面上进行绘制。

UI始终准确适应摄像机的视锥体，因而UI在屏幕上的大小不会随摄像机的距离而改变。
如果更改屏幕的大小或分辨率，则UI将自动重新缩放来进行适应。
在场景中比UI平面更靠近摄像机的3D物体会在UI前面渲染。

接下来是「World Space」模式
在这个模式下，画布等同于场景中的3D物体。可以自定义其大小、旋转等属性。

三、Canvas Scaler组件

这个组件主要用来控制画布中 UI 元素的整体缩放和像素密度。此缩放会影响画布下的所有内容，包括字体大小和图像边框。

首先是「UI Scale Mode」属性，它用来确定画布中的UI元素缩放方式，包含如下选项：

Constant Pixel Size：无论屏幕大小如何，UI 元素都保持相同的像素大小。
Scale With Screen Size：屏幕越大，UI 元素越大。
Constant Physical Size：无论屏幕大小和分辨率如何，UI 元素都保持相同的物理大小。

Constant Pixel Size

当「UI Scale Mode」处于「Constant Pixel Size」选项时，可在屏幕上按像素指定 UI 元素的位置和大小。这也是画布在未附加任何「Canvas Scaler」时的默认功能。但是，借助「Canvas Scaler」中的「Scale Factor」设置，可以向画布中的所有 UI 元素应用常量缩放。
在该模式下有如下设置项：

Scale Factor：按此系数缩放画布中的所有 UI 元素。
Reference Pixels Per Unit：如果精灵具有此「Pixels Per Unit」设置，则精灵中的每个像素将覆盖 UI 中的一个单位。

当我们的UI在「1920×1080」分辨率下显示正常，切换到「2560×1440」分辨率下就可能出现显示过小的问题。这种情况下，「Scale Factor」就派上了用场。通过动态设置该属性，可以实现UI大小随分辨率的自适应

void Start()  
{  
    var scaler = Screen.width / 1920f;  
    GetComponent<CanvasScaler>().scaleFactor = scaler;  
}

在图片导入设置中有「Pixels Per Unit」这个参数，它设置了这张图片在Unity中每个Unity单位显示多少个像素。比如我有一个「600×600」的图片，当我将「Pixels Per Unit」设置为1，则代表图片的一个像素对应Unity中的一个单位。此时将Canvas的「Reference Pixels Per Unit」属性也设置为1，则将图片设置为原始大小时，它的宽高就是「600×600」

将图片的「Pixels Per Unit」设置为10，则代表图片的十个像素对应Unity中的一个单位。此时将图片设置为原始大小，它的宽高就是「60×60」

将Canvas的「Reference Pixels Per Unit」也设置为10，则代表图片每个像素覆盖UI中的十个单位。此时将图片设置为原始大小，其宽高就会变回「600×600」

Scale With Screen Size

当「UI Scale Mode」处于「Scale With Screen Size」选项时，可以根据指定参考分辨率的像素来指定位置和大小。如果当前屏幕分辨率大于参考分辨率，则画布会保持只具有参考分辨率的分辨率，但是会放大以便适应屏幕。如果当前屏幕分辨率小于参考分辨率，则画布会相应缩小以适应屏幕。
如果当前屏幕分辨率的宽高比与参考分辨率不同，则单独缩放每个轴以适应屏幕会形成非一致缩放，通常不希望发生这种情况。通过「Reference Resolution」属性会使画布分辨率偏离参考分辨率，以便遵循屏幕的宽高比。可以使用「Screen Match Mode」设置控制此偏离的行为方式。
在该模式下有如下设置项：

Reference Resolution：UI 布局设计的目标分辨率。如果屏幕分辨率较大，则 UI 会放大，如果较小，则 UI 会缩小。
Screen Match Mode：在当前分辨率的宽高比不适应参考分辨率时，用于缩放画布区域的模式。有「Match Width or Height」参考宽高权重进行缩放、「Expand」水平或垂直扩展画布、「Shrink」水平或垂直裁剪画布
Match：宽高对于缩放的权重

当设定好目标分辨率之后，当实际分辨率与目标分辨率不符时，就会根据「Screen Match Mode」自动调整UI元素的宽高。当设定的权重偏向于Width时，UI元素的调整就会倾向于不改变Width只改变Height；当设定的权重偏向于Height时，UI元素的调整就会倾向于不改变Height只改变Width

Constant Physical Size

当「UI Scale Mode」处于「Constant Physical Size」选项时，可按物理单位（如毫米、点或派卡）指定 UI 元素的位置和大小。此模式要求设备正确报告其屏幕 DPI。对于不报告 DPI 的设备，可以指定回退 DPI。
在该模式下有如下设置项：

Physical Unit：用于指定位置和大小的物理单位。
Fallback Screen DPI：在屏幕 DPI 未知时采用的 DPI。
Default Sprite DPI：用于精灵的每英寸像素，使其「Pixels Per Unit」设置与「Reference Pixels Per Unit」设置匹配。
Reference Pixels Per Unit：如果精灵具有「Pixels Per Unit」设置，则其 DPI 将与「Default Sprite DPI」设置匹配。

因为这个模式较少使用，所以这里不再详述。

四、Canvas Group组件

这个组件主要用来统一控制UI元素中的一些共有的属性，比如透明度、是否禁用等。
它有如下设置项：

Alpha：此组中的 UI 元素的不透明度。该值介于 0 和 1 之间，其中 0 表示完全透明，1 表示完全不透明。请注意，UI 元素也会保留自己的透明度，因此画布组的 Alpha 值将与各个元素的 Alpha 值彼此相乘。
Interactable：确定此组件是否接受输入。当设置为 false 时，禁用交互。
Block Raycasts：是否接收射线事件输入
Ignore Parent Groups：是否受到更上层Canvas Group组件影响。