Unity 之 实现背景图动态适配不同分辨率

一,问题背景

如何动态为一张背景图实现不同分辨率的适配?

在不同分辨率的设备上,背景图可能会出现拉伸、压缩或失真等问题,因此需要对背景图进行适当的缩放和调整,以确保在不同分辨率下都能够保持良好的外观效果。


二,解决思路

要使用该代码示例,您需要按照以下步骤操作:

  1. 在 Unity 编辑器中,创建一个新的空对象,并将其命名为 BackgroundScaler。

  2. 将 BackgroundScaler.cs 脚本文件添加到 BackgroundScaler 对象中。

  3. 在 工程文件夹中创建一个名为 Backgrounds 的子文件夹,并将背景图添加到该文件夹中。

  4. 在 BackgroundScaler.cs 脚本文件中,将 backgroundSprite 变量设置为您添加的背景图的 Sprite。

  5. 将 BackgroundScaler 对象添加到场景中。

  6. 运行场景,并在不同分辨率的设备上测试背景图的适配效果。


三,注意事项

在使用该代码示例时,请注意以下几点:

  1. 背景图应该具有适当的纵横比,以确保在不同分辨率下都能够保持良好的外观效果。

  2. 在测试适配效果时,请使用不同分辨率的设备进行测试,并观察背景图是否出现拉伸、压缩或失真等问题。

  3. 如果您的背景图太大或太小,可能会影响适配效果。请尝试使用适当的图像编辑工具对背景图进行缩放或裁剪,以确保其大小适中。


四,代码分享

通过使用该代码示例,您可以动态为一张背景图实现不同分辨率的适配,并确保在不同分辨率下都能够保持良好的外观效果。在实际开发中,您可以根据具体情况对代码进行修改和优化,以满足需求。

具体代码如下:

using UnityEngine;
using UnityEngine.UI;

public class BackgroundScaler : MonoBehaviour
{
    
    
    public Sprite backgroundSprite; // 存储背景图

    private Image backgroundImage;

    void Awake()
    {
    
    
        backgroundImage = GetComponent<Image>();

        // 获取当前设备的分辨率
        float screenHeight = Screen.height;
        float screenWidth = Screen.width;

        // 计算目标背景图的宽高比
        float targetAspect = screenWidth / screenHeight;

        // 获取背景图的宽高比
        float imageAspect = backgroundSprite.rect.width / backgroundSprite.rect.height;

        // 如果目标宽高比小于背景图宽高比,则以宽度为基准进行缩放
        if (targetAspect < imageAspect)
        {
    
    
            float scaleFactor = backgroundSprite.rect.width / screenWidth;
            float scaledHeight = backgroundSprite.rect.height / scaleFactor;

            // 设置背景图的大小和位置
            backgroundImage.rectTransform.sizeDelta = new Vector2(screenWidth, scaledHeight);
            backgroundImage.rectTransform.position = Vector3.zero;
        }
        // 如果目标宽高比大于或等于背景图宽高比,则以高度为基准进行缩放
        else
        {
    
    
            float scaleFactor = backgroundSprite.rect.height / screenHeight;
            float scaledWidth = backgroundSprite.rect.width / scaleFactor;

            // 设置背景图的大小和位置
            backgroundImage.rectTransform.sizeDelta = new Vector2(scaledWidth, screenHeight);
            backgroundImage.rectTransform.position = Vector3.zero;//new Vector2(screenWidth / 2, screenHeight / 2);
        }

        // 设置背景图的 sprite
        backgroundImage.sprite = backgroundSprite;
    }
}

五,实战应用

根据画布大小和屏幕比例来决定背景缩放比例:

using UnityEngine;
using UnityEngine.UI;

public class BackgroundScaler : MonoBehaviour
{
    
    
    public Canvas BackgroundCanvas;

    private Image backgroundImage;

    private void Start()
    {
    
    
        if (BackgroundCanvas != null)
        {
    
    
            backgroundImage = GetComponent<Image>();
            UpdateBackgroundSize();
        }
    }

    private void UpdateBackgroundSize()
    {
    
    
        RectTransform rt = backgroundImage.rectTransform;
        float screenWidth = BackgroundCanvas.GetComponent<RectTransform>().rect.width; //Screen.width;
        float screenHeight = BackgroundCanvas.GetComponent<RectTransform>().rect.height; //Screen.height;
        float screenRatio = screenWidth / screenHeight;
        float bgRatio = rt.rect.width / rt.rect.height;

        if (screenRatio > bgRatio)
        {
    
    
            rt.sizeDelta = new Vector2(screenWidth, screenWidth / bgRatio);
        }
        else
        {
    
    
            rt.sizeDelta = new Vector2(screenHeight * bgRatio, screenHeight);
        }

        rt.anchoredPosition = new Vector2(0, 0);
    }
}

猜你喜欢

转载自blog.csdn.net/Czhenya/article/details/130373285