使用 TexturePacker 打包图片

Myth丶恋晨 2022-06-12 14:44 421阅读 0赞

### 使用 GUI 工具 ###

GUI 工具使用起来非常简单，下面只讲一下几个要注意的地方

*  如果要保存当前的工作，则要保存一个 TexturePacker 项目，这个项目是一个以 .tps 为后缀的文件
 *  添加 Sprite 有两种方式，直接添加单个 Sprite 和添加整个目录。如果添加整个目录，TexturePacker 会自动把目录下所有的图片添加进来，并且会同步资源管理器上的文件，在资源管理器上添加或删除文件，TexturePacker 都会同步刷新。第一种方式添加的 Sprite 可以直接移除，第二种方式添加的不能移除，只能在资源管理器上删除。
 *  Data file 指定导出文件的路径，如供 cocos2d-x 使用的项目，导出的文件是 plist 文件，这个路径指定的就是 plist 文件的路径。这个路径要与源路径分离开，否则导出的图片会被智能地当作源图片又加进来。
 *  Texture file 指定导出图片的路径，一般指定的导出文件的路径，这个路径也会自动生成。
 *  推荐使用智能目录这种方式来添加源图片，这样后续更新图片的时候就不需要手动修改项目。

### 使用命令行工具 ###

使用 GUI 虽然简单直接，但需要手工做很多烦琐的工作，所以学习使用命令行还是很有必要的。

#### 安装 TexturePacker 命令行工具 ####

打开 TexturePacker，点击 File 菜单栏下面的 Install Command Line Tool 菜单项；在 Mac 下会弹出安装提示框，按照提示安装即可；在 Windows 下只弹出一个提示框，提示的内容是将 TexturePacker 的安装路径添加到环境变量，所以在 Windows 下是不需要安装的，只需要设置环境变量即可。这一步需要我们手动设置，只需要将 TexturePacker 的安装路径添加到 Path 环境变量即可，比如 `Path = ...;E:/Program Filles/TexturePacker/bin`。设置完成后打开 cmd，输入 TexturePacker，没有提示找不到这个命令即表示设置完成了。

#### 使用命令行打开 tps 文件 ####

第一种方式是使用命令行来运行 tps 文件，这种方式的工作步骤如下  
\* 第一步，使用 GUI 工具来创建项目，添加精灵，然后设置导出选项，导出文件和合图， 然后保存项目为 tps 文件；添加精灵要使用智能目录的方式。  
\* 资源有变动时在资源管理器上添加或删除图片。  
\* 打开命令行，输入`TexturePacker (source.tps)`，即可自动运行 tps 文件，并重新导出文件和合图。

这种方式也比较简单，其实只使用一句命令，以替代打开 TexturePacker GUI 工具，点击 Publish sprite sheet 这两个步骤，还是在效率上有一定提升的。缺点也很明显，首先一个 tps 项目只对应一张合图，如果要导出多张合图，则需要手动创建多个 tps 项目，然后多次输入 `TexturePacker (source.tps)` 来导出多张合图。其次，手动创建项目也要做很多工作，虽然省略了后面更新资源的手工工作，但第一次导出要做的工作也不少，因此这种方式其实算不上脚本自动化，只是单纯地偷了个懒而已。

#### 编写 bat 脚本 ####

针对上面讲到的第一个问题，我们可以编写一个脚本来批量执行命令，Windows 下是 bat 脚本，Linux 下则编写 shell 脚本。脚本编写很简单，就是把上面几个命令放在一个，比如有两个项目 a.tps 和 b.tps，它们和脚本文件放在同修目录下，则脚本内容

TexturePacker a.tps
    TexturePacker b.tps

这种方式是第一种方式的改进，解决了多个项目重复输入命令的问题，但没有解决第二个问题，即第一次导出仍然需要手动来创建项目。到目录为止，我们做的工作其实很少，就是创建一个脚本，然后输入很少的几个命令；但就是这么简单的操作就可以减少很多的手工工作，可见自动化、智能化是多么的了不起。

#### 编写真正的脚本 ####

最后这种方式才是真正的纯命令操作，即不需要手动创建 tps 项目，准确地说是不需要创建 tps 项目，整个工作过程不需要 GUI 工具的参与。我们只需要编写一个脚本，然后在脚本中指定要打包的源图片，打包方式，导出文件和合图的路径，然后执行脚本即可完成整个打包工作。如果需要打包多个合图，修改脚本内容即可。下面是一个 bat 脚本的示例

TexturePacker ^
    --format cocos2d-x ^ --texture-format png ^ --data res/c.plist ^ --sheet res/c.png ^ --opt RGBA8888 ^ --max-width 512 ^ --max-height 1024 ^ --padding 2 ^ sprite/DoomShroom

这个脚本把当前目录的子目录 sprite 下面的所有图片进行打包，然后导出文件 c.plist 和合图 c.png 放在当前目录的子目录 res 下。

##### 基础参数 #####

*  ***–format*** 指定使用平台
 *  ***–texture-format*** 指定导出的图片格式
 *  ***–data*** 指定导出的文件名
 *  ***–sheet*** 指定导出的合图名
 *  ***—opt*** 指定颜色格式，RGBA8888 是指每个像素的 RGBA 各用一个字节即 8 位来保存，共需要 4 个字节
 *  最后指定源图片的路径

##### 指定大小 #####

*  ***–width*** 指定宽度
 *  ***–height*** 指定高度
 *  ***–size-constraints*** 指定大小模式，取值范围包括 OPT，AnySize 和 WordAligned；OPT 是以 2 的 n 次方计算最适合的大小，AnySize 和 WordAligned 是以任意大小计算最适合的大小
 *  ***–max-width*** 指定最大宽度
 *  ***–max-height*** 指定最大高度
 *  ***–max-size*** 指定最大大小，包括宽高

##### 间隔和旋转 #####

*  ***–shape-padding*** 指定每张图片之间的间隔
 *  ***–border-padding*** 指定与边界的间隔
 *  ***–padding*** 指定图片之间和图片与边界之间的间隔
 *  ***–enable-rotation*** 可以旋转
 *  ***–disable-rotation*** 不可以旋转

上面写的是 bat，也可以写 shell 脚本，命令都是差不多的，只是有些写法不一样而已。由于是在 windows 下写 shell 脚本，所以和 linux 下规范的写法有些区别。

#!/bin/sh 
    cd ..
    
    echo "building..."
    # create assets
    TexturePacker --smart-update \
        --format cocos2d \
        --texture-format png\
        --data Resources/doom.plist \
        --sheet Resources/doom.png \
        --opt RGBA4444 \
        $(pwd)"/DoomShroom"
    
    exit 0

这个脚本是对当前目录的父目录下的子目录 DoomShroom 下的所有图片进行打包，然后导出文件 doom.plist 和合图 doom.png，放在父目录下的子目录 Resources 下。其它参数和上面讲的一样。在 windows 下运行 shell 脚本，可以安装类 unix 模拟环境 cygwin，也可以使用其它的命令行，比如 git bash 自带 linux 模拟环境，因此直接在 git bash 下执行 linux 命令和执行 shell 脚本也是没问题的。如果一个命令太长需要换行来写的话，可以使用命令换行符，bat 使用的是 ^，shell 使用的是 \\，注意与前面的命令之间要留一个空格。