像素、分辨率与屏幕适配

游戏开发过程中，像素和分辨率虽然时常被同事们提起，但总感觉大家对相关的概念普遍缺少严格的定义。有种“铁比棉花重”的“坊间传闻”感。当我遇到真正的“硬茬”——不同分辨率设备的屏幕适配问题时，这些含糊的概念给我带来了深深的困扰。在查阅资料的过程中，我发现这确实不是一个简单的问题，涉及到了多个领域的多种概念，并且由于很多概念是从工业界发展演变过来的，又往往带有历史局限性和一些人为规定的标准。不仅如此，对于有些概念或机制，你无法真正深入到底层实现去一探究竟，只能根据文档或其他资料去猜测性的理解（比如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