关于 静态合图

前言

静态合图就是在开发时 「将一系列碎图整合成一张大图」


# 一. 静态合图

静态合图就是在开发时 「将一系列碎图整合成一张大图」

图集对于 DrawCall 优化来说非常重要,但是并不是说我们把所有图片统统打成图集就万事大吉了,这里面也有它的门道,胡乱打图集的话说不定还会变成负优化。

最重要的是「尽量将处于同一界面(UI)下的相邻且渲染状态相同的碎图打包成图集」,才能达到减少 DrawCall 的目的。


还记得游戏渲染时是按顺序渲染的吗? 所以 “相邻” 很关键 。

改变渲染状态会打断渲染合批(什么是合批),例如改变纹理状态(预乘、循环模式和过滤模式)或改变 Material(材质)、Blend(混合模式)等等,所以使用自定义 Shader 也会打断合批。

# 1. 举个栗子

我这里有一个由 10 张碎图和 1 个文本所组成的弹窗(假设都使用同样的渲染方式):

  1. 在不做任何优化且未开启动态合图的情况下,渲染这个弹窗需要 11 个 DrawCall。
  2. 将所有碎图打成一个图集,文本节点夹在精灵节点之间的情况下需要 3 个 DrawCall,在顶部最外层或者底部最外层的情况下需要 2 个 DrawCall。
  3. 文本使用 BMFont,将所有碎图和 BMFont 打成一个图集的话只需要 1 个 DrawCall,如果碎图不和 BMFont 打成一个图集的情况则参考第 2 项。
  4. 碎图不打包图集,开启动态合图,在理想情况下,文本使用 BMFont 最少只需要 1 个 DrawCall,不使用 BMFont 的情况同样参考第 2 项。

当然上面这个例子算是比较理想的情况,实际上的情况可能会比例子更为复杂,精灵和文本可能会更多,也不一定能将所有图像资源都打包进一个图集。所以我们只能是尽量合理地去优化,避免出现 “捡了芝麻,丢了西瓜” 的情况。

注意

不建议任何图像资源的尺寸超过 2048 * 2048,否则在小游戏和原生平台可能会出现问题;

而且图像尺寸越大,加载的时间也越长,而且是非线性的那种增长,例如加载一张图像比加载两张图像所消耗的时间还长,得不偿失。


下面介绍两种打包静态图集的方式:

  • 自动图集资源(Auto Atlas)
  • TexturePacker

# 二. 自动图集资源(Auto Atlas)

利用 Cocos Creator 内置的自动图集资源来将碎图打包成图集。

在项目构建时,编辑器会将所有自动图集资源所在文件夹下的所有符合要求的图像分别根据配置打包成一个或多个图集。

自动图集资源使用起来很灵活,编辑器在打包图集时会自动递归子目录,若子目录下也有自动图集资源(即.pac文件)则会跳过该目录,所以我们可以对同一目录下的不同部分的碎图配置不同的参数。

# 1. 创建自动图集配置

「资源管理器」中右键,点击 [ 新建 -> 自动图集配置 ] 就会新建一个名为 AutoAtlas.pac的资源。

# 2. 配置属性

「资源管理器」中点击自动图集资源文件就可以在「属性检查器」面板中看到自动图集资源可配置的属性,点击 Preview 按钮即可预览图集。

# 3. 关于自动图集的几点建议

  1. 合理控制图集最大尺寸,避免单个图像加载时间过长。
  2. 尺寸太大的图像没有必要打进图集(如背景图)。
  3. 善用九宫格(Sliced)可以节省很多空间(这一点需要美术大佬配合)。
  4. 间距保持默认的 2 并保持勾选扩边选项,避免图像裁剪错误和出现黑边的情况。
  5. 勾选不包含未被引用资源选项,自动排除没有用到的图像以节省空间(该选项预览时无效)。
  6. 开发时预览图集,根据结果进行调整,以达到最好的优化效果。

关于每个属性具体的作用请参考官方文档。

自动图集资源官方文档:配置自动图集资源


# 三. TexturePacker

我们也可以使用第三方软件 TexturePacker 来预先将图像打包成图集再导入项目中。

另外使用 TexturePacker 打包图集时需要注意配置「形状填充(Shape Padding,对应 Auto Atlas 中的间距)」,避免某张图像出现相邻图像的像素的情况。

TexturePacker 官网地址


# 四. 对比

# Auto Atlas

  • Cocos Creator 内置,方便到家了
  • 功能不多但是该有的都有,免费
  • 项目构建时才生成图集,开发时任意修改无压力
  • 图集尺寸在生成时自适应,节省空间
  • 支持自动纹理压缩

# TexturePacker

  • 第三方软件需自行安装,不够方便
  • 收费功能很多很专业但是用不着,免费功能也够用
  • 先生成图集再使用,更换图像又要重新生成图集
  • 尺寸固定需要自己设置
  • 自己压缩去

总结:

Auto Atlas 真香!