工作回顾--UI适配、场景、屏幕异型区域

原创已于 2025-08-13 15:49:46 修改 · 425 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ui #unity #游戏程序 #屏幕适配

于 2025-08-12 11:07:51 首次发布

个人总结，学习同时被 2 个专栏收录

16 篇文章

订阅专栏

9 篇文章

订阅专栏

前言

目标

1.实现屏幕尺寸 1：1 到 1：2 到 2：1 全适配
2.屏幕异型区域适配
3.留出广告banner空间
4.部分UI元素要依赖其他元素居中、部分UI元素固定尺寸等

部分效果展示：

1080*2340：
请添加图片描述
1080*1920：

1080*1080：

Canvas设置

Render Mode

在这里插入图片描述
使用Camera，因为Camera的渲染有sorting layer可以设置，而且不会遮挡粒子特效。
另外，相比Overlay，Overlay的渲染顺序在最后，会覆盖所有场景，粒子效果会有遮挡。

Canvas Scaler

UI Scale Mode 在这里插入图片描述
选用Scal With Screen Size，根据屏幕尺寸缩放，不打算留黑边，但这种方式会考虑不同分辨率下，UI元素相对位置的问题。
Scale With Pixel Size： UI元素保持像素尺寸不变，性能开销小，试用场景：精准控制像素场景、像素绘画等、像素完美游戏。不适用于自适应布局，高DPI设备保持视觉一致性
在这里插入图片描述
参考分辨设置了1080*1920
其中的Screen Match Mode 选用 Expande

Expande会根据长宽选择更接近屏幕的进行缩放，可能出现空白
Shrink相反，其实也是裁剪画布来适应屏幕
Match：
实际缩放值 = 实际屏幕尺寸 / 参考分辨率尺寸
最终缩放 = Lerp(宽度缩放, 高度缩放, Match值)

UI层级

在这里插入图片描述
Canvas下分 bot、mid、top、。。。等
每一个UI的界面都是一个预制体，不同类型UI通过自己写的UIManager加载在对应的canvas下，起到层级覆盖的效果。
（通过自己的框架来管理，框架结构的文章连接：//TODO）

特殊调整

标题图片、图标的y轴位置居中于 canvas顶部和中间元素。

在这里插入图片描述
步骤：
获取顶部间隙
根据锚点设置坐标

根据屏幕比（1:1~1:2.5），设置中间图片容器的sizeDelta，让其他元素不超出，同时满足sizeDelta的尺寸是3:2

高：宽大于参考比例，就按照宽设置尺寸
否则，按照高设置尺寸
在这里插入图片描述

异型区域适配（安全区域适配）

在这里插入图片描述
自动空出刘海屏、水滴屏等异型区域的宽度
通过Unity的API来设置Cavas的Anchors的Min和Max

Screen.safeArea、Display.main.systemWidth、Display.main.systemHeight

anchorMin.x表示左边距离边界的距离比例，anchorMin.y表示下边距离边界的。anchorMin.y则表示剩下的两条边。
在这里插入图片描述

    public class SafeArea : MonoBehaviour
    {
        private RectTransform rectTrans;
        private Rect safeArea;
        private void Awake()
        {
            Debug.Log("SafeArea Awake called");
            rectTrans = GetComponent<RectTransform>();
            rectTrans.anchorMin = Vector2.zero;
            rectTrans.anchorMax = Vector2.one;
            rectTrans.anchoredPosition = Vector2.zero;
            rectTrans.sizeDelta = Vector2.zero;
            AdaptAnchorsValue();
        }

        private void LateUpdate()
        {
            if(safeArea == Screen.safeArea) return;
            AdaptAnchorsValue();
        }

        private void AdaptAnchorsValue()
        {
            safeArea = Screen.safeArea;
            var maxWidth = Display.main.systemWidth;
            var maxHeight = Display.main.systemHeight;
            var anchorMin = safeArea.position;
            var anchorMax = safeArea.position + safeArea.size;
            anchorMin.x /= maxWidth;
            anchorMin.y /= maxHeight;
            anchorMax.x /= maxWidth;
            anchorMax.y /= maxHeight;

            rectTrans.anchorMin = anchorMin;
            rectTrans.anchorMax = anchorMax;
        }
    }