序

在前端调用图片时，可能会使用到雪碧图(Sprite)。对于雪碧图，有一个配套的纹理贴图集也是比较方便工程师进行开发工作的。

纹理贴图集是一个 JSON 数据文件，其中包含子图像在雪碧图上的位置和大小。如果你使用纹理贴图集，你只需要知道子图像的名字。您可以按任意顺序排列雪碧图，JSON 文件将为您跟踪它们的大小和位置。

TexturePacker 介绍

本人是在学习 pixi 的路上遇到了纹理贴图集，本文将介绍纹理贴图集的一款生成工具：TexturePacker

此软件有免费使用的功能，但是一些功能需要进行付费使用。如果没有闲钱使用基础功能也就足够了。（俺也一样）

简单的说 TexturePacker 功能就是将多张图片整合成一张大图的工具，并且生成一个图片元素相应位置和大小的 json 文件。当然，这里提一下，其实在 Photoshop 当中也完全可以做到这一点的，只不过使用 TexturePackerg 更加快捷。

TexturePacker 官网：https://www.codeandweb.com/texturepacker

这款软件也主要是为了游戏的纹理贴图集的制作而产生的，下图中支持的教程前面大都是比较出名的游戏开发引擎或者动作库。

TexturePacker 简单使用

因为我是为了 pixi.js 来使用的，所以直接看 PixiJs 的教程就可以啦。

官网上的教程是英文的，但是其实比较简洁，大家翻译工具翻译一下也不会有什么出错。

下面就直接拿我安装下载的 TexturePacker5.5 来举例使用一下了

准备工作

首先准备好需要合成的精灵图片，这里我是从爱给网https://www.aigei.com/上找的图片，找下来后我进行了一下处理，下面是我处理好的图片：

精灵场景部分

人物动作

主要人物

需要合成的三张图片找齐了，那么就打开 TexturePacker 来进行合成吧

添加精灵和生成

可以从本地将图片选择，TexturePackerh 会自动按照适合的比例来放置这些精灵，将精灵组合到一张图片上的。

选择精灵

在右侧的输出文件选项中，可以选择你需要的配置，我使用的是 pixi.js。当然其他的像 unity 这些软件的配置也都有。输出文件格式是 json 格式。之后点击发布精灵表即可。

配置输出文件

生成的纹理集

纹理贴图集 json

在 json 中，除了有生成的 dad.png 之外，还将合成前的子图像名称也记录在内，这些子图像中都称为帧frame。

了这些数据，您就不需要知道每个子图像在雪碧图中的大小和位置。你只需要知道sprite精灵的帧id（frame id），然后在 pixi.js 的使用过程中，根据帧 id 调用这些精灵来进行布局即可。

又一次新的工具和知识 get 了！结束结束，纹理打包器 TexturePacker 简单使用就是这样的，如果想要彻底学习，还是官网吧，虽然是英文的︿(￣︶￣)︿