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