Cocos2d-x优化中图片优化

在2D游戏里，图片无疑是最为重要的资源文件。它会被加载到内存中转换为纹理，再由GPU贴在精灵之上进行渲染。图片能够优化的方面有很多，包括图片格式、拼图和纹理格式等。下面我们将从这几个方面详细介绍图片和纹理的优化。

一、选择图片格式

要确定选择何种图片格式，我们需要先了解目前移动平台所使用的图片文件格式，以及Cocos2d-x对这些格式的支持情况。虽然图片格式众多，但在移动平台主要推荐使用PNG，JPG也可考虑，其他文件格式最好转化为PNG格式。下面来了解一下它们的特点。

1. PNG文件

PNG文件格式的设计目的是替代GIF和TIFF文件格式，它是一种位图存储格式。PNG采用无损压缩，支持Alpha通道数据以实现透明效果，但不支持动画。PNG可以保存高保真的较复杂图像，不过文件相对较大。PNG格式具体又分为PNG8和PNG24，后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

2. JPG文件

JPG全名是JPEG，它以24位颜色存储单个位图图形。JPG是与平台无关的格式，支持最高级别的压缩，压缩比率可高达100:1，但这种压缩是以牺牲图像质量为代价的，目的是换取更小的文件大小。JPG不支持透明，比较适合摄影图像或写实图像作品，因为这类图像颜色丰富。而对于所含颜色很少、具有大块颜色相近区域或亮度差异十分明显的较简单图片，JPG就不太适用了。

3. 格式选择分析

很多人认为JPG文件小，PNG文件大，加载到内存纹理时JPG占用更少的内存，这种观点是错误的！纹理和图片是两个不同的概念，如果把纹理比作野营帐篷，那么图片格式就是收纳折叠后的帐篷袋子，袋子大小并不能代表帐篷搭起来后的大小。特别是在Cocos2d-x平台，JPG加载后会先被转化为PNG格式，然后再转换为纹理保存在内存中，这无形中增加了对JPG文件的解码时间。因此，无论JPG在其他平台表现如何，在移动平台下它都无法与PNG相媲美。

二、拼图

大家可能会有疑问，为什么要把场景中的小图片都拼接成一个大图片呢？之前在使用精灵表时简单提及过，这一节详细介绍其原因。

1. 拼图的优势

如果把多个小图拼接成一个大图（纹理图或精灵表），能够减少IO操作。使用散图时，每次都要针对一个图创建精灵并添加到纹理缓存，若频繁且大量创建，对CPU和内存的开销很高。而使用大图，则可以一次性创建精灵帧缓存，并将它们的纹理添加到纹理缓存中，能明显提高效率。

2. 拼图的注意事项

在进行图片拼接时，若能满足用户对保真度的要求，大图越小越好。我们可以通过TexturePacker等纹理拼图工具，设置纹理支持NPOT。关于这些工具的使用，大家可以参考《Cocos2d-x实战（卷Ⅳ）：工具详解》。

3. NPOT介绍

NPOT是“non power of two”的缩写，意思是非2的N次幂。在OpenGL ES1.1时，纹理图片要求是2的N次幂（即POT），否则纹理无法创建。在POT要求下，使用纹理工具拼接成的大图可能会有很多空白区域，造成浪费，同时也会增加图片大小。例如，某些拼接后的大图右下角会有空白区域，图片大小可能达到2048KB。

而在OpenGL ES2.0之后，支持了NPOT。我们无需再为图片是否为2的N次幂而烦恼。采用NPOT拼图，整个图片基本没有大的空白区域，能充分利用图片空间。比如，采用NPOT拼接的图片大小可能是1822KB，相比之前节省了200KB，这已经是相当可观的优化成果了。