精灵图集

SpriteAtlas 是一种精灵集合资源，通过将多个精灵纹理打包成一张精灵图集从而在绘制时合并绘制指令，它拥有以下优势：

• 更好的性能（合并绘制指令）；
• 更少的显存（打包算法降低纹理尺寸）；
• 更少的请求次数（通过减少碎片文件来减少加载的请求次数）；

下图精灵图集例子里每帧只调用了一次绘制指令：

编辑器使用

创建精灵图集

在 资产面板 内右键，选择功能列表中的创建，并选中精灵图集，此时，一个空白的精灵图集资产就创建成功了。

选中精灵图集资产，可以在 检查器面板 查看资产的详细信息。

添加精灵

在确定精灵图集与精灵之间的包含关系后，需要将精灵添加至对应的精灵图集，此步骤即可通过操作精灵资产实现，也可通过操作精灵图集资产实现，接下来就分别实践两种方式。

方式一：操作精灵

左键选中需要添加的精灵资产，可以在 检查器面板 找到精灵的从属关系，选择打包进图集就可以选取希望打包进的精灵图集资产了。

方式二：操作精灵图集

左键选中目标精灵图集资产，可以在 检查器面板 找到图集打包的精灵列表，选择添加精灵就可以选取希望打包的精灵资产了。（若选取文件夹，则会添加文件夹目录下的所有精灵）

移除精灵

方式一：操作精灵

左键选中需要从图集中移除的的精灵资产，可以在 检查器面板 找到精灵的从属关系（注意需确认目标图集的路径是否匹配），点击移除按钮就可以从目标图集中移除该精灵。

方式二：操作精灵图集

左键选中需要操作的精灵图集资产，可以在 检查器面板 找到图集的精灵列表，找到要移除的精灵对象并点击移除按钮即可。

快速操作精灵

精灵资产被加入精灵图集后，可以在精灵图集的 检查器面板 中快速操作精灵，他的属性会同步修改到精灵资产中

设置

打包设置

若打包遇到如下警告，说明图集结果的尺寸超过了纹理最大宽度和最大高度，此时可通过调整纹理最大宽度与纹理最大高度或重新编排打包的散图解决。

导出设置

最佳实践

点击精灵图集资产，通过调整打包设置的纹理最大宽度与纹理最大高度，同时调用打包对象中的打包并预览，可以保证图集利用率在一个较高的水平。

预览图中左侧表示导出图片的大小信息，右侧表示图集利用率信息（代表所有散图面积的和占用最终大图的面积百分比），可依据此值调整打包设置以达到较佳的结果。

脚本使用

图集生成

Galacean 为精灵图集提供了命令行工具，开发者可以按照以下步骤生成图集：

1. 安装包

npm i @galacean/tools-atlas -g

2. 执行打包命令

galacean-tool-atlas p inputPath -o outputName

其中 inputPath 表示需要打包的文件夹路径，而 outputName 则表示打包输出的精灵图集文件名，如果你得到下图所示结果，那么说明打包成功了。

更多请参照图集打包工具。

使用

1. 上传图集图片和图集文件至 CDN 同一目录下，例如文件和图片的地址应分别为 https://*cdnDir*/*atlasName*.atlas 和 https://*cdnDir*/*atlasName*.png。

2. 加载与使用

engine.resourceManager
  .load<SpriteAtlas>({
    url: "https://*cdnDir*/*atlasName*.atlas",
    type: AssetType.SpriteAtlas
  })
  .then((atlas) => {
    // Get all sprites.
    const allSprites = atlas.sprites;
    // Get sprite by spriteName.
    atlas.getSprite("spriteName");
    // If multiple sprites have the same name, we can get all like this.
    const allSpritesWithSameName = atlas.getSprites("spriteName", []);
  });

注意事项

1. 请将绘制时序相连的精灵打包进同一图集，可显著提升性能（降低绘制指令的调用次数）；
2. 清理精灵图集时，需要确保图集内的所有精灵都已不使用；
3. 打包精灵图集是需要统筹精灵数目与尺寸，避免一次打包生成多张精灵图集；