CrabSaberV is here
0%

Unity 屏幕宽高比低于开发的宽高比如何确保UI显示正确，且游戏场景显示范围保持一致

发表于 分类于

前言

在之前的文章 U3D游戏横屏显示竖屏 中，本来是按照高度优先开发的，但是遇到实际手机1080x2400 的情况，屏幕更长了，使得宽度显示窄而导致游戏场景内容被遮住了很多部分。

为此，本文记录如何解决该问题！

解决方法

1、设置Canvas Scale

设置其mode为 Expend

2、控制UI宽高优先匹配的脚本

本质逻辑就是，当发现实际的宽长比小于开发的宽长比时，切换为宽度适配优先，否则以高度适配优先。

调整的正是AspectRatioFitter的匹配模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
using UnityEngine;
using UnityEngine.UI;

/// <summary>
/// 宽高比，当大于该值使用高度优先，否则使用宽度优先
/// </summary>
[RequireComponent(typeof(AspectRatioFitter))]
public class AspectRatioFixer : MonoBehaviour
{
    [Header("屏幕比例设置")]
    [SerializeField, Tooltip("初始设计宽高比 (宽/高)")]
    private float designAspect = 0.5625f; // 9:16 竖屏比例

    private AspectRatioFitter _aspectFitter;
    private float _lastScreenAspect;

    private void Awake()
    {
        _aspectFitter = GetComponent<AspectRatioFitter>();
        UpdateAspectRatio();
    }

    private void UpdateAspectRatio()
    {
        _aspectFitter.aspectRatio = designAspect;
        float screenAspect = (float)Screen.width / Screen.height;
        
        // 核心逻辑：根据当前屏幕比例切换模式
        if (screenAspect > designAspect)
        {
            _aspectFitter.aspectMode = AspectRatioFitter.AspectMode.HeightControlsWidth;
        }
        else
        {
            _aspectFitter.aspectMode = AspectRatioFitter.AspectMode.WidthControlsHeight;
        }
        
        // 保持设计比例不变
        _aspectFitter.aspectRatio = designAspect;
    }

    // 当屏幕方向改变时触发更新
    private void OnRectTransformDimensionsChange()
    {
        if (_aspectFitter == null)
        {
            return;
        }
        UpdateAspectRatio();
    }
}

3、保持场景相机显示范围一致

当UI因为实际屏幕长宽比拉伸时，会让原本开发时的场景显示范围变大或变少。

因为场景画面有时候本来就是富足显示，只是我们实际操作区域是由UI来遮挡显示的。

但是这样的话，UI的改变，使得我们操作范围变化，原本边界或坐标就不正确了。

不过可以通过调节相机的距离，就能解决这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 场景相机的适配
private float _designAspect = 9f/16f; // 初始设计比例
private float _baseOrthographicSize;

/*** 方法中 ***/
 private void Awake()
 {
    先记录原本的尺寸
     _baseOrthographicSize = mainCamera.
 }


private void SyncSceneCamera(){
    float currentAspect = (float)Screen.width / Screen.height;
    if (currentAspect < _designAspect)
    {
        // 当屏幕更窄时，基于宽度适配
        mainCamera.orthographicSize = _baseOrthographicSize * (_designAspect / currentAspect);
    }
    else
    {
        // 保持原始正交大小 
        mainCamera.orthographicSize = _baseOrthographicSize;
    }

    //因为该游戏是竖屏，保高度一致的游戏，所以如果宽高比大于开发宽度也不用担心，因为UI的开发比例限制了9:16，所以不用挪动相机大小
}