单行
适合短循环:行走、待机呼吸、旋转的金币。所有帧排在一行,切图时用总宽度除以帧数即可。自动模式下,8 帧以内都排成一行。
把你手上已有的帧图拖进来 —— Aseprite 导出的、手绘的、或者别处生成的 —— 直接得到一张可入引擎的 sprite sheet PNG。全程在浏览器里完成,不上传任何文件。
还没有帧图?让 AI 精灵图生成器 帮你把角色和动作画出来。
第一次做?先看 精灵图制作教程 →
一个图片文件就是一帧。GIF 只作为一张静态图片导入,这里不拆分动画。
点击就能看到拼图效果。加载示例会替换当前图片。
列数就是每行放几张图片。 留白是在每张图片四周增加间距。
添加帧图后即可生成
点击上方示例,或在左侧添加自己的图片。
透明 PNG · 保留原始像素 · 不上传服务器




浏览另一组角色素材,再将自己的帧图排列成统一网格。下方素材用于演示布局。
开始拼图
三步,全部在浏览器里完成。
把单帧图片拖进来。会按文件名排序,walk_01、walk_02…… 自动排对顺序;任何一帧都能一键前后移动或移除。
选定列数,或保持自动(8 帧以内排成一行)。加 1–4 像素留白,避免引擎采样时相邻帧渗色。
每一帧保留原始像素不缩放。格子统一为最大宽 × 最大高,帧底部对齐同一基线,引擎按固定网格即可切帧。
精灵图将多张独立图片合成一张 PNG。选择列数和间距,保留每个原始像素。
保留原始像素
拼图时不会缩放图片。
统一单元格
以最宽、最高的帧确定统一格子尺寸。
本地处理
拼图与 PNG 导出都在你的设备上完成。
拼图工具怎么摆你的帧,全是数字。
| 精灵图拼接工具 | |
|---|---|
| [R01] 输入 | PNG、WebP、GIF、JPEG;一个文件算一帧 |
| [R02] 格子尺寸 | 最宽的帧 × 最高的帧 |
| [R03] 对齐 | 水平居中、底部对齐 —— 脚踩在同一条基线上 |
| [R04] 缩放 | 不缩放,保留原始像素 |
| [R05] 列数 | 自动 / 1 / 2 / 4 / 8 |
| [R06] 间距 | 0 / 1 / 2 / 4 px |
| [R07] 顺序 | 先按文件名,再拖动调整 |
| [R08] 输出 | PNG |
| [R09] 运行位置 | 你的浏览器,文件不上传 |
列数决定精灵图的形状。选几列,取决于动画本身和引擎怎么切图。
适合短循环:行走、待机呼吸、旋转的金币。所有帧排在一行,切图时用总宽度除以帧数即可。自动模式下,8 帧以内都排成一行。
一张图里放好几个动作?如果每个动作帧数相同,就把列数设成这个数——4 或 8——每个动作各占一行,每个动作的第 1 帧都对齐在第一列。
竖向长条。一些 CSS 动画和老引擎要求帧从上往下排。
超过 8 帧时,自动模式会改排成接近正方形的网格——12 帧排成 4×3。方形精灵图不容易超出手机 GPU 的纹理尺寸上限,而 40 帧排成一行可能就太宽了。
游戏开发者拼帧前最常问的几件事。
完全免费。在浏览器里运行,没有帧数限制,也不需要账号。只有首页的 AI 精灵图生成器才消耗积分。
不会。帧图在你的电脑上用浏览器 canvas 读取并拼接,任何数据都不会离开你的设备。
格子大小取最宽和最高的那一帧。较小的帧水平居中、底部对齐,角色的脚始终踩在同一条基线上。帧永远不会被缩放。
所有按固定网格切帧的引擎都可以 —— Unity、Godot、GameMaker、Phaser、Pygame 等。把预览下方显示的格子尺寸填成帧的宽高即可。
可以。首页的 AI 精灵图生成器只需一句描述,就能画出角色和动作帧,并直接输出拼好的精灵图。
拼接工具是把你已有的帧图排进一张网格;精灵制作器是按一句描述生成一张全新的单帧精灵。一个负责排,一个负责画。
四条路通向同一张精灵图。按你手上已经有什么来选。