GIF 经常只存储相邻帧之间发生变化的像素,所以简单地导出帧,得到的精灵图会有缺口或残留上一帧的内容。本工具像浏览器一样,按每帧的处置方式重放,确保图集中的每一帧都是完整的。它还会保留每一帧自己的延时,这对需要停顿在某个姿势的动画很重要。
GIF 转精灵图集使用方法
- 拖入一个 GIF 动图(或者试试示例)。每一帧都会连同延时和处置方式一起解码。
- 选择帧范围,用“每隔 N 帧保留一帧”把较长的 GIF 减到一半或三分之一。保留的帧会吸收被跳过帧的时长,所以速度不变。
- 在帧条中点击单帧,可将其排除。
- “裁剪到内容”用同一个框裁剪所有帧,精灵位置保持不变。如果引擎需要四周留空,可以加内边距。
- 如果 GIF 的背景是纯色而不是透明,请打开“去除背景色”。
- 选择原始时序或固定 FPS,然后导出精灵图集、数据文件、GIF,或包含全部内容的 ZIP。
你能得到什么
- PNG 精灵图集,透明背景,按网格排列,列数可自动或固定。
- Aseprite JSON,含 GIF 中每帧的时长,另有 Phaser/TexturePacker JSON、Godot 4
.tresSpriteFrames、CSS 精灵和 Unity 切片设置。 - 编辑后重新编码的 GIF,支持 1×–8× 缩放。
- ZIP 包,包含以上所有内容以及每一帧的单独 PNG。
适配哪些引擎
- Aseprite JSON 能保留不均匀的帧时长。Godot 的 Aseprite Wizard 等导入插件和 Unity 的 Aseprite 导入器都能直接读取。
- Godot 4 .tres 使用固定速度加每帧相对时长,停顿的帧依然会停顿。
- Phaser 3:用 hash JSON 作为图集加载,再根据
animations下列出的帧名创建动画。
来自游戏开发实战的技巧
- 255 色以内的像素画 GIF 在这里可以无损重新编码,因为工具直接使用原有颜色,而不是重新量化。
- 网上很多 GIF 是放大了 2× 或 3× 的像素画。工具会自动检测并还原真正的 1× 像素,让精灵图集更小也更清晰。
- 浏览器会把低于 20 ms 的 GIF 延时按 100 ms 播放。本工具也这样处理,所以预览和你之前看到的一致。
- 如果引擎只支持单一 FPS,把时序切换为固定 FPS,并在预览中确认停顿的姿势依然清楚。
适用场景
- 把老项目里的 GIF,或只能导出 GIF 的像素画编辑器作品,导入游戏引擎。
- 把 AI 动画工具生成的 GIF 拆成可编辑、可清理的帧。
- 把 GIF 拆成带编号的 PNG 帧,在 Aseprite、LibreSprite 或 Photoshop 里修图。
- 用现有 GIF 为网站制作 CSS 精灵动画。
常见问题
为什么用其他转换工具时,有些 GIF 帧会缺像素?
GIF 可以只存储帧中发生变化的区域,并规定之后如何处理它(保留、清除或恢复到上一帧)。忽略这种处置方式的工具就会产出残缺的帧。本工具会正确应用它,所以每一帧都是完整的。
会保留原始帧时序吗?
会。每一帧的延时都会从 GIF 中读取,并写入 Aseprite JSON 和 Godot 资源。如果引擎需要,也可以切换为固定 FPS。
能把白色或彩色背景的 GIF 转成透明背景吗?
打开“去除背景色”即可,它会去除帧边缘的颜色。遇到复杂背景时,可以导出后再用精灵图背景去除工具处理。
有尺寸或帧数限制吗?
没有固定限制。所有处理都在浏览器内存中完成,所以超大 GIF(高分辨率、数百帧)能否处理取决于你的设备。
我的 GIF 会被上传吗?
不会。GIF 在你设备上的后台线程中解码,没有任何文件离开你的电脑。
MP4 或 WebM 片段怎么办?
本工具只读取 GIF 文件。视频请使用视频转精灵图集工具,它能捕获浏览器可播放的任何片段的每一帧,还能抠掉绿幕。