Sprite Sheet 与 PNG 序列帧如何互转：拆分、排序与合成

2D 动画素材通常以两种形式存在：一张包含多帧的 Sprite Sheet，或者一组独立 PNG 序列帧。前者便于传输和引擎导入，后者便于逐帧修改。实际开发中，两种格式经常需要来回转换。

Tooliva 的 动画帧拼接拆分工具 提供序列图拆分、单帧拼接、透明边裁剪、帧顺序调整、动画预览和批量导出，适合在导入 Unity、Cocos Creator 或 Godot 前完成预处理。

什么时候需要拆分 Sprite Sheet？

• 需要单独修复某一帧的角色或特效。
• 需要删除重复帧、调整顺序或补充新帧。
• 原图包含多个动作，需要重新分类。
• 引擎导入器无法正确识别现有坐标数据。
• AI 生成的序列图行列和间距不够规范。

什么时候需要把单帧重新拼接？

• 准备统一导入游戏引擎。
• 需要减少零散文件数量。
• 向其他成员交付完整动画组。
• 准备进一步进行图集排布。
• 需要输出带有 metadata 的标准资源包。

拆分 Sprite Sheet 的三种思路

手动网格

已知行列数或单帧尺寸时，手动网格最稳定。规则排列的像素动画通常优先使用这种方式。

自动网格

当帧间距一致但不知道具体行列时，可以尝试自动分析。结果仍要检查边缘帧是否被多算或漏算。

主体识别

当每帧位置不规则、周围有透明空白时，可以根据有效像素识别主体。但阴影、粒子和相连光效可能影响判断，需要人工校正。

标准拆分流程

第一步：确认图集结构

观察是否等宽等高、是否包含 Padding、是否按从左到右再从上到下排列。不要在不了解结构时直接平均切分。

第二步：设置行列或帧尺寸

对于规则图集，输入准确行列数。若原图边缘含外边距，需要将外边距和帧间距一并考虑。

第三步：逐帧检查

检查是否有帧被截断、空白帧被保留、两个主体被合并，或帧顺序与预期动作不一致。

第四步：裁剪透明边

裁剪可以减少无用空间，但也会改变每帧尺寸。角色动画必须同时考虑统一规格和锚点，否则会出现播放抖动。

第五步：动画预览

建议先在 12 至 24 FPS 范围内播放，检查循环、节奏和位置稳定性。静态看不出的错误，在连续播放时通常很明显。

为什么“统一规格”很重要？

假设角色抬手时轮廓变宽，收手时变窄。若每帧都裁剪到最小矩形，图像左上角会不断变化。引擎按相同锚点播放时，角色就会左右跳动。

解决方法有两种：

• 将所有帧放回统一宽高画布，并以脚底或角色中心对齐。
• 保留裁剪结果，同时记录每帧相对于原画布的偏移数据。

单帧拼接为 Sprite Sheet 的流程

统一命名和排序

使用补零帧号，例如 001、002、003。不要依赖系统文件排序自动猜测动作顺序。

选择横排或网格

排布方式	优点	适用场景
单行横排	顺序直观	帧数较少的短动画
单列竖排	部分工具读取方便	特定工作流
规则网格	尺寸更紧凑	帧数较多的动画
智能排布	空间利用率较高	需配合坐标 metadata

设置间距与背景

透明动画应使用透明背景。帧之间保留适当间距，降低纹理过滤时相邻像素渗透的风险。

导出 PNG、ZIP 和 metadata

Sprite Sheet PNG 用于显示，ZIP 适合打包单帧，metadata.json 可记录帧名、位置和尺寸。保留 metadata 能让后续工具或脚本自动重建动画。

与其他动画工具如何配合？

如果素材最初来自角色视频，可以先在 智能角色处理 中完成抽帧和动作分组，再使用本工具精调顺序与规格。若多个动作需要统一排入一张引擎图集，可继续发送到 智能精灵图打包工具。

常见错误

• 平均切分时忽略帧间 Padding，导致每帧都带入邻近像素。
• 裁剪透明边后没有统一画布，动画出现位置抖动。
• 帧号不补零，文件排序错误。
• 只看单帧，不进行动画预览。
• 合成图集尺寸超过目标设备或引擎限制。
• 没有保留原始单帧和 metadata，后续无法重新编辑。

FAQ

不知道 Sprite Sheet 的行列数还能拆分吗？

可以尝试自动网格或主体识别，但规则图集使用准确行列设置通常更稳定。

为什么裁剪透明边后动画会抖动？

因为帧尺寸和主体位置变化，需要统一规格或保存偏移数据。

合成 Sprite Sheet 时应该横排还是网格排布？

帧少时横排直观，帧多时网格更紧凑，最终还要考虑目标引擎和纹理尺寸。

metadata.json 有什么作用？

它记录帧名、位置、尺寸和顺序，便于工具链和引擎自动读取。

总结

拆分和拼接看似只是格式转换，真正决定动画质量的是帧顺序、统一规格、锚点和预览检查。通过 动画帧拼接拆分工具 先把这些规则整理正确，再进入图集和引擎流程，可以避免大量返工。