[TOOL-02] 免费 · 浏览器本地 · 无需注册

精灵图拼接工具

把你手上已有的帧图拖进来 —— Aseprite 导出的、手绘的、或者别处生成的 —— 直接得到一张可入引擎的 sprite sheet PNG。全程在浏览器里完成,不上传任何文件。

还没有帧图?让 AI 精灵图生成器 帮你把角色和动作画出来。

第一次做?先看 精灵图制作教程 →

[SSM-002]拼图工作台
0 帧

把多张图片拼成一张精灵图

一个图片文件就是一帧。GIF 只作为一张静态图片导入,这里不拆分动画。

先点一个示例试试

点击就能看到拼图效果。加载示例会替换当前图片。

01添加图片

02调整排版

列数
留白
PX

列数就是每行放几张图片。 留白是在每张图片四周增加间距。

精灵图

添加帧图后即可生成

点击上方示例,或在左侧添加自己的图片。

03保存精灵图

透明 PNG · 保留原始像素 · 不上传服务器

下载 PNG
[03]

精灵图拼接工具怎么用

三步,全部在浏览器里完成。

[01] 步骤

添加帧图

把单帧图片拖进来。会按文件名排序,walk_01、walk_02…… 自动排对顺序;任何一帧都能一键前后移动或移除。

[02] 步骤

选择排版

选定列数,或保持自动(8 帧以内排成一行)。加 1–4 像素留白,避免引擎采样时相邻帧渗色。

[03] 步骤

下载精灵图

每一帧保留原始像素不缩放。格子统一为最大宽 × 最大高,帧底部对齐同一基线,引擎按固定网格即可切帧。

精灵图拼接:一个网格,排好每一帧

精灵图将多张独立图片合成一张 PNG。选择列数和间距,保留每个原始像素。

为你手里现成的素材而做

  • 保留原始像素

    拼图时不会缩放图片。

  • 统一单元格

    以最宽、最高的帧确定统一格子尺寸。

  • 本地处理

    拼图与 PNG 导出都在你的设备上完成。

$0
费用
0
上传到服务器
PNG
导出格式
[06]

拼接工具规格

拼图工具怎么摆你的帧,全是数字。

精灵图拼接工具
[R01] 输入 PNG、WebP、GIF、JPEG;一个文件算一帧
[R02] 格子尺寸 最宽的帧 × 最高的帧
[R03] 对齐 水平居中、底部对齐 —— 脚踩在同一条基线上
[R04] 缩放 不缩放,保留原始像素
[R05] 列数 自动 / 1 / 2 / 4 / 8
[R06] 间距 0 / 1 / 2 / 4 px
[R07] 顺序 先按文件名,再拖动调整
[R08] 输出 PNG
[R09] 运行位置 你的浏览器,文件不上传
[GUIDE]

精灵图每行放几帧?

列数决定精灵图的形状。选几列,取决于动画本身和引擎怎么切图。

单行

适合短循环:行走、待机呼吸、旋转的金币。所有帧排在一行,切图时用总宽度除以帧数即可。自动模式下,8 帧以内都排成一行。

列数 = 每个动作的帧数

一张图里放好几个动作?如果每个动作帧数相同,就把列数设成这个数——4 或 8——每个动作各占一行,每个动作的第 1 帧都对齐在第一列。

单列

竖向长条。一些 CSS 动画和老引擎要求帧从上往下排。

超过 8 帧时的自动模式

超过 8 帧时,自动模式会改排成接近正方形的网格——12 帧排成 4×3。方形精灵图不容易超出手机 GPU 的纹理尺寸上限,而 40 帧排成一行可能就太宽了。

[05]

精灵图拼接常见问题

游戏开发者拼帧前最常问的几件事。

[+] 这个拼接工具收费吗?

完全免费。在浏览器里运行,没有帧数限制,也不需要账号。只有首页的 AI 精灵图生成器才消耗积分。

[+] 我的图片会被上传吗?

不会。帧图在你的电脑上用浏览器 canvas 读取并拼接,任何数据都不会离开你的设备。

[+] 帧图尺寸不一致怎么办?

格子大小取最宽和最高的那一帧。较小的帧水平居中、底部对齐,角色的脚始终踩在同一条基线上。帧永远不会被缩放。

[+] 哪些引擎能用这张图?

所有按固定网格切帧的引擎都可以 —— Unity、Godot、GameMaker、Phaser、Pygame 等。把预览下方显示的格子尺寸填成帧的宽高即可。

[+] 能让 AI 直接画帧吗?

可以。首页的 AI 精灵图生成器只需一句描述,就能画出角色和动作帧,并直接输出拼好的精灵图。

[+] 精灵图拼接工具和精灵制作器有什么区别?

拼接工具是把你已有的帧图排进一张网格;精灵制作器是按一句描述生成一张全新的单帧精灵。一个负责排,一个负责画。

[CTA] SIGN-OFF

想让 AI 帮你把帧画出来?

描述一个角色和一个动作,AI 精灵图生成器约一分钟返回一张带动画的精灵图。

[06]

本站的其他工具

四条路通向同一张精灵图。按你手上已经有什么来选。