使用cocos2d-x制作 Texture unpacker

没错，就是unpacker。
在大多数游戏包里面，可以找到很多纹理图集，他们基本上是用texture packer制作的，有plist文件和png图片组成。
如果原来的小图比较少，倒是可以自己在plist里面找名字，如果小图有几百张，那真的会找疯掉。所以今天就用cocos2d-x引擎制作了一个将纹理大图解包成一张张小图的工具。

1. 解析plist文件

cocos2d-x引擎中实现了解析plist纹理的逻辑，SpriteFrameCache类。可以看到SpriteFrameCache解析plist后，使用Map<std::string,SpriteFrame*>::_spriteFrames存放这些小图。既然小图在这里面，那么我们将他们保存到文件中不就可以了吗~

SpriteFrameCache类没有提供获取_spriteFrames的接口，那么我们更改一下SpriteFrameCache类，提供一个获取该成员的接口即可：

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">const <span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">Map</span><span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;"><</span>std<span class="hljs-tag" style="color: rgb(0,102,102); Box-sizing: border-Box;">::string</span>,SpriteFrame<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">*>&</span> SpriteFrameCache<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::getSpriteframes</span>()
{
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> _spriteFrames;
}</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,221,221); list-style: none; text-align: right; background-color: rgb(238,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li></ul>

2. 生成图片

从SpriteFrameCache中获取到的是SpriteFrame，SpriteFrame是不能直接保存的，所以我们需要将它渲染到一张纹理上，再保存。

1) 将SpriteFrame渲染成一张纹理

由于在cocos3.x版本中渲染方式已经和2.x版本中的方式不一样了（使用渲染命令，而非2.x版本中的直接渲染），所以在生成纹理的时候需要注意一下:

Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Sprite<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">*</span> pSp <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> Sprite<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::createWithSpriteFrame</span>(pSpriteFrame <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">/*one sprite frame*/</span>);
RenderTexture<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">*</span> texture <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> RenderTexture<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::create</span>(pSp<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>getContentSize()<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>width,pSp<span class="hljs-subst" style="color: rgb(0,102); Box-sizing: border-Box;">.</span>height);
texture<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>setName(m_savePath <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">+</span> tempBuf);
texture<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>begin();
pSp<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>setPosition(pSp<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>getContentSize()/<span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">2</span>); <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//--- be careful</span>
pSp<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>visit();
texture<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>end();</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li></ul>

以上代码只是添加了渲染纹理的命令，真正渲染完成这张纹理是在下一帧的时候，所以添加一个schedule，在下一帧将这个texture保存为图片。

2) 保存为图片

<code class="hljs mel has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Image* <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">image</span> = texture->newImage(true);  <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//frame渲染出的一个texture</span>
<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> (<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">image</span>)
{
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">image</span>->saveToFile(<span class="hljs-string" style="color: rgb(0,136,0); Box-sizing: border-Box;">"filename.png"</span>,false);
}
CC_SAFE_DELETE(<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">image</span>);</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li></ul>

其实RenderTexture类提供了saveToFile的接口，为什么没有直接调用？因为该接口会将图片保存在doc目录下，我想在win32上把它保存在其他磁盘。

3. 除去无效图片

由于打纹理图集的时候，添加了一下加密操作，这样会导致plist文件里面解析出来会有很多无效图片（如：宽高只有1像素，多张完全一样的图片），明明有效图片只有10多张，解析出来后有几十张

1) 去除宽高只有1像素的frame

plist中的配置：

<code class="hljs handlebars has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="xml" style="Box-sizing: border-Box;"><span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;"><<span class="hljs-title" style="Box-sizing: border-Box; color: rgb(0,136);">key</span>></span>1002_effup/0000<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;"></<span class="hljs-title" style="Box-sizing: border-Box; color: rgb(0,136);">key</span>></span>
<span class="hljs-tag" style="color: rgb(0,136);">dict</span>></span>
    <span class="hljs-tag" style="color: rgb(0,136);">key</span>></span>frame<span class="hljs-tag" style="color: rgb(0,136);">key</span>></span>
    <span class="hljs-tag" style="color: rgb(0,136);">string</span>></span></span><span class="hljs-expression" style="Box-sizing: border-Box;">{{440,56},{1,1}}</span><span class="xml" style="Box-sizing: border-Box;"><span class="hljs-tag" style="color: rgb(0,136);">string</span>></span>
    <span class="hljs-tag" style="color: rgb(0,136);">key</span>></span>offset<span class="hljs-tag" style="color: rgb(0,136);">string</span>></span>{-479.5,319.5}<span class="hljs-tag" style="color: rgb(0,136);">key</span>></span>rotated<span class="hljs-tag" style="color: rgb(0,136);">false</span>/></span>
    <span class="hljs-tag" style="color: rgb(0,136);">key</span>></span>sourceColorRect<span class="hljs-tag" style="color: rgb(0,136);">string</span>></span></span><span class="hljs-expression" style="Box-sizing: border-Box;">{{0,0},136);">key</span>></span>sourceSize<span class="hljs-tag" style="color: rgb(0,136);">string</span>></span>{960,640}<span class="hljs-tag" style="color: rgb(0,136);">string</span>></span>
<span class="hljs-tag" style="color: rgb(0,136);">dict</span>></span>
<span class="hljs-tag" style="color: rgb(0,136);">key</span>></span>1002_effup/0001<span class="hljs-tag" style="color: rgb(0,136);">dict</span>></span></span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li><li style="Box-sizing: border-Box; padding: 0px 5px;">18</li><li style="Box-sizing: border-Box; padding: 0px 5px;">19</li><li style="Box-sizing: border-Box; padding: 0px 5px;">20</li><li style="Box-sizing: border-Box; padding: 0px 5px;">21</li><li style="Box-sizing: border-Box; padding: 0px 5px;">22</li><li style="Box-sizing: border-Box; padding: 0px 5px;">23</li><li style="Box-sizing: border-Box; padding: 0px 5px;">24</li><li style="Box-sizing: border-Box; padding: 0px 5px;">25</li><li style="Box-sizing: border-Box; padding: 0px 5px;">26</li></ul>

如上这两个frame宽高都是1像素，解析出来是无用的，所以需要剔除。

2) 去除重复的图片

plist中的配置：

Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',136);">key</span>></span>1002_effup/0010<span class="hljs-tag" style="color: rgb(0,{102,88}}</span><span class="xml" style="Box-sizing: border-Box;"><span class="hljs-tag" style="color: rgb(0,136);">string</span>></span>{5,7}<span class="hljs-tag" style="color: rgb(0,136);">string</span>></span></span><span class="hljs-expression" style="Box-sizing: border-Box;">{{363,355},{212,50}}</span><span class="xml" style="Box-sizing: border-Box;"><span class="hljs-tag" style="color: rgb(0,136);">key</span>></span>1002_effup/0093<span class="hljs-tag" style="color: rgb(0,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li><li style="Box-sizing: border-Box; padding: 0px 5px;">18</li><li style="Box-sizing: border-Box; padding: 0px 5px;">19</li><li style="Box-sizing: border-Box; padding: 0px 5px;">20</li><li style="Box-sizing: border-Box; padding: 0px 5px;">21</li><li style="Box-sizing: border-Box; padding: 0px 5px;">22</li><li style="Box-sizing: border-Box; padding: 0px 5px;">23</li><li style="Box-sizing: border-Box; padding: 0px 5px;">24</li><li style="Box-sizing: border-Box; padding: 0px 5px;">25</li><li style="Box-sizing: border-Box; padding: 0px 5px;">26</li></ul>

如上所以，除了frame名称，其它字段均相同，这样的图片保存一张即可。

那么如何实现呢？
既然除了名称不一样，其他都一样，我们就用其他数据生成一个key，每保存一个frame，就把它的key缓存者，以后发现有相同key的直接舍弃。

Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-built_in" style="color: rgb(102,0); Box-sizing: border-Box;">*></span> framesMap <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> SpriteFrameCache<span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::getInstance</span>()<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>getSpriteframes();
for (<span class="hljs-built_in" style="color: rgb(102,0); Box-sizing: border-Box;">*></span><span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">::const_iterator</span> itor <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> framesMap<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>begin(); itor <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">!=</span> framesMap<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>end(); <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">++</span>itor)
{
    SpriteFrame<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">*</span> frame <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> itor<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>second;
    GLuint textName <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span> frame<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>getTexture()<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>getName();
    const Rect<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">&</span> rect <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>getRectInPixels();
    bool isRotate <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>isRotated();
    const Vec2<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">&</span> offset <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>getOffsetInPixels();
    const Size<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">&</span> origSize <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>getOriginalSizeInPixels();

    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// 去掉 过小的无效图片 （加密后?的plist会生成很多无效图片）</span>
    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// #define INVALID_IMAGE_WIDTH 2</span>
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> (rect<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>size<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>width <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;"><=</span> INVALID_IMAGE_WIDTH <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">&&</span> rect<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>height <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;"><=</span> INVALID_IMAGE_HEIGHT)
    {
        continue;
    }

    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// key --- 去掉重复的图片 （加密后?的plist会有很多张重复图片）</span>
    sprintf(fileKeyBuf,<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"%d_%.1f%.1f%.1f%.1f_%s_%.1f%.1f_%.1f%.1f"</span>,textName,rect<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>origin<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>x,102); Box-sizing: border-Box;">.</span>y,102); Box-sizing: border-Box;">.</span>height,isRotate <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">?</span> <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"1"</span> : <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"0"</span>,offset<span class="hljs-built_in" style="color: rgb(102,origSize<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>height);
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> (m_textureList<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>find(fileKeyBuf) <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">!=</span> m_textureList<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>end())
    {
        continue;
    }

    Sprite<span class="hljs-subst" style="color: rgb(0,102); Box-sizing: border-Box;">::createWithSpriteFrame</span>(itor<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>second);
    RenderTexture<span class="hljs-subst" style="color: rgb(0,102); Box-sizing: border-Box;">.</span>height);
    texture<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>setName(itor<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>first <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">+</span> <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">".png"</span>);
    texture<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>begin();
    pSp<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">//--- be careful</span>
    pSp<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>visit();
    texture<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">-></span>end();
    m_textureList<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>insert(fileKeyBuf,texture);
    <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">++</span>m_iFramesCount;
}</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li><li style="Box-sizing: border-Box; padding: 0px 5px;">18</li><li style="Box-sizing: border-Box; padding: 0px 5px;">19</li><li style="Box-sizing: border-Box; padding: 0px 5px;">20</li><li style="Box-sizing: border-Box; padding: 0px 5px;">21</li><li style="Box-sizing: border-Box; padding: 0px 5px;">22</li><li style="Box-sizing: border-Box; padding: 0px 5px;">23</li><li style="Box-sizing: border-Box; padding: 0px 5px;">24</li><li style="Box-sizing: border-Box; padding: 0px 5px;">25</li><li style="Box-sizing: border-Box; padding: 0px 5px;">26</li><li style="Box-sizing: border-Box; padding: 0px 5px;">27</li><li style="Box-sizing: border-Box; padding: 0px 5px;">28</li><li style="Box-sizing: border-Box; padding: 0px 5px;">29</li><li style="Box-sizing: border-Box; padding: 0px 5px;">30</li><li style="Box-sizing: border-Box; padding: 0px 5px;">31</li><li style="Box-sizing: border-Box; padding: 0px 5px;">32</li><li style="Box-sizing: border-Box; padding: 0px 5px;">33</li><li style="Box-sizing: border-Box; padding: 0px 5px;">34</li><li style="Box-sizing: border-Box; padding: 0px 5px;">35</li><li style="Box-sizing: border-Box; padding: 0px 5px;">36</li><li style="Box-sizing: border-Box; padding: 0px 5px;">37</li><li style="Box-sizing: border-Box; padding: 0px 5px;">38</li><li style="Box-sizing: border-Box; padding: 0px 5px;">39</li></ul>

4. 按顺序重命名

当执行完上面第三步（删除无效、冗余图片）后，保存的每一个frame会出现不连续的情况。

如：frame0001.png过后就是frame0008.png

那么我们在保存图片的时候，就要重命名每一个frame，用m_iFramesCount记录当前是第几个了，然后根据它命名即可。
需要注意的是
for (Map<std::string,SpriteFrame*>::const_iterator itor = framesMap.begin(); itor != framesMap.end(); ++itor)
遍历前要先对framesMap排序。

5. 说明

该功能已经封装为一个类，放在github上了，需要的朋友可以自己去clone一份。
https://github.com/SongCF/TextureUnpacker
使用方法：

<code class="hljs cpp has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">PlistTool *tool = <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">new</span> PlistTool();
<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">std</span>::<span class="hljs-stl_container" style="Box-sizing: border-Box;"><span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">vector</span><<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">std</span>::<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">string</span>></span> vec;
vec.push_back(<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"Enemy.plist"</span>);
vec.push_back(<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"1001_effup.plist"</span>);
tool->addUnpackList(vec);
tool->startUnpack([](){
    MessageBox(<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"unpack finished"</span>,0); Box-sizing: border-Box;">"info"</span>);
});</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li></ul>

这样就会在当前目录生成两个文件夹，存放两个plist解包出来的小图。