# 将图集单元映射到源矩形和目标矩形

> 通过在一张渲染图中定义源矩形、修剪规则、枢轴和加载检查来保持精灵图集框架对齐。

- URL: https://oneshotgems.ai/zh-Hans/topics/sprite-atlas-rendering
- 类别: 游戏开发者指南
- 类型: 指南
- 更新日期: 2026年10月5日

精灵图集将许多帧打包到一张图像中，但浏览器只绘制您要求它绘制的矩形。错误的帧宽度可能会切入相邻帧；即使每个图像都有效，不匹配的枢轴也会使动画看起来不稳定。在一个数据映射中定义帧几何形状，并将源像素与游戏使用的目标尺寸分开。这将图集调试转变为检查显式矩形，而不是通过眼睛调整每个绘制调用。

## 描述帧几何和动画顺序

对于规则网格，保存单元格的宽度和高度、列数，以及每种动画的帧索引。源 x 坐标为（帧索引对列数取模）× 单元格宽度；源 y 坐标为（帧索引除以列数后向下取整）× 单元格高度。不规则图集应显式保存源矩形。动画顺序应与文件顺序分开；如果图像按姿势而非动画序列排列，八帧的行走动画可以使用索引 [0, 1, 2, 1, 0, 3, 4, 3]。

如果修剪精灵以删除透明边距，则还要存储原始画布大小和修剪偏移量。围绕稳定的枢轴（例如角色的脚）进行绘制，这样框架边界就不会随着图稿的变化而移动碰撞体或视觉地面接触。

## 有意使用源矩形

Canvas drawImage 有一个重载，用于选择源矩形并将其缩放为目标矩形。 MDN 将源 x、y、宽度和高度与目标 x、y、宽度和高度分开记录。使用这种分离可以在更改渲染大小的同时保持图集裁剪的精确性。测试第一个、最后一个和行边界帧；错误的列计数通常会显示为这些边界处相邻精灵的一个像素条。

## 在诊断几何形状之前检查接缝和负载

如果缩放绘制时相邻图像互相渗色，请在图集单元格之间留出透明间距，并检查所选滤镜模式是否适合美术风格。在每个目标帧周围绘制调试矩形，并临时标出其索引。绘制前等待图像加载并解码，然后使用实际的 canvas 缩放比例和内部绘图缓冲区分辨率进行测试。比较未缩放和缩放后的帧；如果只有缩放后的帧出现接缝，应先检查采样方式和图集单元格的内边距，再修改源坐标。

## 常见问题

**为什么相邻精灵的一部分会出现？** 源矩形可以包括相邻像素，或者缩放采样可以显示来自紧密包装图集的边缘像素。在更改帧顺序之前检查裁切区域并在单元格之间留出适当间距。

**碰撞盒是否应该使用修剪后的精灵边界？** 通常保持碰撞尺寸与游戏角色相关，而不是偶然的透明像素。稳定的枢轴和明确的碰撞判定区域可防止动画帧改变游戏几何形状。

## 跟随好奇心探索

- [避免空白开场，妥善加载游戏资源](https://oneshotgems.ai/zh-Hans/topics/game-asset-loading): 规划资源加载顺序，准确报告进度并处理失败，避免在关键帧期间解码大图。
- [设置 Canvas 分辨率，让游戏画面更清晰](https://oneshotgems.ai/zh-Hans/topics/canvas-pixel-density): 当游戏必须在屏幕上看起来清晰时，平衡画布背景分辨率、设备像素比、内存使用和绘图成本。

## 延伸阅读

- [MDN 使用画布上的图像](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)
- [MDN 绘制图像](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)

---
规范页面: https://oneshotgems.ai/zh-Hans/topics/sprite-atlas-rendering