如何把多张图片合成 Sprite Sheet

独立 PNG 帧很适合逐张绘制和修改，但游戏素材流程通常还需要一张结构明确的纹理。Sprite Sheet Maker 会把已有图片按固定顺序放入规则网格，导出一张可以被游戏引擎再次切片的 PNG。

真正需要决定的并不是“把图片画到画布上”，而是帧顺序、不同尺寸图片如何共享单元格、透明留白放在哪里，以及最终尺寸是否适合浏览器和目标平台。

当前工具一次最多组合 200 张已有图片。它是布局工具，不会冒充 AI Sprite Generator，也不会生成缺失姿势或引擎元数据。

先整理源帧

把同一个动作或紧密相关的一组素材放到一个文件夹。混合 Idle、Attack、特效、UI 图标和重复导出文件，很容易生成“看起来像 Sheet、播放却不对”的结果。

上传前检查：

• 每个文件都对应一个需要的帧。
• 需要透明度时使用 PNG 等支持 Alpha 的格式。
• 所有帧采用相同像素比例。
• 已经理解画布尺寸与 Pivot 的关系。
• 文件名能够表达正确顺序。

Sprite Sheet Maker 支持 PNG、JPG、WebP、BMP，一批最多 200 张。JPG 不支持透明；即使输出画布设置为透明，JPG 自带的不透明矩形背景仍会保留。

如果图片来自规则 Sheet，可以先用 Sprite Sheet Cutter 精确拆分。保持原单元格尺寸，之后重建时更容易与源图一致。

使用能稳定排序的文件名

帧顺序本身就是动画数据，即使它没有单独保存在元数据中。Maker 会进行自然文件名排序，因此 frame 2 会排在 frame 10 前面。

长期维护时建议使用带补零的描述性名字：

hero-run-001.png
hero-run-002.png
hero-run-003.png

不是所有软件都支持自然排序，补零能让文件夹、版本对比和其他工具中的顺序保持一致。

上传后仍要检查列表。重复帧、缩略图或带“final”字样的文件可能落在意外位置。可以拖动调整顺序，删除不需要的项；选错整组素材时使用“全部清空”，不要在混合列表上继续叠加。

第一步：选择列数

列数决定多少帧后换行。20 帧设置 5 列会得到 4 行，设置 4 列会得到 5 行；读取顺序始终是从左到右、再从上到下。

选择时同时考虑工作流和纹理尺寸：

• 短动画用单行最直观。
• 接近方形的网格可以避免极宽或极高。
• 列数能整除帧数时，每行都会填满。
• 团队采用固定规范时，引擎导入参数可以重复使用。

行数等于帧数除以列数并向上取整。最后一行可能有未使用的透明单元格，它们只是布局空间，不应被加入动画播放。

默认文件名会包含网格，例如“sprite-sheet-5x4.png”。也可以改成“hero-run-5x4.png”，让文件自己记录切片依据，降低后续误用参数的概率。

第二步：确定单元格尺寸

规则 Sheet 要求所有 Cell 相同，即使源图片尺寸不一样。默认模式可以选择足以容纳全部图片的共享单元格，源图放入其中而不会被拉伸。

比如一帧 48×64，另一帧 56×64，共享 Cell 能防止大帧被裁掉；具体摆放位置由对齐方式决定。但这不能代替 Pivot 设计，不同画布是否应该共享同一基线仍需要人工判断。

目标规范明确时启用自定义 Cell。项目要求 64×64 网格，就让所有帧占用 64×64，即使可见角色更小。Cell 必须能够容纳源图片和预期位置，过小会裁剪内容，应在生成前修正。

自定义 Cell 不是缩放目标，它定义容器而不会调整像素比例。如果帧本身倍率不一致，应先统一使用 像素画放大工具，再组合 Sheet。

第三步：选择对齐方式

角色动画常使用底部居中，让脚部保持共同基线；爆炸或 UI 图标适合居中；源画布已经精确编码 Offset 时，左上最可预测。

任何自动规则都不知道真实 Pivot。预览时对照脚底、武器握点或效果中心。如果本应原地的角色发生跳动，应标准化源画布、换对齐方式，或在引擎中配置 Pivot。

第四步：设置 Padding 和背景

Padding 会在画布外缘和单元格之间留空。0 能得到最小纹理和最简单网格；非零值适合人工观察或匹配既有导入规范，但会改变每个裁剪坐标。

使用 Padding 时，把数值与帧宽、帧高、列数、行数一起记录。后续 Cutter 或引擎需要知道第一帧从哪里开始，以及横纵方向每次移动多少。

普通 Sprite 选择透明背景。实体色只适合颜色本来就属于最终素材的情况。透明画布不会自动删除源图背景：JPG 或预合成 PNG 中的白色矩形仍然是源像素，需要先做背景处理。

使用线性过滤和 Mipmap 的 Atlas 还可能需要边缘像素扩展，透明 Padding 未必能防止采样污染。Maker 负责规则布局，不负责生产级 Texture Packer 的 Extrusion，需要结合引擎设置检查。

第五步：生成前核对预计尺寸

最终宽高由列数、行数、Cell 和 Padding 决定：

宽度 = 列数 × 单元格宽 + 外缘与列间 Padding
高度 = 行数 × 单元格高 + 外缘与行间 Padding

增大 Cell 会影响每一帧；增加列数通常会增加宽度、减少高度。分配 Canvas 之前先查看页面预计结果。

任意方向超过 8192 像素时，页面会展示预计尺寸和内存风险，并让你选择是否继续。可以拆分无关动作、减少 Padding、调整为更均衡的列数，或找出画布异常大的源帧。

PNG 压缩后可能很小，解码纹理内存却很大。单个 8192×8192 RGBA 缓冲区的基础占用约为 256 MiB，还没有计算处理临时缓冲和游戏引擎中的副本。技术上允许不等于适合每个设备。

第六步：生成、预览、导出

生成以后同时查看适应窗口预览和像素级放大，确认：

1. 跨行时帧顺序仍然正确。
2. 没有源图片被裁剪。
3. 对齐规则保持预期 Pivot。
4. 透明区域没有被填色。
5. Cell 与 Padding 符合页面计划。
6. 最后一行只包含真实帧。

确认后下载 PNG，并保留源文件列表和设置，直到目标引擎播放通过。PNG 不会内嵌列数、行数、FPS、动画名称或 Pivot。

预览错误时应修正输入并重新生成，不要直接在大 Sheet 上盲目调整；后者很难追溯到具体源帧。

导入游戏引擎

引擎切片必须使用准确的 Cell 宽高。Padding 为 0 时规则网格最直接；存在 Padding 时，设置相同 Offset 与 Gap，不支持这些参数的流程可以另存一份零间距版本。

像素画应使用 Nearest 或 Point 过滤，避免引入新边缘色的压缩。尤其在源图尺寸不一致、使用居中或底部居中后，要抽查多个帧的 Pivot。

建立 Animation Clip 时只添加真实帧。最后一行没填满时，几何网格的 Cell 数可能大于上传文件数，不要误把透明空格当成停顿帧。

故障排查

第 10 帧排在第 2 帧前

下游软件按字符串而非数字排序。使用补零序号重新命名并生成，或在自己的管线里明确保存 Maker 顺序。

小尺寸帧在动画里跳动

源画布不同，而当前对齐方式不代表预期 Pivot。角色可尝试底部居中，也可以统一源画布或在引擎中设置 Pivot。

某张图片被裁掉

自定义 Cell 小于该源帧，或对齐后内容超出 Cell。增大单元格并重新生成。

透明输出仍有白框

白框属于源图像素，常见于 JPG 或已经合成背景的 PNG。组合前先去除源帧背景。

输出尺寸异常巨大

检查画布特别大的源文件、自定义 Cell、列数和 Padding。一张误选的高分辨率帧可能放大所有 Cell。

可维护的素材方法

把独立源帧视为可编辑 Master，把 Sheet 视为生成产物。统一命名，每批只处理一个动作组，记录网格设置并确定 Pivot 规范。源帧变化后重新生成，而不是在旧 Sheet 上继续堆修改。

游戏素材工具中心 还连接 Cutter、GIF 转换、图片转像素画和放大工具。每一步职责清晰，错误才更容易定位和撤销。

把多张图片合成 Sprite Sheet

常见问题

Maker 会用 AI 生成新动画帧吗？

不会。它只排列上传图片，不创造角色、姿势或过渡动作。

源帧可以使用不同尺寸吗？

可以，共享自动或自定义 Cell，再通过对齐方式放置；必须检查 Pivot 是否稳定。

应该选择什么格式？

透明游戏 Sprite 优先 PNG。JPG 适合不透明图片，但没有 Alpha 且可能产生压缩杂边。

最多可以组合多少张？

当前一批最多 200 张，同时受输出尺寸和浏览器工作内存检查限制。

PNG 会保存动画速度和网格信息吗？

不会。FPS、列数、行数、Cell、Padding 和 Pivot 需要为引擎单独记录。