项目类型:2D游戏、竖屏、URP
其他类型,部分原理类似。
1、确定设计分辨率:750*1334
目前常见两种设计分辨率为:
750x1334:iPhone 6/7/8的物理分辨率,属于苹果设备中的经典尺寸。
720x1280:是HD+的分辨率,常见于安卓设备,尤其是中低端机型。
若以iOS 优先,优先考虑 750x1334,可直接适配 iPhone 6/7/8,并作为 iOS 设计的基准(逻辑分辨率 375x667,@2x 输出)。
若以Android 优先:优先考虑 720x1280,但需注意主流安卓设备已普遍转向更高分辨率(如 1080x1920 或 1440x2560)。
跨平台(iOS + Android):优先考虑 750x1334。
两者宽高比,都接近 9:16,较为适中。
方便后续适配到真机的 “更长屏” 或 “更宽屏”。
2、在场景中添加 UICamera、MainCamera、UICanvas
添加物体及相关组件
3、调整 UICamera 物体的 Camera 组件(URP下)
Render Type: Overlay (支持多相机显示,要点)
Projection: Orthographic (正交)
Size: 6.67(修改将影响 UICanvas 的 Scale 值)(注意,它不影响 Canvas 在 Game 视图中的占比,因为 Canvas 总是填满屏幕)
ClearDepth:true (多相机显示正确,要点)
Culling Mask:UI (使只渲染UI)
4、调整 MainCamera 物体的 Camera 组件(URP下)
Render Type: Base
Projection: Orthographic (正交)(2D游戏)
Size: 6.67(修改将影响 场景物体在 Game 视图中的占比)
Culling Mask:去掉UI (使不渲染UI)
Stack 中,添加 UICamera (相机关联,支持多相机显示,要点)
5、调整 UICanvas 物体的 Canvas 组件
RenderMode: Screen Space-Camera
RenderCamera: 拖入 UICamera
SortingLayer: UI
6、设置 UICanvas 物体的 Canvas Scaleer 组件
UI Scale Mode: Scale With Screen Size (随屏幕缩放)
Reference Resolution: 750*1334 (设计分辨率)
Screen Match Mode: Expand (总是扩展更大边)(移动游戏通常采用无裁剪的适配方式,具体选择原因,见下方测试)
Reference pixels Per Unit: 100 (控制精灵像素密度,具体见下方说明)
--------------------------- NRatel 割 ---------------------------
注意:Camera 的 Size 为什么是 6.67 ?
6.67 = 1334/2/100(若为横屏游戏则为3.75)
其中:
1334 :设计分辨率的高(若为横屏游戏则为750)
2 :OrthographicSize 为垂直视体大小的一半(Size属性用于定义相机视图的垂直大小)。
Camera-orthographicSize - Unity 脚本 API
100:UI坐标系 相对 场景世界坐标系的缩放倍数,即,在Game 视图中 UI 中100像素 = 场景中世界坐标系的 1米
这个值来自 Canvas Scaler 的 Reference pixels Per Unit
Canvas-referencePixelsPerUnit - Unity 脚本 API
为什么它决定了 UI坐标系 相对 场景世界坐标系 的缩放倍数?
因为:
Image(UI坐标系中的物体) SetNative 后的大小(单位:像素数) = 原图像素数 / (Sprite 导入设置的 Pixels Per Unit / CanvasScaler设置的 Reference Pixels Per Unit)
SpriteRenderer(场景世界坐标系中的物体) 的大小(单位:米) = 原图像素数 / Sprite 导入设置的 Pixels Per Unit
可以看到,两者差的倍数正是Canvas Scaler 的 Reference pixels Per Unit
当两者同时使用一张图时,在Game 视图中其大小是相同的
对齐之美(2D游戏)
1、将 MainCamera 的 Size 设为 6.67,将使世界物体 7.5m*13.34米的物体 刚好填充整个 MainCamera 的视口,即刚好填充Game 视图的整个屏幕
2、将 UICamera 的 Size 设为 6.67,将使 UICanvas 的 Scale 值为 0.01,在Scene 视图中观察,UICamera 和 MainCamera 的视口大小是重合的,UI与场景物体大小也是对齐的,完美!
--------------------------- NRatel 割 ---------------------------
注意:Canvas Scaleer 为什么选 Expand?
竖屏游戏,各选择的结果对比,
以下将 Match Width Or Height 简单称之为“Match”;
以下将 ipad 等宽屏机器 简单成为 “宽机型”
以下将 iphone12 等宽屏机器 简单成为 “长机型”
“宽机型/长机型” 均相对于 参考/设计分辨率 的宽高比判断。
以下结果中,
“留空白” 指:Canvas 出现额外空间。
“被裁剪”指:Canvas 某一方向小于参考分辨率,放在参考设计区边缘的内容将超出屏幕无法显示。
1_1、Match = 0;宽机型: 上下被裁剪
1_2、Match = 0;长机型: 上下留空白
2_1、Match = 1;宽机型: 左右留空白
2_2、Match = 1;长机型: 左右被裁剪
3_1、Match = 0.5;宽机型: 上下被裁剪(小幅) && 左右留空白(小幅)
3_2、Match = 0.5;长机型: 左右被裁剪(小幅) && 上下留空白(小幅)
4_1、Expand;宽机型: 左右留空白
4_2、Expand;长机型: 上下留空白
5_1、Shrink;宽机型: 上下被裁剪
5_2、Shrink;长机型: 左右被裁剪
集中总结:
1_1、Match = 0;宽机型: 上下被裁剪
1_2、Match = 0;长机型: 上下留空白
2_1、Match = 1;宽机型: 左右留空白
2_2、Match = 1;长机型: 左右被裁剪
3_1、Match = 0.5;宽机型: 上下被裁剪(小幅) && 左右留空白(小幅)
3_2、Match = 0.5;长机型: 左右被裁剪(小幅) && 上下留空白(小幅)
4_1、Expand;宽机型: 左右留空白
4_2、Expand;长机型: 上下留空白
5_1、Shrink;宽机型: 上下被裁剪
5_2、Shrink;长机型: 左右被裁剪
-------------------------------------------------------------
综上,若想在任何情况下都不发生裁剪(裁剪不安全),只能采取 Expand,
或 使用 Match 但根据 屏幕类型,在 宽机型时修改使 Match = 1;在长机型时修改使 Match = 0,
而这其实就是 Expand。