Unity游戏开发中UGUI的屏幕适配方案

Unity游戏开发中UGUI的屏幕适配方案

引用

CSDN

1.

https://blog.csdn.net/qilin598866753/article/details/139690329

游戏开发的过程中，UI都是在设计分辨率下出效果图，开发者需要适配各种不同的屏幕分辨率。本文介绍商业化项目中使用的屏幕适配方式，实验时UI设计分辨率为1080*1920。

1. 设置CanvasScaler

前两个设置没什么好说的，主要是第三个选项Screen Match Mode得设置为Expand。

Expand模式会将 UI 缩小到能在屏幕中显示完所有的UI元素。

我们可将Game视图分辨率设置为1080 * 1600（窄屏），来看Shrink模式和Expand模式的效果：

Shrink模式，部分UI超出屏幕能显示的区域：

Expand模式，所有的UI元素都在屏幕显示区域内：

使用Expand模式能将所有的UI元素显示在屏幕内，但是会引出一个新的问题，即背景图片无法铺满整个屏幕，这是不能接受的，由此我们进入下一步背景图片适配。

2. Expand模式下的背景图片适配

由于Expand模式下导致背景图片过度缩小，我们得再次修正其大小，以铺满我们整个屏幕。

我们需要添加在背景图片上添加一个脚本UIBgAdapt，放大尺寸来铺满这个屏幕：

UIBgAdapt组件请参考附件，核心为：

//设置图片铺满整个屏幕
float expandScaleFactor = Mathf.Min(screenSize.x / inst.ImageWidth, screenSize.y / inst.ImageHeight);
float shrinkScaleFactor = Mathf.Max(screenSize.x / inst.ImageWidth, screenSize.y / inst.ImageHeight);
float resetScale = shrinkScaleFactor / expandScaleFactor;   //shrinkScaleFactor为我们想要的缩放，expandScaleFactor为我们默认设置的缩放
inst.m_Transform.localScale = new Vector3(resetScale, resetScale, 1);

UGUI也给我们提供了一个组件AspectRatioFitter，使用它可以达到同样效果：

不同分辨率的适配就此结束。

3. 屏幕安全区域适配

如果目标设备是刘海屏，则红色区域的内容不能显示出来（四个绿色的块锚住屏幕四个角）：

因此我们需要修改RectTranform的Height（如果是横屏游戏修改Width）

在GameObject上添加UISafeArea组件：

实验时在组件上勾选Is Safe Area，可看到四个绿色的方块都在安全区域内显示了。

UISafeArea组件请参考附件，核心为：

private void applySafeArea()
{
    if (this.isSafeArea)    //如果是刘海屏
    {
        Vector2 sizeDelta = this.m_ParentRectTransform.sizeDelta;
        //sizeDelta.x *= 0.9f;    //横屏游戏开启这个
        sizeDelta.y *= 0.9f;
        this.m_RectTransform.sizeDelta = sizeDelta;
    }
    else
    {
        Vector2 sizeDelta = this.m_ParentRectTransform.sizeDelta;
        this.m_RectTransform.sizeDelta = sizeDelta;
    }
}