手动切图意味着要猜单元格大小、数边距、修正差一像素的切口。切割器会先读懂图集:找到切线不穿过任何精灵像素的均匀网格;如果图集没有网格,就按相连像素检测出每个独立的精灵。切线直接叠加显示在图集上,调整时动画实时播放,点击任意单元格即可将其去掉。
精灵图集切割器使用方法
- 拖入透明或纯色背景的精灵图集。网格会立即被检测出来并绘制在图上。
- 如果猜得不对,设置行列数,或切换到“单元格尺寸”并输入帧尺寸。对于带边框或帧间有间隔的图集,使用偏移和间距。
- 对于没有网格的紧凑图集(道具合集、物件图块集),选择“查找精灵”。合并距离可以把剑尖这类分离的碎片并回所属的精灵。
- 点击图集上的单元格将其排除。空单元格会被自动跳过。
- 查看预览,设置 FPS,然后下载 ZIP 单帧、GIF,或带 Godot、Unity、Phaser、Aseprite 数据的重建图集。
你能得到什么
- 单帧 ZIP:每一帧单独保存为 PNG(网格模式为单元格,查找精灵模式为紧贴边框),并附带一个记录每帧在原图集位置的 JSON。
- 统一尺寸帧:所有帧放在等大的单元格里,底部居中对齐,可直接做动画。
- 重建图集,间距规整,附带 Aseprite、Phaser/TexturePacker、Godot 4 和 CSS 数据,以及 GIF。
适配哪些引擎
- 底部居中对齐让每一帧的脚都落在同一条线上,这正是平台跳跃和俯视角色需要的。
- 重建图集的数据文件可直接在 Godot 4(SpriteFrames)、Phaser 3(图集)以及基于 Aseprite 的 Unity 和 Godot 导入器中加载。
来自游戏开发实战的技巧
- 素材商店的图集帧之间常有 1px 间隔。如果切线偏了一像素,把间距 X/Y 设为 1。
- 如果“查找精灵”把一个角色拆成了几块,就调大合并距离,直到每个角色只有一个框。
- 如果它把相邻的两个精灵合在了一起,就把合并距离降到 0。
- 不透明背景的图集:打开“去除背景色”,导出的帧就是透明的。
适用场景
- 从素材商店的图集中取出单帧,单独编辑某个姿势。
- 把图标或道具图集拆成单独的 PNG,用于 UI 或背包。
- 重新排列图集间距,让它适配引擎的网格切片功能。
- 把图集转成 GIF,用来分享开发进度。
常见问题
自动网格检测是怎么工作的?
它会尝试所有能整除图集的行列数,排除切线穿过精灵像素或把精灵一分为二的网格,并要求大多数单元格里有内容。通过检测的最细网格胜出。如果没有合适的均匀网格(比如图集或 UI 套件),就会切换到“查找精灵”。
如果我的精灵不是按网格排列的呢?
使用“查找精灵”。它会标记每一组相连的像素,合并距离在合并范围内的组,去掉小于最小尺寸的杂点,并按阅读顺序(从上到下逐行、从左到右)排列结果。
能切割纯色背景的图集吗?
可以。背景色会从边缘检测出来,在检测时视为空白。打开“去除背景色”,导出的帧就是透明的。
我的文件会被上传吗?
不会。切割、检测和编码全部在浏览器中运行,图集不会离开你的设备。
导出的帧是什么文件名?
图集名加上补零的序号,例如 hero_00.png、hero_01.png,在任何地方都能正确排序。
能把帧重新组合成别的样子吗?
可以。导出面板能按你选择的列数和内边距重建图集;如需紧凑排列、边缘扩展和 2 的幂尺寸,可以使用精灵图集制作工具。