SpriteSheet

免责声明：本博客的所有原创文章，均有time_anime精心写作，供学习交流使用，切勿进行商业传播。同时，转载请不要移除本声明！

SpriteSheet精灵表单：每个游戏开发者都应该知道的基本概念。

看上图的游戏场景，它由不同的图形对象组成，有花、树、云朵和PixelGuy（就是那个小孩了）。所有这些可移动的游戏对象被称作精灵。

让我们看看一个特别的精灵，这个精灵是有着确定的像素宽度和高度的矩形图片。大小为140X140像素。如果颜色深度是32bit(r g b alpha),那么将占用140*140*4B = 76KB。

For eachpixel, some amount of memory is required to store its color. The exact amountdepends on the color depth - which is by default 32bit - and thus consumes 4bytes. So the complete memory usage of PixelGuy is 140x140x4 which is 76kb.

Dependingon your graphics hardware you might only be able to use particular sizes foryour sprites - e.g. a power of 2 or even worse - squared sprites.

For this a sprite must be padded with additional unused pixels to match the hardware‘s constraints. To meet this requirement Pixel Guy‘s sprite must be extended to 256x256 pixels. This increases the memory usage - now consuming 256kb - which is more than three times the size of the original sprite.

当适应不同的屏幕尺寸时，比如上述的图片需要扩大到256*256像素时，就必须增加一些无效的限度进行填充，整个内存占用将是256*256*4B=256KB>3 * 76KB。

Not muchfor a single sprite I must admit - but imagine creating a game with manyobjects, characters and animation phases. You might easily end up with hundredsof sprites - each of them wasting precious resources.

当有大量上述的对象存在时，那么浪费的资源是巨大的。

But what if youcould use the wasted memory after all? Imagine packing another sprite into thatspace!

The result is calleda sprite sheet!

Now only thecomplete sheet has to meet the hardware constraints. As you see the memoryusage is now much lower than it would be using individual sprites.

Butthere's still more we can do! Let‘s squeeze out the transparent parts of thesprites, packing them even tighter. In our example we have now reduced thememory by another 50%!

But wait!There's even more we can do - if memory is scarce. In a standard 32bit colorformat each color channel and the transparency is represented by 8 bits -totaling 4 bytes for each pixel. We can reduce the color depth to 16bit bysqueezing out some colors. The quality of the reduction can be improved byapplying dithering. The result reduces memory usage by 50%!

In thefirst part, you saw how sprite sheets can help you reduce memory usage for yourgame. In the second part, you are going to learn how the performance of yourgame can be increased with sprite sheets.

使用spritesheet，把许多图片合成为一张大图片，可以节省内存，进一步将32bit的颜色深度，在要求不高的情况下，转化为16bit的颜色深度，这样内存又将节省掉一半。 

补充：

计算机表示颜色也是用二进制。16位色的发色总数是65536色，也就是2的16次方；24位色被称为真彩色，它可以达到人眼分辨的极限，发色数是1677万多色，也就是2的24次方。但32位色就并非是2的32次方的发色数，它其实也是1677万多色，不过它增加了256阶颜色的灰度，为了方便称呼，就规定它为32位色。少量显卡能达到36位色，它是24位发色数再加512阶颜色灰度。

sprite-sheet 视频学习

https://www.codeandweb.com/what-is-a-sprite-sheet

----

例如：炮炮兵扭腰动画。它由8个动画帧组成（也就是8个图片）。我们可以基于这些单个的图片来创建动画。

这样做不是最优化的，浪费了大量的内存空间。往下看！

在cocos2d里面，还有另一种更加高效的方式来创建动画--那就是使用spritesheet。

每张图片有它的像素（pixel）大小，每个像素点都需要额外的内存空间来存储它的color，一般颜色都是32位的，RGBA的，占了四个字节。每张图片都需要额外的颜色空间，为什么不将所有的图片合成到一个image上呢。基于这样的需求，TexturePacker工具就诞生了。

这个工具可以将这这8个图片合成到一张image上面，并生成.plist文件，这个文件说明的是图片的名字和该动画帧在这个大image（这里说的大不是说图片占的空间大啊，而是容纳了8个炮炮兵）里的位置等信息。具体大家可以自己研究一下。合成的效果如下图所示：

在加载的时候，无需对每个纹理贴图进行渲染，直接对大image渲染一次即可。

参考 

【Himi转载推荐之一】优化cocos2d/x程序的内存使用和程序大小【一】

http://xiaominghimi.blog.51cto.com/2614927/1085955/

避免一个接一个地加载PNG和JPG纹理（他们之间至少等待一帧）

cocos2d里面纹理加载分为两个阶段：1.从图片文件中创建一个UIImage对象。2.以这个创建好的UIImage对象来创建CCTexture2D对象。这意味着，当一个纹理被加载的时候，在短时候内，它会消耗两倍于它本身内存占用的内存大小。（译注：为什么只是短时间内呢?因为autoRelease pool和引用计数的关系，临时创建的UIImage对象会被回收。）

当你在一个方法体内，接二连三地加载4个纹理的时候，这个内存问题会变得更加糟糕。因为在这个方法还没结束之前，每一个纹理都会消耗两倍于它本身的内存。

我不是很确定，现在的cocos2d是否仍然如此。或者这种情况是否只适用于手工引用计数管理，或许ARC不会如此呢？我习惯于按顺序加载纹理，但是在加载下一个纹理之前要等待一帧。这将会使得任何纹理加载的消耗对内存的压力降低。因为等待一帧，引用计数会把临时的UIImage对象释放掉，减少内存压力。此外，在后续的文章中，如果你想在背景线程中按序加载纹理的话，也可以采用这种方法。