如何把 Sprite Sheet 拆分成独立帧

Sprite Sheet 把许多动画帧放进一张纹理，适合游戏运行时加载；但在修图、重新排序、背景清理或接入其他素材流程时，独立 PNG 往往更方便。正确拆分的关键，是把网格坐标转换为精确裁剪区域，不缩放画面，也不损失透明像素。

这里最重要的前提是“规则网格”。规则 Sheet 使用固定宽高的单元格，按照行列排列，可以带统一外边距和帧间距。纹理打包器生成的 Atlas 则可能裁掉透明边缘、旋转 Sprite，并把不同尺寸的矩形放在任意位置，必须依靠 JSON、plist 或 atlas 元数据恢复，不能靠猜测行列拆分。

规则 Sprite Sheet 还是 Packed Atlas？

上传前先观察图片特征。

角色动画常见的 3 行、每格 64×64 就是规则 Sheet；图标紧贴可见边缘、空隙大小不一的 UI 图集更像 Packed Atlas。透明区域可能让规则网格看上去不整齐，最好先打开棋盘格或网格参考线再判断。

Sprite Sheet Cutter 面向规则网格。当图片尺寸、外边距、间距与帧尺寸无法整除时，它会显示余数错误，而不是悄悄裁掉像素。

两种方式描述同一个网格

规则 Sheet 可以用两组等价参数表示：

1. 输入每帧宽度和高度。
2. 输入总列数和总行数。

素材规范写着“32×32 tile”或“64×64 frame”时，用帧尺寸最直接；肉眼能数出 8 列 4 行、但不知道像素尺寸时，就用行列模式。工具会同步换算两组参数，方便发现输入是否符合原图。

不含边距和间距时，计算很简单：帧宽等于图片宽度除以列数，帧高等于图片高度除以行数。存在边距时，先从宽高各减去两侧外边距；存在间距时，再减去列与列、行与行之间的所有空隙。

第一步：上传原始分辨率图片

支持 PNG、JPG、WebP 或 BMP，单文件最大 25MB。Sprite 通常优先使用 PNG，因为它能保留 Alpha 透明度和清晰边缘。JPG 也能裁剪，但压缩噪点和不透明背景会原样进入每一帧。

不要测量网页截图或被浏览器缩放后的预览。256 像素宽的图片显示成 512 个 CSS 像素时，屏幕上的两像素才对应源图一像素，用肉眼量显示尺寸会得到错误结果。

工具读取图片真实像素并按坐标裁剪，不对内容重新采样。因此只要网格正确，导出的每个像素都与源文件一致。

第二步：区分外边距与帧间距

外边距（Margin）是画布边缘到第一个或最后一个单元格之间的边框；帧间距（Spacing）是相邻单元格之间重复出现的空隙。两者不能互换。

例如帧宽 32、4 列、帧间距 1、外边距 2 的图片，总宽度为：

2 + 32 + 1 + 32 + 1 + 32 + 1 + 32 + 2 = 135 像素

这时 Margin 应输入 2，Spacing 输入 1。如果全部当成间距，第一帧会从画布边缘开始，每个裁剪区域都发生偏移。一像素误差在静态预览里可能不明显，播放时却会让角色持续抖动。

透明边框难以观察时，可以在像素编辑器里读取坐标，或用预览网格比较几组候选参数。检查脚底、武器尖端、角色基线等固定参照物，除非动作本身发生位移，否则它们在相邻帧中的位置应该稳定。

第三步：输入帧尺寸或行列数

先填写最有把握的一组信息。文件名包含“hero-run-48x48”时可以从 48×48 开始，但仍要验证，因为名字有时描述的是可见角色大小，不是完整单元格。

如果知道动作数量，可以直接数行列。最后一行可能没有填满；规则 Sheet 也可能包含透明占位格或预留区域。工具会按照完整网格生成帧，所以预计帧数必须与真实序列核对。

当前一次最多导出 500 帧。大型 Tile Map 或世界地图图集不是首期目标；即使技术上能够拆分数百帧动画，把 Idle、Run、Attack 等动作分组处理也更容易复核和管理。

第四步：解决余数警告

余数警告表示可用像素无法被当前网格整除。例如扣除边距和空隙后剩下 130 像素，却要放入 4 个 32 像素单元格，就还有 2 像素没有归属。

不要忽略它。依次排查：

• 帧宽或帧高是否差一两个像素。
• 图片是否存在没有填写的外边距。
• 单元格之间是否有固定空隙。
• 导出时是否额外加入边框。
• Sheet 生成后是否被缩放过。
• 原文件是否其实是不规则 Atlas。

按行列定义时，扣除 Margin 和 Spacing 后的宽高必须能够整除；按帧尺寸定义时，推算出的所有行列必须正好占满可用区域。预览网格线应落在单元格边界，而不是穿过角色像素。

第五步：检查顺序和透明边缘

工具按从左到右、再从上到下读取。除了查看同一行的相邻帧，还要特别检查每行末尾到下一行开头的过渡。有些素材采用不同编号规则，单行看似正确，跨行后顺序却会跳变。

放大检查透明边缘。精确裁剪本身不会改变 Alpha，但错误边界可能带入相邻角色的一条像素。分别放在深色和浅色背景上查看，能发现很淡的半透明杂边。像素画预览应保持最近邻显示，避免平滑缩放掩盖真实边界。

角色在各帧中没有居中，不一定是裁剪错误，也可能是动作位移或 Pivot 设计。Cutter 不会自动裁掉透明边缘，也不会重新对齐内容，它会完整保留原单元格，这通常更有利于维持一致锚点。

第六步：下载单帧或 ZIP

只需要检查、编辑某个姿势时，可以单独下载 PNG；网格全部验证完成后，再把所有帧打包成 ZIP。文件按顺序编号，正常的自然排序会维持动画次序。

如果要重新命名，推荐“run-001.png”“run-002.png”“run-010.png”这种补零形式，避免只按字符串排序的软件把第 10 帧放到第 2 帧前面。

导出的 PNG 会保留单元格尺寸和透明度，但不包含 Pivot、碰撞框、动画名称、帧时长或九宫格等引擎元数据。存在原始 Atlas 元数据时不要删除；新流程则应单独记录这些信息。

拆帧后的下一步

修图时保持画布尺寸不变。单独改变某一帧画布会导致重新合成后锚点偏移。需要删除背景时，先用少量代表帧验证边缘，再决定是否处理完整序列。

需要重排或重新合并时，使用 Sprite Sheet Maker。上传编号 PNG，确认自然排序，拖动调整例外项，再设置与导出帧相同的单元格尺寸。参数一致时，“拆分—修改—重建”可以保持可逆。

如果源文件是动态 GIF，应先用 GIF 转换器 还原局部帧和 disposal，再对生成的 Sheet 做裁剪。Cutter 只读取静态图片像素，不负责解码动画格式。

游戏引擎中的复核

如果只是为了修图、最终仍会回到 Sheet，可以先重建一份并与原图逐像素比较。任何差异都说明顺序、Padding、背景或对齐方式发生了变化。

如果引擎直接接受独立图片，则检查过滤方式、纹理压缩、每帧 Pivot、跨行播放顺序，以及空白占位格是否被误当成动画帧。Unity、Godot 等引擎本身也能切规则 Sheet；在线 Cutter 更适合需要独立文件、验证网格或接入下一步图像处理的场景。

故障排查

所有帧都向同一方向偏移

先检查外边距。漏填 Margin 会让全部裁剪产生相同偏移；如果偏移随列数逐渐增大，则通常是 Spacing 或帧宽错误。

每帧边缘带入下一帧的一条线

帧尺寸或间距不正确，也可能是源文件曾被插值缩放。应修正原始网格，不要对数百帧逐个擦除同一种错误。

最后一行导出了空白帧

源网格可能包含未使用单元格。可以只下载有效帧，或导出后删除真正空白的文件。先确认它不是用于停顿的细微动画帧。

无论如何都无法整除

重新测试 Margin 与 Spacing，读取真实图片尺寸，并判断是否为 Packed Atlas。没有元数据时，任意排列和旋转的矩形无法通过行列可靠恢复。

一套可靠检查顺序

使用原始分辨率文件，先分类布局，再输入确定的参数，解决所有余数警告，检查跨行顺序和 Alpha，最后导出并保留源文件与设置，直到目标动画验证通过。

这些步骤只多花几分钟，却能避免最难排查的一像素抖动、串帧和透明边缘污染。

把 Sprite Sheet 拆分成 PNG 帧

常见问题

可以拆分不规则 Texture Atlas 吗？

不可以。工具面向固定帧尺寸、外边距和间距的规则网格；Packed 或旋转 Sprite 应使用 Atlas 元数据。

拆分会缩放或模糊 Sprite 吗？

不会。工具只裁剪源像素矩形，正确网格会保持像素和 Alpha 不变。

Margin 和 Spacing 有什么区别？

Margin 是整个网格外侧的边框，Spacing 是相邻单元格之间重复出现的空隙。

为什么会提示存在余数像素？

当前网格无法正好占满可用宽高。应修正尺寸、边距或间距，而不是接受含糊裁剪。

ZIP 中的文件如何命名？

每帧使用连续编号的 PNG 文件名，顺序对应从左到右、从上到下的裁剪结果。