支持动画预览与坐标导出的精灵图制作器

01

不用专业图集软件如何使用精灵图制作器

精灵图制作器 — 排列帧、确定单元格、预览动作，再导出准确坐标

精灵图制作器 — 先按照实际播放顺序添加每张动画帧。生成前可以前移、后移或删除，因为列表顺序会同时决定动画预览和元数据索引。横向单行适合短循环，纵向单列适合按列读取的环境，网格则能避免长序列形成过宽纹理。

单帧宽度和高度决定每个图集单元格。完整显示会保留整张原图，铺满裁切会填满单元格并裁掉溢出部分，拉伸填满则强制使用指定尺寸。帧间距分隔相邻单元格，外边距围绕整张图集，两者都会计入x、y坐标。精灵图制作器使用这些参数计算每一帧的实际位置。

复制坐标前应先生成精灵图，这样数值才能描述实际导出的Canvas。如果计划尺寸超过安全边长或像素预算，工具会让图片和坐标同步缩小并明确显示比例。动画预览按照原始顺序播放，下载的PNG或WebP与JSON或CSS始终保持一一对应。精灵图制作器导出的坐标始终以最终画布为准。

• 精灵图制作器 — 让各帧主体位置一致，减少动画抖动。
• 精灵图制作器 — 不规则角色轮廓应保留透明像素。
• 精灵图制作器 — 文件名会成为元数据键，建议提前规范。
• 精灵图制作器 — 把图片和坐标放入目标运行环境再次测试。

02

精灵图制作器 — 先确定图集与单帧尺寸

精灵图制作器 — 单元格、间距和外边距共同决定坐标

精灵图制作器会在导出前明确展示布局计算。网格列数决定换行位置，横向或纵向布局固定为一行或一列；每个单元格从外边距开始，再按单帧尺寸与间距之和推进。如果Canvas需要缩小，图片和坐标会使用同一个最终导出比例。

03

精灵图制作器 — 让未发布素材留在浏览器本地

精灵图制作器 — File与Canvas API避免处理型上传

精灵图制作器会通过createImageBitmap()解码选择的文件并绘制到浏览器本地Canvas。缩略图使用浏览器创建的blob地址，不需要上传接口、账号或云端项目。清空工作区会关闭bitmap并撤销预览地址，设备中的原始图片不会被覆盖或修改。

04

精灵图制作器 — 为CSS或游戏引擎导出坐标

精灵图制作器 — JSON数组、对象和CSS描述同一张图集

精灵图制作器使用JSON数组保留播放顺序，JSON对象适合按文件名查找，CSS则生成一条共用背景规则和每帧对应的负background-position类。PNG适合保留透明度，WebP可在目标支持时调整编码质量。所有尺寸和偏移都以实际导出的图集为准。

05

精灵图制作器 — 如何验证精灵图输出

精灵图制作器 — 浏览器与CSS官方规范支持可复现检查

精灵图制作器 — 验证同时使用官方资料与可复现的浏览器检查。MDN说明drawImage()和toBlob()，W3C定义background-position。测试会载入尺寸和透明度不同的纯色图片，调整顺序、核对矩形、导出WebP并重新读取148×414像素，同时检查网络记录只包含静态资源与本地blob读取。