精灵图集生成器

精灵图集会把许多小图片，例如动画帧、图标、图块和界面部件，打包进同一张纹理，这样游戏或网页只需加载一个文件，再绘制其中的区域。本生成器把您的图片打包成一张 PNG，并写出配套的图集：Phaser 和 PixiJS 可直接加载的 TexturePacker JSON Hash 或 Array 格式的 JSON 文件，以及用于网页精灵的 CSS 类。打包在浏览器中进行，您的素材不会被上传。

使用方法

1. 拖入精灵图片，每个文件名会成为帧名。
2. 选择“紧凑”得到最小图集，“网格”用于等大的动画帧，或选择条带排列。
3. 设置间距、扩边、裁剪、2 的幂尺寸，以及允许的最大图集。
4. 下载 PNG、JSON 图集和 CSS（或三者打包为 ZIP）。

计算公式

紧凑：采用 best-short-side-fit 的 MaxRects。每个精灵放入剩余边最短的空闲矩形，空闲空间围绕它拆分，并尝试多种图集宽度以保持面积最小。网格：单元格 = 最大的精灵；列数 = ⌈√n⌉（除非另行设置）。

每个框预留 宽度 + 间距 和 高度 + 间距（再加 2 × 扩边）。裁剪会切掉完全透明的行和列；JSON 中保留 sourceSize 和 spriteSourceSize，使引擎能还原原始帧框。扩边把边缘像素向外复制，使纹理过滤时不会混入相邻的精灵。从不使用旋转，所以每一帧都是 rotated: false。

示例

两个 160 × 100 的帧以 2 px 间距按网格排列，得到 322 × 100 的图集：帧 1 在 x = 0，帧 2 在 x = 160 + 2 = 162，所以它的 CSS 是 background-position: -162px 0。扩边 1 px 时，每个单元格变为 162 × 102，图集为 326 × 102；帧 2 从 162 + 2 + 1 = 165 开始。