使用命令行工具提升cocos2d-x开发效率(一)之TexturePacker篇

转自：/article/6990613.html

[原创]使用命令行工具提升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，这个其实完全可以写得更智能话写，这就留给各位去发挥了。
感谢大家的收看～ 如果有问题可以留言或者私信我，我会尽量回覆大家。
最近刚开始专门写博客，如果表达的不好，或者有其他方面问题，也请大家多提宝贵意见：）

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