UGUI性能优化学习笔记（三）图片和图集

码龄7年

关注

原创 2022-12-08 16:45:31 1.6k 阅读

Unity3D UGUI图集打包与动态使用(TexturePacker) 制作图集的好处：众所周知CPU是用来处理游戏的逻辑运算的，而GPU是用来处理游戏中图像的。在GPU中，我们要绘制一个图像需要提交图片（纹理）到显存，然后再进行绘制（在这个过程中会产生一次DrawCall）,也就是说我们要绘制100张图片就要产生100次DrawCall.显然这是非常消耗性能的。这是制作图集的好处就显而易见了： ①、减少性能消耗，提高处理效率 ②、可以归类不同模... 阅读详情

一、图片

1.1 纹理压缩

虽然我们可以将JPG、PNG之类的格式导入Unity作为纹理的源文件，但实际上，在导入Unity后，会自动对其进行纹理压缩。

为什么要进行纹理压缩？
每像素位数 (bpp) 表示单个纹理像素所需的存储量。bpp 值越低的纹理在磁盘和内存中也越小。较低的 bpp 值也意味着 GPU 使用较少的内存带宽来读取纹理像素。GPU 内存带宽通常是帧率的瓶颈，因此纹理压缩有助于避免这一问题。

既然要进行纹理压缩，JPG、PNG这类格式也拥有较高的压缩率，为什么不直接作为纹理呢？
这是因为这类格式不支持像素随机访问。GPU在进行渲染时，只使用需要的纹理部分，如果采用这种格式，在访问某个像素之前，就需要解码整张纹理。这就会造成严重的性能问题。

安卓平台压缩格式
在安卓平台下，官方建议设置压缩格式为ETC2或ETC。前者支持Alpha通道，且拥有更高的质量；后者不支持Alpha通道，要使用Alpha通道需要将纹理拆分为两个，一个用于RGB，一个用于Alpha。但是ETC支持比较旧的设备，且占用空间要小很多。

上图中带有“Crunched”字样的是Unity的二次压缩格式，即在ETC的基础上再次进行压缩。它可以使压缩后的图片占用体积更小，但相应的在运行时也需要进行二次解压。

IOS平台压缩格式
IOS上的压缩格式官方推荐格式为ASTC或PVRTC。前者适用于较新的设备，后者则拥有更广泛的兼容性。

1.2 精灵的多边形模式

在图片的精灵模式中，有一个「Polygon」也就是多边形模式。

在多边形模式下，打开精灵的编辑窗口，选择「Custom Outline」模式，即可自定义精灵的网格。

最后需要在Image组件中开启「Use Sprite Mesh」选项

它的作用是允许我们自定义精灵的网格。对于一个透明背景的图片来说，如果采用默认的模式，其透明背景仍然会参与渲染，而且同样会造成Overdraw。

但如果我们自定义它的顶点，让网格更贴合非透明的部分，就可以减少可能产生Overdraw的面积。但代价是增加了顶点和边的数量。这就需要结合CPU和GPU的占用情况进行权衡。

1.3 关闭图片的读写和Mip Map

对于在UI中使用的图片，如果没有需求，建议关闭下面这两个选项

开启读写会导致在运行时将图片的一份拷贝加载到内存，从而造成资源的浪费。「Generate Mip Map」是用于在3D场景下，降低远处图片的渲染质量以提高性能，但对于UI来说并没有用处。而且开启这个选项会在运行时生成多个质量不一的图片加载到内存，同样会造成资源的浪费。

二、图集

2.1 为什么需要打图集

图集就是一种将多个纹理合并为一个组合纹理的资源。在之前学习优化的过程中我们了解到，决定UI元素能否合批的其中一个关键因素就是材质ID是否相同。假如每个UI元素都使用一张独立的材质，那么它们的材质ID是不同的，也就无法进行合批，最终导致UI产生大量的Draw Call。通过将这些材质打包成一张图集就可以很好地解决这个问题。

2.2 打包图集的方式

在「Edit -> Project Settings -> Editor -> Sprite Packer -> Mode」选项中，选择启用「Sprite Atlas V1」即可开启图集打包。

主图集

接下来在资源目录里创建一个图集「Create -> 2D -> Sprite Atlas」

这里的Type选择Master，表示这是一个主图集。然后将需要打包的图片添加到「Objects for Packing」中。然后点击「Pack Preview」按钮即可开始打包。效果如下

子图集

我们也可以将图集的Type设置为「Variant」，即子图集。它需要指定一个主图集，然后会继承主图集的所有属性。不过子图集可以设置「Scale」，可以用于不同分辨率下加载不同精度的图片。

我们可以在代码中通过如下方式加载图集中的图片

public SpriteAtlas atlas;
private void Start()
{
	// 参数填图集中对应图片的名称
	GetComponent<Image>().sprite = atlas.GetSprite("技能1");
}

2.3 图集的打包原则

同一UI下的图片打进同一个图集
因为在运行时加载图集中的图片时需要将整个图集载入内存，因此对于同一UI中的图片不应该跨多个图集。
对于通用的图片可以单独打一个图集
如果某些图片需要在多个UI中复用，可以单独打包到一个图集中。在运行时常驻内存，避免频繁加载。
只将较小的图片打入图集

2.4 动态图集

下面来设想一个场景。场景中是一个装备商店，商店中有数十件装备，对应有数十张图片。按照我们打图集的策略，只要将这些图片打到一个图集中，即可大幅减少Draw Call。但假如玩家要在这些装备中选择几样带在身上，那么这张由几十张图片构成的大图集就需要驻留在内存中。显然，这会造成资源的浪费。如果不将这些图片打成一个图集，又会造成大量的Draw Call。一个比较合理的解决方法是使用动态图集。

所谓的动态图集就是在运行时动态打包图集。我们可以将玩家选择的几件装备的图片动态打成一个图集。这样既可以避免大量的Draw Call，又可以防止无意义的内存占用。

具体的动态图集使用方法可以参考：https://zhuanlan.zhihu.com/p/367679754

三、参考资料

[1]. https://zhuanlan.zhihu.com/p/391885850
[2]. https://zhuanlan.zhihu.com/p/237940807
[3]. https://blog.csdn.net/linxinfa/article/details/108827197
[4]. https://zhuanlan.zhihu.com/p/399537508
[5]. https://docs.unity3d.com/cn/2021.3/Manual/class-TextureImporterOverride.html