像素、分辨率与屏幕适配

游戏开发过程中,像素和分辨率虽然时常被同事们提起,但总感觉大家对相关的概念普遍缺少严格的定义。有种“铁比棉花重”的“坊间传闻”感。当我遇到真正的“硬茬”——不同分辨率设备的屏幕适配问题时,这些含糊的概念给我带来了深深的困扰。在查阅资料的过程中,我发现这确实不是一个简单的问题,涉及到了多个领域的多种概念,并且由于很多概念是从工业界发展演变过来的,又往往带有历史局限性和一些人为规定的标准。不仅如此,对于有些概念或机制,你无法真正深入到底层实现去一探究竟,只能根据文档或其他资料去猜测性的理解(比如unity⊙﹏⊙∥)。不过无论如何,我还是把这些概念整理记录下来,不能保证正确性,欢迎大家指正。
首先像素这个概念是电子显示设备出现之后才有的。想象一下宋朝王希孟在绢布上画《千里江山图》的时候,一定不会考虑要按多少像素来构图。甚至笔者初中时候上课用的老式灯光投影仪,也和像素没有关系,它的清晰度似乎取决于老师水彩笔的质量啊ヾ(•ω•`)o


投影仪.png

像素这个概念脱离不了电子屏幕的呈像。像阴极射线管(Cathode Ray Tube,CRT),通过光栅化扫描系统绘图。电子束横向扫描屏幕,自顶向下,一次一行,在扫描过程中电子束强度不断变化,从而建立亮点组成一个图案。


CRT呈像.png
像素的定义:

光栅化扫描系统中每个可由电子束点亮的屏幕点成为一个像素(pixel,picture element的缩写)。亮点的强度满足高斯分布。要使相邻两个亮点保持区别,它们的间隔需要大于最大强度的60%。【图片来源于《计算机图形学第四版》】

亮度分布.png
区分亮点.png

分辨率的定义:

CRT无重叠显示的最多点数称为分辨率(resolution)。虽然它常常简述为每个方向的总点数,但更精确的分辨率定义是在水平和垂直方向上每厘米可绘制的点数。

纵横比(aspect ratio) 或者又称为 画幅比 宽高比:

可以理解为屏幕横向的像素数量与纵向的像素数量的比值。下面有一些常见的aspect ratio:
4:3 早期电影胶片,符合黄金分割比例
2.35:1 4:3的3次方,有更宽的横向视野,与人眼的视野更为接近
16:9 介于4:3和2.35:1之间,高清电视的国际标准 1920x1080 1290x720
说到这里,顺带再提一下1080p
1080p 中的p表示progressive scanning(逐行扫描) 是一种视频的显示格式
1080p25 中的25表示一秒有25张画面
1080i 中的i表示inerlaced scanning(隔行扫描)
而经常被提起的2k,则是指水平方向上每行的像素值达到或接近2048个,描述的不是同一类概念。

分辨率和清晰度的关系

“清晰度”其实没有特别准确的定义,属于一种人眼的主观向的评价值。对于同样大小的屏幕来说,它不仅和像素的多少有关,还与人眼到屏幕的观测距离有关。如果我们暂时先不考虑观测距离,可以引入一个评价清晰度的值:

屏幕像素密度(ppi, pixel per inch):

每英寸屏幕所拥有的像素数。注意这里的英寸指的是矩形屏幕区域的对角线长度。公式如下:


ppi.jpg

实际上如果横纵像素分布是等距的,也可以直接用横向数量/横向长度来计算ppi。
还有一个比较接近的概念dpi(dot per inch),不过一般是针对点阵输出设备(比如打印机)
在一定范围内,像素密度约高,可展示的图片信息的细节越多,也就越清晰。不过当像素密度达到一定值之后,会超过人眼可以识别的极限,即人眼已经无法辨别像素点了。在正常观看距离下,大约在300ppi。这种屏幕叫视网膜屏。但电脑和手机的视距不同,达到“视网膜屏”的ppi要求也不同
手机:视距25cm,ppi300
电脑:视距50cm,ppi200
这就是为什么手机和电脑虽然屏幕大小差距很大,但主流的分辨率都是1920x1080

像素无关密度(dp/dip,density-independent pixel):

是一种让不同分辨率设备显示效果统一的一种解决方案。对于同样的一张图片(比如256x256像素大小),如果两个设备的屏幕大小一样,但是物理分辨率不一样,那么最后图片显示在屏幕上就会产生大小的差异。
dip以160ppi为基准,1dip=1px,若ppi=320,则1dip=2px
换算公式为:dip=px/(dpi/160)

图像分辨率与屏幕分辨率:

上面我们提到的分辨率是针对显示设备的,成为屏幕分辨率。而对于图片或视频这类记录图像信息的文件来说,我们也用像素和分辨率来表示它们记录数据的多少(即图片或视频1帧画面的大小),称为图像分辨率。可以理解为图像文件通过一个二维矩阵记录了图像的数据,矩阵中的每一个元素记录了对应位置如果投射到屏幕上应该表现为什么颜色。比如512x256的图片,表示它可以控制横向宽度为512,纵向高度为256高度的区域范围内的每一个像素的颜色。

如果显示图片的屏幕范围和实际图片的像素大小不一致怎么办?

老实说我之前都没有想过这个问题,可能是现代计算机处理的太好了,对用户几乎无感。而这依赖于图像放缩算法。放缩算法可以简单理解成对原图片的像素的基础上进行填充(放大)或剔除(缩小),以使得用来显示的像素矩阵与显示区域一直。这个过程一般通过像素插值来实现,即根据目标像素周围像素点的信息来对该像素点的值进行预测。

图像插值.png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容