使用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版本中的直接渲染），所以在生成纹理的时候需要注意一下:

 
  
以上代码只是添加了渲染纹理的命令，真正渲染完成这张纹理是在下一帧的时候，所以添加一个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中的配置：
 
  
 
  
如上所以，除了frame名称，其它字段均相同，这样的图片保存一张即可。
 
  
那么如何实现呢？
 既然除了名称不一样，其他都一样，我们就用其他数据生成一个key，每保存一个frame，就把它的key缓存者，以后发现有相同key的直接舍弃。
 
  
 
  
 
  
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解包出来的小图。