规则网格 Sprite Sheet 切割

精灵图切割工具 把规则图集拆成有序 PNG 动画帧

使用精灵图切割工具,可按准确的单帧宽高或行列数分割精灵图。先用实时网格检查外边距、起始偏移和帧间隔,再从雪碧图中提取单独素材。

浏览器本地处理 · 只处理规则网格 · 默认保留空白帧

精灵图切割工具工作区

导入 PNG、JPG 或 WebP 规则图集,描述网格并检查每条切分线;切分后逐帧选择、调整顺序,再打包下载。

精灵图切割工具直接在当前浏览器中处理图片,页面不会上传素材。 仅支持静态图;单文件不超过 20 MiB、单边不超过 8192 px、总像素不超过 3200 万,最多输出 256 个区域。

切分网格实时预览

精灵图切分网格将在这里显示

导入按规则排列的精灵图,再填写单帧尺寸或行列数量。

修改参数后叠加网格会立即更新。青色框表示完整单帧,橙色框表示保留的余边区域;工具不会缩放或平滑像素。

提取后的帧序列

勾选要导出的帧,点击缩略图检查单帧,并用左右按钮调整 ZIP 与播放顺序。

0 帧已选

请先检查实时网格、处理余边提示,再点击“切分为单独帧”。

    完全透明空白帧

    只有所有像素 Alpha 都为 0 才算空白帧;白色、黑色或其他不透明纯色单格不会被当成空白。

    文件命名

    示例: sprite_001.png

    动画播放预览

    请自行设置速度。静态图集不包含原动画时长,本工具不会假装识别出不存在的时间信息。

    为什么使用精灵图切割工具?

    工具会显示每一个关键假设,因为偏移一个像素就可能影响整段动画。

    用两种方式分割精灵图

    知道 Tile 尺寸时填写准确的单帧宽高;更容易数出布局时填写行数与列数。

    尺寸或数量
    选择切分方式

    校准偏移、间隔与外边距

    用左侧或顶部偏移修正第一帧位置,用横纵间隔跳过帧间缝隙,再用外边距排除图集四周边框。

    像素对齐
    预览切分网格

    把雪碧图转为可用的单独图片

    保留或跳过透明空格,逐帧选择并纠正顺序,再用补零的连续编号导出,使 PNG 序列按预期排序。

    ZIP 打包
    整理 PNG 序列

    精灵图切割工具工作流

    从可验证的网格得到干净帧序列,不隐藏起点偏移、空白单格或剩余边缘。

    用可见网格从精灵图提取单独素材

    导入规则图集,让青色切分线与每个单帧准确对齐。如果所有帧一起偏移,调整左侧或顶部起点;如果误差沿行列逐渐增大,修正对应间隔。精灵图切割工具会显示右侧与底部余边,不会在后台静默丢掉像素。

    规则像素精灵图上叠加准确网格、间隔箭头与动画帧缩略图

    打包下载前检查帧顺序

    切分后可以查看单帧、决定是否导出、向前或向后移动,并用明确设置的 FPS 简单播放。静态图集本身没有时长数据;最终 PNG 文件名会按已选输出顺序连续编号。

    像素精灵图被切分成八个连续编号的 PNG 动画帧并装入 ZIP 文件夹

    如何使用精灵图切割工具

    适用于规则图集、Tile Sheet 或动画序列条的三个步骤。

    01

    导入规则图集并描述网格

    知道每个单格的像素宽高时选择“按单帧宽高”;知道横向与纵向单格数量时选择“按行数与列数”。第一版明确只处理统一网格。

    • 优先查看素材作者提供的尺寸说明
    • 紧密打包的不规则图集不能假设为等大单格
    导入精灵图
    02

    提取动画帧前对齐所有切线

    外边距用于四周边框,左侧与顶部偏移用于切分起点,横向与纵向间隔用于帧间空隙。请同时检查第一格与最后一格,并明确处理无法整除的余边。

    • 整体固定偏移通常要改起点
    • 逐格累积的误差通常要改单帧尺寸或间隔
    03

    选择、排序、播放并下载

    生成缩略图后,如果动画依赖时间位置就保留空白帧;调整序列顺序,设置文件名前缀和起始编号,再填写真实需要的 FPS,最后把选中的 PNG 打包为 ZIP。

    精灵图切割工具常见问题

    回答用户搜索 Sprite Sheet 切割、雪碧图分割、动画帧提取、网格对齐、透明 PNG 与 ZIP 下载时的实际问题。

    怎样把 Sprite Sheet 切割成单独图片?

    把图片导入精灵图切割工具,按单帧宽高或行列数对齐实时网格,点击切分后检查缩略图;选好需要的帧并调整顺序,即可把连续编号的 PNG 打包为 ZIP。

    精灵图切割、雪碧图切割与 Sprite Sheet 分割是同一件事吗?

    在大多数搜索和工具语境中,它们都指把一张图集拆成单独素材或动画帧。“精灵图”是较正式的中文表达,“雪碧图”和英文 Sprite Sheet 也很常见。

    应该填写单帧宽高,还是填写行数与列数?

    素材说明给出 16×16、32×32 或 64×64 等 Tile 尺寸时,填写单帧宽高;只能数出网格时填写行列数。两种方式都需要正确处理外边距、偏移和帧间隔。

    为什么切分线越往后越偏?

    如果所有单格固定偏移相同距离,应调整左侧或顶部起点;如果误差从第一格到最后一格不断累积,通常是单帧宽高或横纵间隔不正确。切分前请同时检查首尾单格。

    图集外边距、起始偏移和帧间隔有什么区别?

    外边距会排除图集四周统一边框;左侧与顶部偏移会在边框之后移动第一格起点;横向与纵向间隔只跳过相邻单格之间的缝隙。Aseprite 导入也提供 offset、sprite size 与 padding 等对应概念。

    精灵图尺寸无法整除时会发生什么?

    精灵图切割工具会显示右侧与底部余边并暂停导出。若余边说明参数有误,请继续修改;确实需要这些像素时,可明确选择保留余边区域。部分帧会带标记,尺寸也可能不同。

    工具会默认删除空白动画帧吗?

    不会。本工具默认保留完全透明帧,因为删除后可能改变序列位置和动画节奏。只有确定空格无用时,才选择“跳过空白帧”。

    工具如何判断空白帧?

    只有每一个像素的 Alpha 都为 0 才会被标记为空白。白色、黑色或其他不透明纯色帧不会被误删;JPG 没有透明通道,因此 JPG 单格不会被识别为完全透明。

    可以逐帧选择并修改导出顺序吗?

    可以。每个缩略图都有导出勾选框和前后移动按钮。ZIP 按当前已选顺序写入文件,并组合自定义前缀、补零连续编号,让文件管理器和引擎稳定排序。

    播放预览能识别原始动画速度吗?

    不能。静态 Sprite Sheet 不记录每一帧的持续时间;你需要自己填写 FPS。这个值只控制浏览器内的简单播放预览,工具不会虚构图像中不存在的时长。

    能切割不规则打包的 Texture Atlas 吗?

    不能可靠处理。当前切割器面向规则网格;不规则图集需要打包工具输出的矩形 JSON 数据,或改用手工框选、元数据识别工具。TexturePacker 也把规则网格、透明区域检测和数据文件提取视为不同模式。

    切分会破坏透明通道或让像素画变模糊吗?

    不会。所有区域都按整数像素边界原样复制,不缩放、不平滑,并用 PNG 保存 Alpha 透明通道。JPG 源图没有可保留的透明通道,但提取结果仍会编码为 PNG。

    精灵图会上传到服务器吗?

    不会。图片解码、网格预览、动画帧提取、播放和 ZIP 打包都在当前浏览器本地完成。

    打开精灵图切割工具

    按单帧尺寸或行列数对齐规则图集,导出前检查每一帧。

    保留需要维持时间位置的空白格,调整顺序,再一起下载选中的 PNG。

    精灵图切割工具只处理统一网格;不规则图集需要元数据或手工区域。