精灵图集只完成了一半工作。引擎还需要知道每一帧在哪里、持续多久。这个工具会把你的帧打包成网格、条带或紧凑图集，并以引擎真正能导入的格式写出这些数据：TexturePacker/Phaser JSON、Aseprite JSON、Godot 4 SpriteFrames 资源、CSS，以及 Unity 切片设置。帧会按你编号的习惯排序，所以 walk_10 排在 walk_9 之后。
精灵图集制作工具使用方法
- 一次拖入所有帧 PNG。它们会按名称自然排序，随时可以继续添加。
- 用箭头调整顺序，移除多余的帧，或者整体倒序。
- 选择布局：网格（自动或固定列数）、单行、单列，或裁掉透明边缘后紧凑打包。
- 设置帧间内边距、外边距和边缘扩展。如果目标平台需要 64、128、256 px 纹理，请打开 2 的幂尺寸。
- 在预览中检查动画并设置 FPS。
- 下载 PNG 和一个数据文件，或包含 PNG 和全部格式的 ZIP。
你能得到什么
- PNG 精灵图集，带透明度，与预览完全一致。
- Phaser / TexturePacker JSON（hash 和 array），包含裁剪偏移，紧凑打包的帧依然能对齐。
- Aseprite JSON，含帧标签和时长。
- Godot 4 SpriteFrames .tres，使用 AtlasTexture，可直接用于 AnimatedSprite2D。
- CSS 精灵，每帧一个 class 并附逐帧动画，另有 Unity 导入和切片设置。
适配哪些引擎
- Phaser 3：
this.load.atlas(key, 'sheet.png', 'sheet.json')，然后用帧名创建动画。 - Godot 4：把 .tres 放在 PNG 旁边，再指定给 AnimatedSprite2D 的 Sprite Frames。
- Unity：网格布局用设置文件中的数值按 Grid By Cell Size 切片。使用 Point 过滤并关闭压缩。
- PixiJS、Defold、Cocos、Construct：可直接或通过各自的导入器读取 TexturePacker JSON (hash)。
来自游戏开发实战的技巧
- 角色动画请用网格布局和统一尺寸的帧。引擎的网格切片和洋葱皮工具都默认这种格式。
- 对于包含大量不同尺寸图片的道具和 UI 图集，用紧凑打包并开启裁剪。
- 如果图集会以非整数倍缩放或生成 mipmap，加 1–2 px 的边缘扩展，可以防止相邻帧在边缘渗色。
- 给帧起有意义的名字（hero_walk_00…），它们会成为 JSON 里的帧键名。
适用场景
- 把从 Aseprite、Blender 或 Spine 导出的帧打包成一张纹理。
- 为网页游戏制作 UI 或道具图集。
- 把 AI 生成的帧做成引擎能直接播放的精灵图集。
- 为落地页制作 CSS 精灵动画。
常见问题
支持导出哪些数据格式？
hash 和 array 两种形式的 TexturePacker JSON（Phaser、PixiJS 和许多引擎都能读取）、Aseprite JSON、Godot 4 SpriteFrames .tres、带关键帧的 CSS 精灵类，以及一个包含 Unity 导入和切片设置的文本文件。
紧凑打包是做什么的？
它会裁掉每帧的透明边框，把裁剪后的帧按高度排序后逐行排列，尝试多种宽度并保留最小的图集。JSON 会记录每帧的原始尺寸和偏移，保证渲染位置正确。
什么是边缘扩展？
边缘扩展会把每帧最外圈的像素向外复制 1–4 px。当 GPU 采样稍稍超出帧的范围时（过滤、mipmap、非整数缩放），读到的是这一帧自己的边缘，而不是相邻帧。
我的帧尺寸不一样，会怎样？
在网格、单行和单列布局中，每个单元格都和最大的帧一样大，较小的帧按底部居中、居中或左上对齐。紧凑打包则保持每帧原本的尺寸。
帧数有限制吗？
没有固定限制。所有处理都在浏览器中进行，实际上限取决于设备内存。几百张 64 px 的帧完全没问题。
我的图片会被上传吗？
不会。帧在本地读取和打包，不会发送到任何服务器。