什么是精灵图生成器？

精灵图生成器将多张单独的图片合并为一张优化过的精灵图。上传你的帧或图标，或拖入一个动态 GIF——每一帧都会自动提取——选择布局（网格、横向条、纵向条或紧凑排布），设定透明或纯色背景，然后导出合并后的图片，并附带 JSON、JSON 数组、XML TextureAtlas 或 CSS 坐标数据。

网格模式将所有帧排成统一的 N×M 布局，适合每帧尺寸相同的动画循环。横向条和纵向条把帧排成单行或单列——这是简单 2D 引擎动画的标准布局。紧凑模式通过装箱算法，让不同尺寸的图标以最小浪费拼合。拖入动态 GIF 后，每一帧都会被解码进图中，无需先单独导出各帧。输出默认保留透明背景，也可选一种纯色作为色键填充。元数据提供四种格式——JSON 哈希、JSON 数组、XML TextureAtlas 和 CSS——可直接用于 Phaser、PixiJS、Unity、Godot 或 CSS 的 background-position。动画预览可让你以 1 到 60 FPS 逐帧查看，确保下载前时序正确。可逐帧单步查看以发现任何错位的精灵，裁掉每帧的透明边缘让图集更紧凑，还能把整个序列导出为动态 GIF，无需游戏引擎即可分享效果。

使用方法

1. 上传您想合并到精灵图中的各张图片。
2. 选择布局（网格、横向、纵向或紧凑），调节间距，将背景设为透明或纯色。
3. 下载精灵图图片以及CSS或JSON格式的位置数据。

何时使用

• 把角色走路循环或爆炸动画打包成一张图，方便游戏引擎调用。
• 将UI图标集合并成单张资源，让页面只发一次HTTP请求而非四十次。
• 准备地块（tilemap）素材时保留一致的内边距，避免相邻图块互相渗色。

结果

一位游戏开发者上传了16帧角色动画图片（每帧64×64像素）。工具将它们排列成4×4网格，生成一张256×256的精灵图，并附带JSON格式的帧坐标供游戏引擎使用。

常见问题

什么情况下选紧凑布局而不是网格？

帧尺寸完全一致时用网格，例如32×32的角色动画。需要单行或单列序列时选横向或纵向条带，多数游戏引擎都最容易加载这种排版。图标大小不一时选紧凑，比如16×16和48×48混在一起的UI图集；它能让贴图最小，但元数据没那么容易手动阅读。

内边距设置是用来做什么的？

内边距会在每一帧周围加上透明像素。如果不加，使用线性过滤的渲染器会把相邻帧的颜色渗到当前帧的边缘。1到2像素的内边距就足以消除这种瑕疵。

我该导出哪种元数据格式？

JSON（哈希）是大多数引擎使用的 TexturePacker 格式，每一帧按名称作为键。JSON 数组把帧存成有序列表，Phaser 3 和部分流程更偏好它。XML 是 Starling/Sparrow 的 TextureAtlas，Unity、Godot 和 Friday Night Funkin 都在用。CSS 则提供 background-position 类，适合网页图标集。按你的渲染器需要选择即可。

导出结果会保留透明背景吗？

默认保留。精灵图导出为PNG，保留Alpha通道，源PNG的透明背景照常带入。如果需要不透明的输出，可以在布局选项旁边选一个纯色背景，适合做色键或给忽略Alpha的引擎使用。如果在意透明，请不要用JPG作为源文件，JPG在上传前就已经把透明部分合成成白色了。

一张精灵图最多能放多少帧？

实际上手机GPU对单张纹理的尺寸上限通常是2048或4096像素。一张4096×4096的图按64×64分帧可以容纳4096帧。但动画用途建议拆成两张2048×2048，对老设备更安全。

相关工具