精灵图切割工具
把精灵图拆成一张张 PNG——按网格切，或者让它自动识别帧边界——然后单张下载， 或者打包成 ZIP。免费、无需注册，每一个像素都留在你的浏览器里。
不会上传任何文件——图片在你的浏览器里解码和切割。
怎么用这个精灵图切割工具
从一张塞满帧的图，到一个装着编号 PNG 的文件夹，四步。
- 1载入你的精灵图把 PNG、WebP、GIF 或 JPEG 拖到上传区，或点击选择文件，也可以直接从剪贴板粘贴。 如果这张图带着
.json，就一起拖进来。 - 2定好网格网格在载入时已经猜过一遍了。需要的话改一下列数和行数；如果你本来就知道每帧是 32×32，切到固定单元格尺寸；格子之间有留白的图，再补上边距和间距。
- 3或者让它自己找帧帧大小不一的紧凑图集，切到自动识别。 它会找出不透明像素连成的独立区域，并把靠得很近的部分合并， 这样角色和他手里的武器就还在同一帧里。如果已经导入了 JSON，就没什么可识别的—— 文件里已经写明每一帧在哪。
- 4导出在预览图或帧列表里点掉你不要的帧，选一个文件名格式， 然后把选中的帧打包成 ZIP 下载——里面会附一份
.tres——里面是原图上的区域而不是一堆散图，所以图集会一并打包进去。
支持的格式
输入：PNG、WebP、GIF 和 JPEG——只要你的浏览器能解码就行。 做精灵图的活儿里，合理的选择是 PNG 和 WebP，因为它们带透明通道； JPEG 没有透明度，所以自动识别和裁边在它身上找不到帧的边界。
输出：每一帧一张无损 PNG，尺寸精确等于该帧的像素尺寸； 外加一份你选定格式的清单， 记录每一帧在原图里的 x、y、w 和 h。
导入 Aseprite 的 JSON
带着 JSON 导出的精灵图不需要你去算网格。文件里已经写明每一帧在哪。
在 Aseprite 里走 File → Export Sprite Sheet，在 Output 标签页勾上 JSON Data。Array 和 Hash 两种排布都行。 把导出的 PNG 和 .json 一起拖进来，就会多出一个按导入的 JSON 模式，严格按文件里列出的矩形来切。
这一点在其他模式吃力的图上最有价值。网格要求每帧一样大； 自动识别则得去猜那道分离的剑光到底属不属于旁边那一帧。 JSON 里没有任何猜的成分，所以帧大小不一、间距不规则、导出时做过裁边—— 这些统统不再是特殊情况。
帧标签会变成动画选择器。如果这张图里 idle、walk、attack 是几段带标签的帧范围，你可以只切走路循环，而不是导出 40 帧再删掉 32 帧。 乒乓和倒放标签也会被读出来，方向就显示在标签旁边。
名字来自文件本身。文件名格式里会多出 {name}——就是 Aseprite 给这一帧起的名字（去掉文档扩展名）—— 以及代表当前动画的 {tag}。所以 {tag}_{i0} 会给你 walk_00、walk_01。
TexturePacker 的 JSON 就是同一种格式，只是没有时长和标签，所以它也能导入—— 包括精灵图生成器导出的那份清单。如果 JSON 和 PNG 结果来自两次不同的导出， 掉到图外面的帧会被数出来并提示你，而不是悄悄切成一堆空白。
什么时候用得上
导入买来的素材包
商店里的素材包通常就是一张大图。多数引擎用独立的帧做动画更省事——切一次，导入整个文件夹。
找回丢失的源文件
你手上只有导出的图集，没有单帧。自动识别能把它们还原出来，一笔都不用重画。
只改其中一帧
把那一帧抠出来，在像素编辑器里改好，再打包回去——不用打开整张大图。
检查帧对齐
叠加层会明确显示每一刀落在哪里，这是发现「间距差了一个像素」的最快办法。
在引擎里用这些帧
ZIP 落到项目里之后该怎么办。
Godot
清单格式选 Godot 4（SpriteFrames），导出的 .tres 就是现成的—— 把它和图集一起丢进 res://，挂到 AnimatedSprite2D 上即可， 不用手工一帧帧加。导入过滤设为 Nearest，像素画才不会糊。
Unity
导入整个文件夹，Texture Type 设成 Sprite (2D and UI)，Filter Mode 设成 Point (no filter)，Compression 设成 None， 然后把这些帧一起拖到场景里，自动生成一个动画片段。
Phaser
用 this.load.image() 逐张加载，或者保留原图， 配合 frames.json 用 this.load.atlas()。
常见问题
怎么把精灵图拆成一张张图片？
把图拖进来，填好列数和行数（或者切到自动识别），然后把所有帧打包成 ZIP 下载。载入时工具会先替你猜一遍网格，所以大多数规整的精灵图在你动任何设置之前就已经切对了。
我的文件会被上传到服务器吗？
不会。图片是在你的浏览器里用 Canvas API 解码和切割的。什么都不会离开你的电脑，也就是说页面加载完之后断网也照样能用。
网格模式和自动识别有什么区别？
网格模式按固定的单元格边界切，适合动画软件导出的精灵图——那种每一帧都占同样大的格子。自动识别则是去找不透明像素连成的独立区域，适合帧大小不一、间距也不规则的紧凑图集。
切出来的帧带着多余的空白边，怎么去掉？
打开「裁掉多余的透明边」。每一帧会被收缩到可见像素的外接矩形。如果你的引擎依赖所有帧尺寸一致，就别开——裁边会改变每帧的尺寸，也会让轴心点跟着偏。
为什么有些格子导出成了空白图？
为了凑满整个网格而补出来的精灵图，末尾通常会剩下没用到的格子。「跳过空白帧」默认开着，会把它们丢掉。如果被丢掉的是不该丢的帧，把透明度阈值调高一点——带一层很淡的半透明背景的图，在阈值为 0 时会被判定成「非空」。
精灵图该做多大？
在目标平台还在意贴图尺寸的场合，把整张图的尺寸控制在 2 的幂上（512、1024、2048），并且让每一帧共用同一个单元格尺寸。这两点都能让贴图更省地传给 GPU，也让之后再切回去容易得多。
切出来的帧能在 Godot、Unity 或 Phaser 里用吗？
能。ZIP 里就是普通 PNG 文件，Godot 的 AnimatedSprite2D 和 Unity 的 Sprite Editor 都能直接吃。Godot 还有条捷径：清单格式选 SpriteFrames，导出的 .tres 里每一帧已经是原图上的一块区域，不用再手工拼。JSON 那几种格式描述的是同样的位置，给 Phaser 和 PixiJS 用。
可以导入 Aseprite 的 JSON 吗？
可以。在 Aseprite 里导出精灵图时勾上 JSON Array 或 JSON Hash，然后把 PNG 和 .json 一起拖进来。每一帧都会严格按文件里写的位置切，既不用算网格，帧大小不一致也不再是特殊情况。帧标签会变成一个动画选择器，所以你可以只导出走路循环；文件名格式里的 {name} 会用 JSON 里的名字。TexturePacker 的 JSON 也支持——它就是同一种格式，只是没有时长和标签。
相关教程
如何拆分精灵图
算准网格，把每一帧导成 PNG，再导入你的引擎。
如何在 Godot 中导入精灵图
用 AnimatedSprite2D 切帧、关掉模糊，并知道 Godot 什么时候切不动。
如何在 Unity 中导入精灵图
Sprite Mode、Sprite Editor 的三种切法，以及那些会悄悄毁掉像素画的导入设置。
如何在 Phaser 中加载精灵图
spritesheet 与 atlas 之争、以像素为单位的 frameWidth、generateFrameNumbers，以及 file:// 下为什么什么都加载不出来。
位图字体显示成错误的字符怎么修
它错开了一位。这里讲清是什么让它错位、怎么找到位置，以及另外四种值得知道的故障。
怎么修精灵表切图错位
拿第一帧和最后一帧比。误差涨不涨，直接告诉你是四种里的哪一种。
怎么修掉地块和精灵图之间的接缝
三种成因，一个症状。缝会不会随镜头移动而闪，就能告诉你是哪一种。