按正确顺序完成序列帧合并
拖动帧调整位置，或对 idle1、idle2、idle10 这类名称使用数字自然排序。列表中从上到下的顺序，就是最终写入图集的顺序。
数字排序精灵图生成器工作区
导入多张素材，选择规则网格、横向条带或纵向条带，预览后下载透明 PNG 和可读的 JSON 帧坐标。
图片只在当前浏览器中处理；工具不会上传、旋转、缩放或裁切素材。 仅支持静态图片；最多 256 帧、单文件 20 MiB、文件合计 64 MiB、源图合计 3200 万像素，单边最大 8192 像素。
透明精灵图预览
缩放、辅助线和选中框仅用于预览；PNG 按实际尺寸透明导出。坐标原点位于图集左上角。
- 实际单格尺寸
- —
- 输出图集尺寸
- —
选中帧数据
点击预览或列表中的某一帧，查看它导出后的坐标与尺寸。
为可靠素材整理而做的精灵图生成器
第一版专注规则网格和可检查的输出，不擅自修改素材，也不承诺未经实际验证的引擎专用格式。
保留每张像素素材的原始尺寸
尺寸不同的图片会以透明留白放入相同单格。若设定单格小于某张源图，实际单格会自动扩大，不会为了塞进去而缩放或裁切素材。
不缩放导出透明 PNG 图集和 JSON
除透明 PNG 外，还可下载通用描述文件，其中包含帧名称、图片矩形、单格矩形、源尺寸、对齐偏移和整张图集设置。
帧数据精灵图生成器常用工作流
用清楚的排序和可见的几何数据，把散落图片变成便于管理和读取的 PNG 图集。
把编号 PNG 序列帧排成规则网格
导入从绘图软件导出的动画帧，按文件名数字排序，再选择网格、横排或竖排。设置列数、单格宽高、整图外边距与图片间隔，并在下载前核对结果；PNG 中没有内容的区域会保持透明。
导出图集前点击查看帧坐标
点击预览中的任意单格，就能查看图片的 x、y 坐标、原始宽高和单格范围。配套 JSON 如实记录这些数值，但不会冒充某个引擎的专有格式。Aseprite 官方也把横向、纵向、矩阵、边界留白、帧间留白与 JSON 数据作为图集工作流中的独立设置。
如何使用精灵图生成器
按照三个步骤制作透明 PNG 图集，避免丢失帧顺序或源图几何信息。
01
导入并整理动画序列帧
添加 PNG、JPG 或 WebP 图片。可以直接拖动、使用上下按钮，或在文件名包含 frame1、frame2、frame10 时应用数字自然排序。
- 跨软件工作时可用 run_001 这样的补零名称
- 导出前再次核对列表顺序
02
设置网格尺寸、留白和对齐
选择规则网格、单行横排或单列竖排。居中适合大多数帧，左上适合瓷砖类素材，底部居中能让不同高度的角色保持脚底基线一致。
- 外边距包围整张图集
- 图片间隔分开相邻单格
03
检查精灵图生成器的输出
点击帧确认其坐标与尺寸，先下载透明 PNG；如果加载代码需要名称和矩形，再下载 JSON。该 JSON 是通用帧表，接入游戏项目时请按所用引擎的官方数据结构进行转换。
精灵图生成器常见问题
回答用户搜索雪碧图制作、序列帧合并、透明背景、网格留白和坐标数据时最关心的问题。
怎样把多张序列帧合并成一张精灵图？
添加各帧图片，确认顺序，选择规则网格、横排或竖排，再设置单格、外边距和图片间隔。检查透明预览后下载一张 PNG；程序需要定位每帧时，再同时下载 JSON。
这个在线精灵图生成器免费吗？
免费，使用时不需要注册。图片由浏览器本地读取和绘制，本页面不会把源素材上传到服务器。
雪碧图生成器怎样排列 frame1、frame2 和 frame10？
点击“按文件名中的数字排序”即可使用自然数字顺序，让 frame2 位于 frame10 前。排序后仍然可以拖动任意帧，或用上下按钮微调。
PNG 精灵图生成器能保留透明背景吗？
可以。输出画布本身透明，源 PNG 的 Alpha 透明度也会保留。JPG 不包含 Alpha 通道，所以原有的纯色背景仍会显示。
动画帧尺寸不一样时会被拉伸吗？
不会。最大源图尺寸决定实际单格的最小值，较小帧按居中、左上或底部居中放入单格，周围用透明区域补齐，不改变原始宽高。
精灵图的外边距和图片间隔有什么区别？
外边距位于整张 PNG 四周；图片间隔位于相邻帧单格之间。有些英文工具分别称为 border padding 和 shape padding，导入其他工具时要注意名称差异。
精灵图生成器会旋转、缩放或裁掉透明边缘吗？
不会。第一版按源图原始像素宽高正向绘制，不进行旋转、拉伸或透明边缘裁切，因此不会丢失还原原始位置所需的画布尺寸。
精灵图 JSON 中包含哪些坐标？
每一项包含文件名、图片的 x/y/宽/高、单格的 x/y/宽/高、源尺寸与对齐偏移；元数据还记录整图尺寸、布局、行列数、外边距、间隔和对齐方式。
导出的图集能直接用于 Unity、Godot 或 Phaser 吗？
规则透明 PNG 通常可作为这些引擎的切片来源，但各引擎与版本的数据导入格式不同。本站只把 JSON 标为通用帧坐标，不宣称未经实际验证的完全兼容；请按目标引擎官方文档配置。