Aspect Ratio 标准为什么是16:9?
Unity UI System 笔记(二) Aspect Ratio 标准为什么是16:9?
设备分辨率适配(Multiple Resolutions),离不开的一个概念:Aspect Ratio
https://en.wikipedia.org/wiki/Display_aspect_ratio
Aspect Ratio:显示设备的高度和宽度的比例,所谓的纵横比,长边与短边的比值。
它表示为由冒号(x:y)分隔的两个数字,常见的有4:3,5:4,16:9,16:10等等
4:3标准的历史非常久远,16:9标准是目前的主流。
我们看的IMAX是19:10,这不在我们的讨论范围之内。
在做游戏之前,我们都要做的一件事儿-确定分辨率。
更专业的说法叫确定纵横比。
这里的分辨率指的是“设计分辨率”,比如说,很多游戏会采用1334*750(iPhone 6s),其根本的原因是1334x750分辨率的Aspect Ratio是16:9(1.77)
目前市面上的移动设备中,16:9的设备占据了九成以上,其它不同的,也均接近于16:9,国内4:3的设备,占有率只有0.x%(数据参考百度流量研究院2019年5月)
有部分设备是16:10的,但都接近于16:9
iOS设备中,除了iPad(2048x1536,1024x768)是采用4:3以外,其它的几乎均是16:9
(经典的iPhone 4(960x640) Aspect Ratio=1.5,但市场占有率只有0.02%)
iPad的适配通常都是要单独处理的,因为分辨率Density大,放大的效果并不好,通常需要一些单独的适配处理方案,比如提供一套高清的图片,或是采取最小的缩放比,保证清晰度,但黑边的地方可以使用一张全屏的虚化图处理等等,这里会在后面说到。
设计分辨率是UX设计资源时的标准,也是我们在做Canvas Scaler时的Reference Resolution。
4:3标准我们应用了很多年,它接近于一个矩形,宽比高多了33%(还记得CRT显示器吗),后来出现了16:9,又叫widescreen,宽屏,宽比高多了78%,更接近于人类的视野范围。
(上图-淡蓝色是4:3,淡绿色是16:9,明显的区别,16:9显示的更宽更长。)
这里不会过多的讨论Aspect Ratio的历史,比如4:3的由来,16:9标准的演化,有兴趣可以去wikipedia上查看。
不同的Aspect Ratio 会带来什么问题?
比如我现在的图片或是视频是按照4:3的标准制作的,我的手机或是TV是16:9的,那么我要将它们显示在我的设备上,就需要进行适配,技术上就是缩放处理。
不同的Aspect Ratio 是无法完美的匹配到所有设备上的。这也是为何我们会看到在观看某些视频的时候,屏幕的左右或是上下会出现“黑边”的现象。
适配会有很多的策略,比如4:3的图片,呈现在16:9的设备上,或是16:9的图片,呈现在4:3的设备上:
图片来自于参考文献里,有些糙,但不影响表达。
可以看到左右上和下上的两个“黑边”,这个”黑边“,有两个更加专业的术语。
左右的黑边,叫“pillar boxes" ,像两个柱子。
上下的黑边,叫“Letter boxes",像一个邮筒。
屏幕可以是横向,也可以是纵向,原理都是相同的。
我们可以看到,虽然有黑边,但图像显示的比例是正常的,没有失真。
这种处理的方式是如何计算的呢?
取最小的缩放比。
计算的方式如下:
使用目标设备的宽度/设计分辨率宽,计算出宽度比。
使用目标设备的高度/设计分辨率高,计算出高度比。
取宽高比值最小的那一个。
取最小的比值,设计分辨率的宽和高分别乘以相同的系数(ScaleFactor),确保了图片不会失真,另外,最小比值,可以保证一边完全的填充到目标设备,但另一边,则会因为最小比值的原因,而无法填充,导致黑边的产生,即(Pillar Boxes or Letter Boxes)
电影或是观看视频,这是很常见的现象,观众习以为常,或者说在不同的设备上播放视频,这是最佳的处理方式。
在游戏中,也同样适用,但通常我们会做更多的处理,去“填补”黑边,以获得更好的视觉效果。
在uGUI中,他对应的UI Scale Mode:
算法取最小比值:
scaleFactor = Mathf.Min(screenSize.x / m_ReferenceResolution.x, screenSize.y / m_ReferenceResolution.y)
既然我可以选择取最小缩放值,是不是也可以取最大的缩放比值?
取最大的缩放比值,好处是仍然不会失真,因为乘上的比例是相同的,而且不会产生黑边,因为取的最大的缩放比值,横向和纵向都可以被填充,但问题是,会有一边超出屏幕,比如高度的乘1.3就可以完美的填充,但他是最小的比值,最大的比值是1.7,那么高度乘1.7,上下就会超出屏幕,从而造成显示信息的缺失。如下图:
上面是原图,下面是取最大缩放比的效果,比例没有失真,但上下的有部分象素超出了屏幕。
这种效果叫Cropped
这在电影或是视频中是无法被忍受的,会隐藏掉一些信息,但在游戏中是可以接受的,比如全屏的背景图,通常不包含什么重要的信息,边边角角部分象素是可以超出设备的屏幕显示之外。
uGUI中,UI Scale Mode对应的是:
算法是取最大宽高比值:
scaleFactor = Mathf.Max(screenSize.x / m_ReferenceResolution.x, screenSize.y / m_ReferenceResolution.y);
既然我可以取最小,最大两种不同的缩放比,那么能不能宽和高分别乘上各自的缩放比(即不同的缩放比)呢?
原理上是可以的,但现实是不可忍受的。原因很简单,宽和高乘上不同的缩放比,会让图像失真。
术语叫Stretched or Squeezed,拉伸或挤压。
我记得这种缩放策略在我早先接触cocos2d-x引擎的时候,里面就有,完全是鸡肋的参数。
在uGUI的Canvas Scaler中,还可以看到另外一种适配模式:
Match Width Or Height
下面的Match 你可以拖动Slider来选择缩放比,这样做的目的是什么?
如果你的设备同时支持横向和纵向显示,虽然这种游戏现在好像不太多见了,这种适配处理通常面临的问题要更加的复杂,同时支持横向和纵向,那么我在屏幕旋转的时候,可能会有动态处理的必要,比如纵向和横向显示时,不同分辨率,采用不同的缩放比会得到更合适的缩放效果,在Unity form里,看到一个贴子,是通过设置 Match = 0.5f 来处理iPhone流海屏的适配。
算法是通过线性插值进行计算:
float logWidth = Mathf.Log(screenSize.x / m_ReferenceResolution.x, kLogBase);
float logHeight = Mathf.Log(screenSize.y / m_ReferenceResolution.y, kLogBase);
float logWeightedAverage = Mathf.Lerp(logWidth, logHeight, m_MatchWidthOrHeight);
scaleFactor = Mathf.Pow(kLogBase, logWeightedAverage);
设计游戏时,使用16:9的纵横比是目前最佳的标准,我查了相关的资料,通过数据可以更加直观的了解目前国内移动设备的Asepct Ratio标准。
https://mtj.baidu.com/data/mobile/device/
来自百度的流量研究院
我这里只关注分辨率部分的统计
Android Aspect Ratio:
(Aspect Ratio的计算由长边/短边)
(不统计1%以下占比率)
Aspect Ratio的范围在1.64~1.89之间,均接近1.78(即16:9)
16:9(1.78)设备的占有率达到70%!
iOS Aspect Ratio:
(不统计0.1%以下占比率)
iOS的数据存在一点问题,分辨率横纵是分开统计的,但不影响结果。
16:9设备的占有率在9成以上,其中4:3(1.33),只是2048x1536,1024x768两种iPad设备.
对于2048x1536(iPad),通常适配的时候,需要特殊的处理,不过准备一套高清资源这种处理方式会有比较大的成本。所以常见的处理策略是取最小缩放比,类似画面居中,然后背景是一张全屏的虚化图来“填补“黑边(上面有提到)
结论:
16:9标准是现在移动端设备的标准纵横比,占有率达90%以上,其它的Aspect Ratio也均接近于16:9.
在游戏中,对于全屏的背景图,我们采用最大缩放比(Shrink),不留黑边,超出屏幕之外的象素是很少的(因为Aspect Ratio 均非常接近16:9),是可以接受的,只是需要注意的是,我们在资源制作的时候,尽量不要将重要的信息,太靠近图像的边角。
龙德广场-言几又书店-Mitty 2019.7.21
参考文献:
https://material.io/tools/devices/
http://screensiz.es
https://stackoverflow.com/questions/7199492/what-are-the-aspect-ratios-for-all-android-phone-and-tablet-devices
https://www.tru-vumonitors.com/images/4_3_vs_16_9_Aspect_Ratio.pdf
https://chetdavis.typepad.com/chet-davis/2009/11/pillarboxing-letterboxing-and-postage-stamp-effects-.html
http://iosres.com
https://www.rtings.com/tv/learn/what-is-the-aspect-ratio-4-3-16-9-21-9
感谢您的阅读, 如文中有误,欢迎指正,共同提高
欢迎关注我的技术分享的微信公众号,Paddtoning帕丁顿熊,期待和您的交流