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的目的就是尽可能保持原有的图片分辨率不做太大的图片拉伸,保持原有的图片视觉体验。