屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解

时间:2024-03-15 08:45:15

利用Canvas、Canvas Scaler、Graphic Raycaster组件完成屏幕自适应:

刚做完一款小游戏,屏幕适配时,涉及安卓机各种屏幕比例、ipad、iPhoneX等较多尺寸型号的屏幕,开始出了一些问题,后来对Canvas的几个组件仔细研究了一番,利用Canvas Scaler完美解决了适配问题。

屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解


一、 首先是Canvas组件:

Render Mode即渲染模式有三种

屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解

1. Screen Space-Overlay模式:

Canvas将置于屏幕最上层,自动填充屏幕,不会被其他模式的Canvas或2D/3D物体遮挡。

1.1 Pixel Pefect:完美像素,边缘更加清晰。

1.2 Sort Order:渲染顺序,多个Canvas时可以调整其显示顺序

1.3 Target Display:目标显示器,Unity多开时选择显示器用

2. Screen Space-Camera模式:

Canvas将置于相机前方,此时在Canvas和相机中间的2D/3D物体将显示在UI上面,利用这一点,可以实现在UI界面展示3D模型,UI界面显示粒子特效等功能,非常实用~

2.1 Pixel Pefect:同上。

2.2 Render Camera:对应的渲染相机,也就是该Canvas显示在哪个Camera前面,不同的Camera渲染顺序可能不同。

2.3 Plane Distance:Canvas与Camera的距离。

2.4 Sorting Layer:渲染层级,影响渲染顺序。

2.5 Order in Layer:同一渲染层级下的渲染顺序。

3. World Space模式:

Canvas将作为一个游戏对象显示在3D场景内,可以通过修改Rect Transform的相关属性来调整显示。

3.1 Event Camera:接收UI事件的Camera,Click、Drag等事件。

3.2 Sorting Layer:同上。

3.3 Order in Layer:同上。

4. Canvas渲染优先级:

Sort Order -> Sorting Layer -> Order in Layer


二、 然后是Canvas Scaler组件:

Canvas Scaler也是屏幕适配的主要方式,一般通过该组件就可以完成适配,如果有需求,还可以通过Screen.height和Screen.width获取屏幕长宽,然后代码控制UI位置及缩放。

Canvas Scaler只用于Canvas的Screen Space两种模式,World Space模式Canvas作为一个3D物体,不涉及适配问题。

UI Scale Mode即缩放模式,有三种:

屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解

1. Constant Pixel Size模式:

固定像素大小,不论屏幕分辨率尺寸大小如何变化,像素保持原有大小不变。效果如下

屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解

屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解关于Canvas/Canvas Scaler/Graphic Raycaster组件详解_017 1.1 Scale Factor:缩放倍数。

1.2  Reference Pixel Per Unit:Unity的1个单位代表多少个像素

同一个界面,Scale Factor的缩放显示:

屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解

2. Scale With Screen Size模式:屏幕自适应常用方式 !!!

屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解

2.1 Reference Resolution:参考分辨率,进行屏幕适配,自动缩放UI大小时,将以此作为参考。

2.2 Screen Match Mode:

首先,需要设置Panel大小与Reference Resolution一致,锚点设在中心。

屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解

屏幕匹配方式,分为三种:

2.2.1 Match Width Or Heigh:保持宽高比不变,通过设置Match值,对宽高进行缩放。如果Match值为0,优先缩放宽度与屏幕宽度一致,高度或超出屏幕或在屏幕内;如果Match值为1,则优先缩放高度。

屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解

2.2.2 Expand:保持宽高比不变,优先缩放任一宽度或高度与屏幕一致,另外一个方向在屏幕内,即Canvas包含在屏幕内。

屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解

2.2.3 Shrink:保持宽高比不变,优先缩放任一宽度或高度与屏幕一致,另外一个方向在屏幕外,即屏幕包含在Canvas内。

屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解

2.3 Reference Pixel Per Unit:同上

3. Constant Physical Size模式:

固定物理尺寸,这个模式很少用到。

3.1 Physical Unit:物理单位,点、毫米、厘米等。

3.2 Fallback Screen DPI:物理单位的像素密度。

3.3 Default Sprite DPI:默认Sprite的像素密度。

3.4 Reference Pixel Per Unit:同上。


三、 最后是Graphic Raycaster组件:

关于UI射线检测的设置。

屏幕自适应/关于Canvas/Canvas Scaler/Graphic Raycaster组件详解

1. Ignore Reversed Graphics:是否忽略反转图片的检测。

2. Blocking Objects:在Canvas前面,可以遮挡射线检测的物体。

3. Blocking Mask:遮挡射线检测的层级。