走在网页游戏开发的路上（十一）

游戏中的图像资源

当今游戏早已不再是黑白机的时代，游戏都由色彩丰富、精致的图像，流畅的动画构成。Flash游戏也不例外，Flash既支持矢量图又支持位图，他们各有优缺点。本文的目的即是介绍何时使用矢量图，何时使用位图，如何在两者之间权衡？

1. 前言

首先让我们了解一下何谓矢量图，何谓位图，及各自的优缺点。这些内容与游戏无直接关系，但是了解他们的差异有助于我们在游戏中如何选择。

1.1 矢量图

矢量图（摘自：百度百科）使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓，由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。

优缺点：

l 文件小，图像中保存的是线条和图块的信息，所以矢量图形文件与分辨率和图像大小无关，只与图像的复杂程度有关，图像文件所占的存储空间较小。

l 图像可以无级缩放，对图形进行缩放，旋转或变形操作时，图形不会产生锯齿效果。

l 可采取高分辨率印刷，矢量图形文件可以在任何输出设备打印机上以打印或印刷的最高分辨率进行打印输出。

l 最大的缺点是难以表现色彩层次丰富的逼真图像效果。

l 矢量图与位图的效果是天壤之别，矢量图无限放大不模糊，大部分位图都是由矢量导出来的，也可以说矢量图就是位图的源码，源码是可以编辑的。

1.2 位图

位图（摘自：百度百科）（Bitmap），又称栅格图（Raster graphics），是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。

颜色编码

RGB：位图颜色的一种编码方法，用红、绿、蓝三原色的光学强度来表示一种颜色。这是最常见的位图编码方法，可以直接用于屏幕显示。

CMYK：位图颜色的一种编码方法，用青、品红、黄、黑四种颜料含量来表示一种颜色。常用的位图编码方法之一，可以直接用于彩色印刷。

图像属性

l 索引颜色/颜色表

位图常用的一种压缩方法。从位图图片中选择最有代表性的若干种颜色（通常不超过256种）编制成颜色表，然后将图片中原有颜色用颜色表的索引来表示。这样原图片可以被大幅度有损压缩。适合于压缩网页图形等颜色数较少的图形，不适合压缩照片等色彩丰富的图形。

l Alpha通道

在原有的图片编码方法基础上，增加像素的透明度信息。图形处理中，通常把RGB三种颜色信息称为红通道、绿通道和蓝通道，相应的把透明度称为Alpha通道。多数使用颜色表的位图格式都支持Alpha通道。

l 色彩深度

色彩深度又叫色彩位数，即位图中要用多少个二进制位来表示每个点的颜色，是分辨率的一个重要指标。常用有1位（单色），2位（4色，CGA），4位（16色，VGA），8位（256色），16位（增强色），24位和32位（真彩色）等。色深16位以上的位图还可以根据其中分别表示RGB三原色或CMYK四原色（有的还包括Alpha通道）的位数进一步分类，如16位位图图片还可分为R5G6B5，R5G5B5X1（有1位不携带信息），R5G5B5A1，R4G4B4A4等等。

分辨率

处理位图时，输出图像的质量决定于处理过程开始时设置的分辨率高低。分辨率是一个笼统的术语，它指一个图像文件中包含的细节和信息的大小，以及输入、输出、或显示设备能够产生的细节程度。操作位图时，分辨率既会影响最后输出的质量也会影响文件的大小。处理位图需要三思而后行，因为给图像选择的分辨率通常在整个过程中都伴随着文件。无论是在一个300 dpi的打印机还是在一个2570dpi的照排设备上印刷位图文件，文件总是以创建图像时所设的分辨率大小印刷，除非打印机的分辨率低于图像的分辨率。如果希望最终输出看起来和屏幕上显示的一样，那么在开始工作前，就需要了解图像的分辨率和不同设备分辨率之间的关系。显然矢量图就不必考虑这么多。

1.3 总结

l 矢量数据的优缺点：

优点为数据结构紧凑、冗余度低，有利于网络和检索分析，图形显示质量好、精度高；

缺点为数据结构复杂，多边形叠加分析比较困难。

l 位图数据的优缺点：

优点为数据结构简单，便于空间分析和地表模拟，表现力较强；

缺点为数据量大，投影转换比较复杂。

表：位图与矢量图比较

图像类型	组成	优点	缺点	常用制作工具
位图图像	像素	只要有足够多的不同色彩的像素，就可以制作出色彩丰富的图象，逼真地表现自然界的景象	缩放和旋转容易失真，同时文件容量较大	Photoshop、画图等
矢量图像	数学向量	文件容量较小，在进行放大、缩小或旋转等操作时图象不会失真	不易制作色彩变化太多的图象	Flash、CorelDraw等

2. 游戏中权衡

上面了解了矢量与位图各自优缺点，下面介绍在Flash游戏中如何权衡使用。

矢量图能够调整大小，而不会造成任何质量损失，文件大小也比位图要小得多，然而大量的矢量图会对CPU造成沉重的负担。使用矢量图需要注意：虽然可以通过Illustrator来创建矢量图，但是最好直接在Flash中创建矢量图像，因为Fash会自动在绘制矢量图中使用尽量少的点来对其进行优化。构成矢量图的点缺少，渲染速度就会越快，文件尺寸也会越小。这是因为矢量图通过数学公式计算获得的，点越多越复杂，计算多耗CPU。

位图能够提供照片级别的真实感，而这得需要非常复杂的矢量图才能办到。许多不同的图像设计软件（包括多数3D软件）都位图，然后只有几个软件能够生成为Flash兼容的矢量图像。另外将光栅图像渲染到屏幕上所需要的运算量也要少得多，因为Flash会将其与一个矢量长方形以等同复杂度对待。但是当像素增加时，光栅图像的大小会呈指数级增加，并在Flash中不可做到质量无损地调整位图的大小。另外，在Flash中渲染透明图像要比渲染不透明图像更耗费运算资源。对透明图像渲染时还需要对图像下面的像素颜色进行采样，才能和信的颜色进行混合，这些计算是比较耗时的。如果图像完全不透明，那么这些计算就可以被避免了。

矢量图：文件小、缩放不失真、CPU消耗大

位图：文件大、缩放失真、CPU消耗小

在游戏中，两者之间的选择即CPU与内存之间的权衡，我更偏重于使用位图，牺牲内存来换CPU。这样才能在屏幕上快速渲染出游戏对象，保证畅快的游戏体验。有大量细节的矢量图，如复杂的矢量动画，会因为太耗CPU渲染太慢会感觉到游戏卡。

二八原则也同样适用于游戏中的矢量图、位图，80%的图像使用位图来实现，只有20%的图像使用矢量图。例如游戏角色、背景、粒子效果等全部使用位图来实现，而菜单、游戏内各种显示界面与文本则使用矢量图来实现。

3. 性能测试

为了验证上面所述，下面通过实际测试来验证矢量图与位图的cpu、内存消耗情况。引用《Flash矢量图与位图性能对比》（http://www.cnblogs.com/samen168/p/3194747.html）一文的结论：

4. Flash常用位图格式

这里不介绍flash支持的所有图像格式，也不深入介绍PNG、JPEG、JPEG-XR的原理，但会介绍他们的优缺点及适用场景，注意事项。

PNG，JPEG

Flash中常用的位图格式有PNG、JPEG。对于PNG格式的图片是保留了透明通道的图片，所以一般来说它的尺寸会比JPEG大，即使用上了PNG格式你也可以根据使用需要选择PNG图片压缩的类型（PNG8, PNG24, PNG32）。

JPEG

JPEG 是Joint Photographic Experts Group（联合图像专家小组）的缩写，是第一个国际图像压缩标准。JPEG图像压缩算法能够在提供良好的压缩性能的同时，具有比较好的重建质量，被广泛应用于图像、视频处理领域。

JPEG是一种有损压缩格式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤。尤其是使用过高的压缩比例，将使最终解压缩后恢复的图像质量明显降低，如果追求高品质图像，不宜采用过高压缩比例。但是JPEG压缩技术十分先进，它用有损压缩方式去除冗余的图像数据，在获得极高的压缩率的同时能展现十分丰富生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的图像品质。而且JPEG是一种很灵活的格式，具有调节图像质量的功能，允许用不同的压缩比例对文件进行压缩，支持多种压缩级别，压缩比率通常在10：1到40：1之间，压缩比越大，品质就越低；相反地，品质就越高。

优点：

l 摄影作品或写实作品支持高级压缩。

l 利用可变的压缩比可以控制文件大小。

l 支持交错（对于渐近式JPEG文件）。

缺点：有损耗压缩会使原始图片数据质量下降。

PNG

便携式网络图形（Portable Network Graphics，PNG）是一种无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。根据色彩深度PNG分为：PNG8、PNG24、PNG32：

PNG8：8位的png最多支持256（2的8次方）种颜色，8位的png其实8支持不透明、索引透明、alpha透明。

PNG24：支持2的24次方种颜色，表现为不透明（Flash中png24表现为不透明，并不是说png24这种格式不支持）。

PNG32：支持2的32次方种颜色，32位是我们最常使用的格式，它是在png在24位的png基础上增加了8位的透明信息，支持不同程度的半透效果。

通常，PNG 8 位和 PNG 32 位之间的视觉差异很小，但是PNG 32 位文件大小是 PNG 8 位文件大小的 4 倍，所以在视觉要求不是特别精细的地方建议使用PNG8。

总结（PNG与JPEG的选择）

当图像不需要任何透明部分时，用JPEG，因为你可以通过外部程序，如Photoshop来处理凸显，而这要比在Flash内部处理具有更低的压缩率及更好的图像质量。由于它们缺少透明通道，所以也会降低Flash渲染器的开销。而当你需要图像的透明通道时，PNG格式则是不二之选，但是文件尺寸及所占用的运算能力也会变大。

多数项目会混合使用这两种格式。任何资源，只要其可以作为一个矩形形状来使用，并且不包含任何透明通道，那么就对其使用JPEG格式吧。这样的资源包含以下几种：

l 游戏与菜单界面背景

l 在位图填充中被用作材质的图像

l 遮罩形状所覆盖的图像

l 在游戏中用作某种图像特性额覆盖层

便携式网络图像（PNG）是表现空白透明效果的不二之选，且更适用于表现较小的游戏元素，这些元素包含以下几种：

l 游戏角色，特别是那些运动角色

l 需要与背景分离的游戏内元素

l 用户界面元素，比如按钮及其他不规则形状

l 有着细致边线的图像，这种图像需要达到像素完美的精确性（JPEG有变模糊的倾向，或者说图像像素细节很模糊）

JPEG-XR

Flashplayer 11开始支持JPEG-XR，JPEG XR是一款可以实现高动态范围图像编码，而且在压缩与解压时只需要整数运算的图像编解码器。它支持单色、RGB、CMYK、甚至支持16位无符号整数或者32位定点或者浮点数表示的多通道彩色，并且它还支持RGBE Radiance。它可以选择嵌入ICC彩色profile以实现不同设备上的色彩一致性。Alpha通道可以表示透明，同时支持EXIF、XMP 元数据格式。这种格式还支持在一个文件中包含多幅图像。

l 与PNG相比，它能够大大减少图片的大小，同时保证质量和支持透明度；

l 与JPEG相比，这种格式支持透明通道。

一句话，JPEG-XR结合了JPEG与PNG的优点。

位图压缩

当你导入一个已经用另一个程序优化过的JPEG文件时，Flash默认情况下会照其原样来使用它，PNG图像却不一样。如果图像是256色或更少的颜色，Flash会自动将其降低为8位的PNG文件，文件尺寸会立刻降低，然而其品质无损（也称无损压缩）。如果图像包含的颜色超出了256色，Flash就会在编译该文件时将其转为Flash所自有的JPEG压缩格式。

压缩率可以通过在文档中通过“发布设置”来进行控制，默认是80%，并且这是针对每个图像进行压缩的。对于一段时间内在屏幕上保持静止的图像来说，我建议将其设置为70%~80%，这样可以保证其品质不会降低太多。而对于用在快速运动的动画序列中的图像，比如角色动画，我建议将其压缩率降低为50%，因为你根本注意不到由此产生的品质下降。事实上，当每秒30帧时，人眼是察觉不到足够多细节的，JPEG经压缩后形成的自然模糊效果就会带来良好的运动模糊感觉。

平滑

默认情况下，当你在舞台上对图像施加任何方式的变形是（包括倾斜、缩放甚至旋转——一任何不能被90整除的角度进行旋转），Flash都不会重新渲染它们。由此导致在运动较慢的图像上产生锯齿效果。如果游戏是需要时不时地旋转一些图像或者调整其尺寸，那么你可以考在“位图属性”面板中选中“允许平滑”选项。尽管这样做后图像看上去边缘更为平滑，但却是会更耗费CPU，所以要少用这个选项。

内存占用

一张图像占用多少内存只取决于图像的尺寸，二与图像文件的类型和图像压缩无关。通用尺寸下，一个压缩比很大的JPG文件盒一个细节丰富的PNG文件，被Flash调取后所占用的内存是一样的。占用内存大小计算公式如下：

位图所占内存（字节） = 位图宽度 x 位图高度 x 4

例如200x400像素的图片占用内存大小为320000字节，除以1024转换成KB则是312.5KB。注意，内存占用不等于你需要下载的文件大小，如下载200x400像素的图片文件大小可能只有几十KB。

性能比较（PNG、JPEG、JPEG-XR）

有人在不考虑文件size的情况下面（文件size会直接影响到网络加载时间），对比PNG、JPEG、JPEG-XR的压缩与解压缩性能（http://jacksondunstan.com/articles/2117），得出以下结论（数据不一定非常准确，测试数据取决于图片，但具有指导意义）：

测试	解压缩时间	压缩时间
PNG	496	5025
PNG（fastCompression）	496	246
JPEG（q = 1时）	147	224
JPEG（Q = 50）	147	225
JPEG（Q = 100）	147	239
JPEG-XR（q = 1时）	655	1276
JPEG-XR（Q = 50）	655	1050
JPEG-XR（Q = 100）	655	1042