一般而言画布有三种渲染模式

一:画布渲染

1.Screen Space - Overlay即叠加模式

这种模式下画布自动填充屏幕,默认在画面最前方遮盖其他画面,为通常选用模式

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_unity设置画布大小并显示在摄像机中

 

2. Screen Space - Camera摄像机模式

同样画布自动填充整个屏幕,但是可以通过调整物体在摄像机前的位置调整是否遮盖画布

但是要采用这个模式需要在选用之后在渲染相机中选择需要的相机

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_缩放_02

3.World Space 世界坐标模式

大小根据设置的rect,在相机中与其他的物体没有其他区别,画布根据其世界位置显示

 效果如下

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_父类_03

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_UI_04

 注意:

1和2两个模式下画布的最大大小和游戏界面中的适配有关,即下图二的位置

 

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_UI_05

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_unity设置画布大小并显示在摄像机中_06

 

 二:屏幕像素

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_unity设置画布大小并显示在摄像机中_07

 

1.Constant Pixel Size

恒定像素大小

无论屏幕大小如何,都使 UI 元素保持相同的像素大小

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

Reference Pixels Per Unit 每单位参考像素:Unity中一个单位对应的像素数

 但是这个模式有一个问题就是:

我们在不同设备上适配的时候固定的像素会导致适配有问题

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_父类_08

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_父类_09

2.Scale With Screen Size

随屏幕尺寸缩放

 所以一般而言我们用的是这个模式

 屏幕越大,UI 元素越大,UI 随着屏幕尺寸而进行缩放

 

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_unity_10

 

Reference Resolution 参考分辨率: 布局设计的分辨率。如果屏幕分辨率较大,则 UI 将按比例放大,如果屏幕分辨率较小,则 UI 将按比例缩小。

Screen Match Mode 屏幕匹配模式Match Width or Height: 使用宽度、高度作为参考,或介于两者之间的值来缩放画布区域.

Expand:水平或垂直扩展画布区域,因此画布的大小永远不会小于参考值.

Shrink:水平或垂直裁剪画布区域,因此画布的大小永远不会大于参考值。

Match :确定缩放是使用宽度或高度作为参考,还是使用两者的混合。

Reference Pixels Per Unit:每Unity单位参考像素

3.Constant Physical Size 恒定物理尺寸

没用过的模式

即无论屏幕大小和分辨率如何,都使 UI 元素保持相同的物理大小(屏幕上的实际物理尺寸)。

三:Canvas Group

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_unity_11

一般用作统一控制组件下的子类对象

只有四个属性

Alpha:透明度

Interactable:是否可交互,当否时拒绝输入

Blocks Raycasts:阻挡射线:是否能被 Graphic Raycaster 射出的射线所碰撞(选中状态为响应碰撞)。注意,这个不适用于Physics.Raycast,即物理射线无法和UI元素互动。,鼠标点击也不在响应

 Ignore Parent Group:忽略父类的该组件

即我们在父类对象上加上阻挡射线

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_缩放_12

子类panel:

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_UI_13

按钮依旧可以被点击

四:Render Order渲染顺序

在UGUI中,渲染顺序是按照Hierarchy 中的顺序渲染的

即后面的遮盖前面的

子类遮盖父类

这里可以参考前面内容的血条制作用mask遮盖血条达到血条减少的效果

或者说我们可以使用sorting layer来控制渲染顺序

例如示例,我们较靠后的按钮会遮盖前面的按钮,靠后的按钮会遮盖前面的字体

unity设置画布大小并显示在摄像机中 unity怎么调整画布大小_UI_14