精灵图集 (Sprite Sheet)

2026-08-24 暂无评论

精灵图集 (Sprite Sheet) 是一张包含多个独立小图像的图片。程序通过坐标、切片规则或动画帧索引，从图集中取出需要的局部区域。

常见用途

角色动画：将走路、攻击、跳跃等动画的各帧排列在同一张图中，按顺序显示不同区域。
瓦片地图：集中存放草地、墙、地板等 Tile，地图通过坐标引用具体瓦片。
UI 图标：把多个状态图标、按钮图标放在一张图中，通过偏移位置显示目标图标。

为什么有用

可以把它理解成一种“减少 I/O 和切换成本”的资源组织方式，但更准确地说，收益取决于运行环境：

Web 场景：历史上主要减少图片文件数量和 HTTP 请求次数，尤其适合 HTTP/1.1；HTTP/2 和 HTTP/3 已经支持多路复用，因此这一优势会减弱。
游戏或 Canvas 渲染：多个对象共用一张纹理，通常可以减少纹理切换和 GPU 状态切换，有利于批量渲染。
资源管理：动画帧和图标集中在一起，便于统一加载、缓存和版本管理。

因此，Sprite Sheet 可以说是“减少资源加载与渲染开销”的技术，但不是无条件的 IO killer。

基本工作方式

+------+------ +------+------+
| 走路1 | 走路2 | 走路3 | 走路4 |
+------+------ +------+------+

程序每隔一段时间改变裁剪区域或显示偏移，就能形成动画。

Web 中的传统 CSS Sprite 示例：

.icon {
  width: 24px;
  height: 24px;
  background-image: url("icons.png");
  background-repeat: no-repeat;
}

.icon-search {
  background-position: -24px 0;
}