描述帧几何和动画顺序
对于规则网格，保存单元格的宽度和高度、列数，以及每种动画的帧索引。源 x 坐标为（帧索引对列数取模）× 单元格宽度；源 y 坐标为（帧索引除以列数后向下取整）× 单元格高度。不规则图集应显式保存源矩形。动画顺序应与文件顺序分开；如果图像按姿势而非动画序列排列，八帧的行走动画可以使用索引 [0, 1, 2, 1, 0, 3, 4, 3]。
如果修剪精灵以删除透明边距，则还要存储原始画布大小和修剪偏移量。围绕稳定的枢轴（例如角色的脚）进行绘制，这样框架边界就不会随着图稿的变化而移动碰撞体或视觉地面接触。
有意使用源矩形
Canvas drawImage 有一个重载，用于选择源矩形并将其缩放为目标矩形。 MDN 将源 x、y、宽度和高度与目标 x、y、宽度和高度分开记录。使用这种分离可以在更改渲染大小的同时保持图集裁剪的精确性。测试第一个、最后一个和行边界帧；错误的列计数通常会显示为这些边界处相邻精灵的一个像素条。
在诊断几何形状之前检查接缝和负载
如果缩放绘制时相邻图像互相渗色，请在图集单元格之间留出透明间距，并检查所选滤镜模式是否适合美术风格。在每个目标帧周围绘制调试矩形，并临时标出其索引。绘制前等待图像加载并解码，然后使用实际的 canvas 缩放比例和内部绘图缓冲区分辨率进行测试。比较未缩放和缩放后的帧；如果只有缩放后的帧出现接缝，应先检查采样方式和图集单元格的内边距，再修改源坐标。
关于精灵图集渲染的常见问题
为什么相邻精灵的一部分会出现？
源矩形可以包括相邻像素，或者缩放采样可以显示来自紧密包装图集的边缘像素。在更改帧顺序之前检查裁切区域并在单元格之间留出适当间距。
碰撞盒是否应该使用修剪后的精灵边界？
通常保持碰撞尺寸与游戏角色相关，而不是偶然的透明像素。稳定的枢轴和明确的碰撞判定区域可防止动画帧改变游戏几何形状。
延伸阅读
发现信息过时了？ 报告需要更正的内容