Unity全屏图片适应

美术设计效果图使用一个固定屏幕分辨率，为何和实际显示屏幕分辨率区分开，我把它叫做设计分辨率，按照这个大小做出效果图，导出背景图可以对图片压缩比设计分辨率小。
依照设计分辨率对图片分辨率宽高进行等比缩放，这样超出屏幕显示区域的内容不可见，背景图片也不会拉升（可能会因为图片分辨率太小缩放后模糊）。

// UnityEngine.Screen 获取屏幕分辨率
public static Vector2 GetScreenSize()
{
    return new Vector2(Screen.width, Screen.height);
}

设计分辨率是美术同学参照某个固定分辨率制作效果图，比如我固定设计分辨率是1334*750.
图片分辨率通过self.imageBg.transform.sizeDelta获取。

在Canvas Scaler手动指定屏幕拉伸分辨率，让Canvas RectTransform宽高永远不小于当前分辨率，以当前分辨率对界面Canvas拉伸。

这么个小Canvas Scaler参数概念还真是多，英语不好看个文档还要翻译(* ￣︿￣)

UI Scale Mode: Scale With Screen Size

按照Reference Resolution分辨率对屏幕分辨率拉伸处理，使屏幕分辨率不小于Reference Resolution分辨率，这样的好处是所有分辨率下的UI图片都会是原始分辨率或者轻度拉伸，不会有过度缩放带来的图片模糊或者锐化，上文说的设计分辨率就是这个Reference Resolution。

Screen Match Mode用屏幕分辨率宽高比对画布分辨率进行缩放。
重点说下Screen Match Mode的Expand和Shrink:

Expand (screenWidth / screenHeight) > (resolutionWidth / resolutionHeight)，以Height为基准对Width缩放。
Shrink (screenWidth / screenHeight) > (resolutionWidth / resolutionHeight)，以Width为基准对Height缩放。

其实弄个Canvas随便调下参数看看结果，都比纯粹文字好理解吧，文字只是记录我的理解结果。

回到全屏图片适应话题，设计分辨率确定了，接下来要开始换算，计算出分辨率下的图片缩放比。

function GetFullScreenSpriteSize(spriteWidth, spriteHeight)
    local retWidth, retHeight = 0, 0

    local size = PlatformDevice.GetScreenSize()
    local screenWidth, screenHeight = size.x, size.y
    local designWidth, designHeight = GetDesignResolution()

    -- 根据屏幕分辨率宽高比，计算出新的Canvas resolutionSize，得到UI需要显示的分辨率
    if (screenWidth / screenHeight) > (designWidth / designHeight) then
        -- 屏幕长，对Canvas宽拉伸到屏幕比例
        designWidth = screenWidth / screenHeight * designHeight
    else
        -- 屏幕高，对Canvas高拉伸到屏幕比例
        designHeight = screenHeight / screenWidth * designWidth
    end

    -- 对图片缩放，图片分辨率和设计分辨率相差大的边作为缩放比，等比例缩放图片
    local scaleRate = 1
    if (designWidth / designHeight) > (spriteWidth / spriteHeight) then
        scaleRate = designWidth / spriteWidth
    else
        scaleRate = designHeight / spriteHeight
    end
    retWidth = spriteWidth * scaleRate
    retHeight = spriteHeight * scaleRate

    return retWidth, retHeight
end

这么一段代码看似和Unity UI控件没什么关系，设计分辨率也是GetDesignResolution()=1334750中写死，但解读过程中不禁好奇为什么是1334750，难道仅仅是美术同学设计稿尺寸吗，那和Canvas缩放有什么关系，为何图片缩放到Canvas大小要考虑这么个分辨率，而不是直接获取Canvas的分辨率对图片缩放呢，这个设计分辨率和Camera的渲染分辨率也没有关系，工程内的Camera viewport也没有定义分辨大小，所以产生一个❓这个设计分辨率是怎么回事，从哪里来，为何参与图片全屏计算。

搞清楚上一个设计分辨率问号后，新的疑问产生：为何要选择UI Scale Mode-Screen Match Mode-Expand，原因似乎很简单，如果从1334750的设计尺寸放到手机21801080呢（现在都是越来越大的分辨率），那图片要拉伸2倍图片要糊啦，选择Expand的目的就是尽可能保持原有的图片分辨率不做太大的图片拉伸，保持原有的图片视觉体验。

Unity全屏图片适应

UI Scale Mode: Scale With Screen Size

猜你喜欢