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