[原创]使用命令行工具提高cocos2d-x开发效率(一)之TexturePacker篇

TexturePacker是一个经常使用的制做sprite sheet的工具，它提供了不少实用的功能。

通常咱们制做sprite sheet都是使用他的gui版本，纯手工操做，就像下面这张图示的同样。

刚开始咱们的项目也是使用这种方式，但后来发现这种方式在开发中有很大的问题。随着图片的增多，sprite sheet会愈来愈多，为了生成这些sprite sheet须要作不少重复的手工劳动，再考虑到给Android平台打包的sprite sheet配置和iOS的不一样，还有包括图片变动，配置优化等状况，算下来光打包sprite sheet就须要巨大的工做量，这还不考虑因为手工误操做形成的各类问题。

因而我就考虑，如何尽量地减小打包sprite sheet的工做量，提升开发的效率。后来经过搜索，看到raywenderlich上一篇关于使用TexturePacker的文章，里面比较详细地介绍了TexturePacker的用法，特别还提到了它的命令行工具的使用以及这个工具和xcode的集成，这给了我想要的答案。

接下来说一下我在项目中如何使用这个TexturePacker的命令行工具以及实用它的一些经验。

---------------------------------------正式开始的分割线-----------------------------------------

具体下载和安装TexturePacker以及它命令行工具的方法就不说了，上面提到的那篇文章里有较详细的说明。一些准备就绪后，咱们能够在命令行里执行texturepacker命令，正常状况下你将会看到texturepacker的各类参数以及使用方法的说明，以下图：

接下来为了方便说明，咱们新建一个测试工程foo，这里以quick-cocos2d-x-2.2.1-rc引擎建立的工程为例，建立好后目录结构以下图：

咱们须要一个目录去保存全部原始的（未打到sprite sheet里的）图片，这里咱们新建个目录叫originalImages，而后找些图片，丢进这个目录，并将他们分类到不一样的文件夹，接着咱们再建立一个目录，用来存放咱们打包sprite sheet的脚本工具，咱们起名叫tools，而后，咱们再建立一个目录spriteSheets，用于存放打好的图片，最后，通常咱们会将工程用到的图片存放到res/images目录里面，因此为了清楚，再建立一个这个文件夹，最终目录结构以下图所示：

接下来我说一下思路，咱们的脚本工具存放在tools文件夹中，运行以后会去遍历originalImages这个目录下的全部文件夹，而后将每一个文件夹中的图片打包为一个sprite sheet，这个sprite sheet名字与该文件夹的名字相同，接着将打包后的sprite sheet文件复制两份，一份存入spriteSheets目录中，另外一份拷贝到咱们程序使用图片的目录。

举例来讲，当我运行脚本，会生成三份sprite sheet,分别是button.png,button.plist,checkBox.png,checkBox.plist,common.png,common.plist，他们分别会存放入spriteSheets目录和res目录下的images目录中（通常res目录下的images目录用来存放程序中用到的图片）。

---------------------------------------渐入佳境的分割线------------------------------------------

好的，一切准备就绪，咱们开始说说这个脚本究竟要如何编写。

首先咱们须要大概了解一下texturepacker的一些经常使用参数。

--format

指定sprite sheet的格式，默认是cocos2d，作cocos2d-x项目的话，就选cocos2d就行。可选的选项以下：

--texture-format

很是重要的一个属性，指定texture的格式。若是咱们作iOS上的游戏，通常都会使用PVR，由于这个format的texture是专门为苹果iPhone和iPad的图形处理器优化的，而Android由于设备硬件多种多样，因此咱们通常可能会选用png格式的，感兴趣的朋友能够本身搜索一下相关内容。这个参数若是不指定值的话texturepacker会尝试去根据sprite sheet的命名来自动选择一个合适的format。具体的选项以下：

--data

指定data文件的名字，也就是plist文件的名字

--sheet

sprite sheet文件的名字

--enable-rotation

是否开启旋转。通常咱们会开启，为了更有效率的将散图打在一块儿。

--scale

在建立sprite sheet以前为全部散图作一个调整scale的操做，好比，若是是0.5，那么就把原始图都压缩通常大小，再存入sprite sheet中

--shape-padding

设置每一个图片在sprite sheet中的间隔，默认是2

--max-size

sprite sheet的最大尺寸，你不可能将全部图片都打入到一张sprite sheet里，由于没有设备能支持这样的sprite sheet，因而须要限定大小:)。

--opt

这个是很重要的一个属性，决定了sprite sheet的像素格式，这个属性能够很大程序改变sprite sheet所占的内存。经常使用的选项以下：

--trim

为了能在一张sprite sheet加入更多的图片，裁减掉原始图片的空白像素，可是使用的时候仍是按照图片的原始尺寸来使用。

--smart-update

智能更新，为了不重复生成相同内容的sprite sheet，texturepacker会检查现存的sprite sheet和将要生成的sprite sheet内容是否相同，若是不一样再生成新的，若是相同则不生成。

---------------------------------------激动人心的分割线------------------------------------------

好了，最后激动人心的时刻到了，咱们上脚本！（脚本写的通常，多包涵）

 1 #! /bin/bash
 2 
 3 CURRENT_DIR=`dirname $0`
 4 
 5 # input paths
 6 IMAGE_DIR=$CURRENT_DIR/../originalImages
 7 
 8 # path that game proj use
 9 GAME_IMAGE_PATH=$CURRENT_DIR/../res/images
10 
11 # temporary path to place the sprite sheets
12 OUTPUT_PATH=$CURRENT_DIR/../spriteSheets
13 OUTPUT_PATH_PVR=$OUTPUT_PATH/packagedPVR
14 OUTPUT_PATH_PNG=$OUTPUT_PATH/packagedPNG
15 
16 # path of the texture packer command line tool
17 TP=/usr/local/bin/TexturePacker
18 
19 # $1: Source Directory where the assets are located
20 # $2: Output File Name without extension
21 # $3: RGB Quality factor
22 # $4: Scale factor
23 # $5: Max-Size factor
24 # $6: Texture Type (PNG, PVR.CCZ)
25 # $7: Texture format
26 pack_textures() {
27 
28     ${TP} --smart-update \
29         --texture-format $7 \
30         --format cocos2d \
31         --data "$2".plist \
32         --sheet "$2".$6 \
33         --maxrects-heuristics best \
34         --enable-rotation \
35         --scale $4 \
36         --shape-padding 1 \
37         --max-size $5 \
38         --opt "$3" \
39         --trim \
40         $1/*.png 
41 
42 }
43 
44 # check the output path
45 
46 if [ -d $OUTPUT_PATH ];then
47     :
48 else
49     mkdir $OUTPUT_PATH
50 fi
51 
52 if [ -d $OUTPUT_PATH_PVR ]
53 then
54     :
55 else
56     mkdir $OUTPUT_PATH_PVR
57 fi
58 
59 if [ -d $OUTPUT_PATH_PNG ]
60 then
61     :
62 else
63     mkdir $OUTPUT_PATH_PNG
64 fi
65 
66 # do the job
67 for i in $IMAGE_DIR/*
68 do
69     if [ -d $i ] 
70     then
71         spriteSheetName=`basename $i`
72         pack_textures $i $OUTPUT_PATH_PNG/$spriteSheetName 'RGBA8888' 1 2048 'png' "png"
73         pack_textures $i $OUTPUT_PATH_PVR/$spriteSheetName 'RGBA8888' 1 2048 'pvr.ccz' "pvr2ccz"
74     fi
75 done
76 
77 # cp them to the game proj image path
78 
79 cp -f $OUTPUT_PATH_PVR/* $GAME_IMAGE_PATH

将脚本的内容保存到一个文件中，命名后把后缀改成command，好比我是这个样子的：

而后记得在命令行里改一下脚本的权限，最后双击一下脚本，新鲜的sprite sheets就打包出来了，若是有什么图片的改动，只须要修改originalImages这个目录下的图片，而后双击一下脚本，新的sprite sheet就生成好了，再也没有了无聊烦人的手工劳动，向TP的GUI说再见吧！是否是很爽？：）

----------------------------------------最后的分割线-----------------------------------------

最后简单说一下在脚本里咱们作的事情：

在脚本中咱们针对originalImages里面每个文件夹中的图，生成了两份sprite sheet，这两份惟一的区别是一份是pvr2ccz格式的，一份是png格式的，其余的属性都相同：像素格式RGBA8888，scale为1，最大尺寸为2048*2048。在生成完成后，将全部的sprite sheet拷贝到了spriteSheets这个文件夹，并把其中pvr格式的sprite sheet拷贝到了咱们工程使用的图片目录里。

OK，大概就是这样子，那个脚本能够根据项目具体需求去改，我写的很简单，也没加什么log，这个其实彻底能够写得更智能话写，这就留给各位去发挥了。

 

 ----------------------------------一些更新和补充----------------------------------------

最近有园子里的朋友和我交流了几个问题，我以为其中有2个挺不错的，具体交流的内容在本文的留言里面有，不过为了方便你们查阅，我把它们整理（其实主要是截图，我是有多懒=。=）了一下，整合到这个篇文章中：

问题1：来自园友 tanyongdahaoren

“

 

”

答案：

“

”

这个问题回答的比较明确，我就不过多解释了：）

（这里忍不住吐槽一下博客园的插入代码功能，在回复里面没有bash的选项不说，在文章中bash的代码明显没有按照bash的脚本着色，“/*”居然按照注释理解了，真心汗一个）

问题2：来自园友sousou123

“

 

”

这个园友主要的想法是考虑如何用TexturePacker把单张的png图片转换成pvr格式的图片。我一开始建议它用苹果官方的工具texturetool，但后来我意识到，这个texturetool相对TexturePacker有不少不方便的地方，好比它对原始图片的格式有硬性要求，必须至少知足：

• Height and width must be at least 8.
• Height and width must be a power of 2.
• Must be square (height==width)

而TexturePacker虽然能够作png到pvr转换的事情，可是毕竟设计目的是打包sprite sheet用的。

不过通过和他的讨论，最终我给出了TexturePacker的解决方案：

“

”

这段脚本所作的事情是遍历images这个文件夹下的全部png图片，而后对每一张小图片都作一次打包操做，打包后的图片格式为pvr，这就至关于对每一张图片作了一次格式的转换：从png到pvr。这个作法虽然不一样于TexturePacker的设计初衷，但毕竟是可行的，并且很方便。

这里要注意一点，咱们相对于以前打包的脚本多增长了一个参数：--size-constraints

这个参数很是关键，它决定了最终生成的sprite sheet的尺寸是否会受POT(Power Of Two)格式的限制。通常状况下咱们生成sprite sheet的尺寸都是宽高相等，而且都是2的N次方。而对咱们如今这个转换图片格式的需求，这个限制就多余了，由于咱们确定但愿原始图片多大尺寸，最终转换获得的图片就是多大尺寸，因此这里咱们设置这个参数的值为AnySize。

--size-constraints AnySize

不得不说TexturePacker这个工具的功能真的很强大，做者考虑问题很是得全面~

这个参数在GUI里面在这里：

还有一点小问题是，对于每个sprite sheet，都会须要生成一个data文件，这里咱们不须要这个data文件，因此在参数里面咱们就随便叫了一个dummy.plist：）其余的参数大家能够按需修改。

好了，更新部分就是这么多，最后感谢一下园友sousou123和tanyongdahaoren，经过解决他们的问题也让我学到了新的东西：）

 

 

 

 

 

感谢你们的收看～ 若是有问题能够留言或者私信我，我会尽可能回覆你们。

最近刚开始专门写博客，若是表达的很差，或者有其余方面问题，也请你们多提宝贵意见：）

 

最最后，原创文章，转载请注明出处，谢谢：）