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

怼烎@ 2023-09-23 18:06 45阅读 0赞

## 一、图片 ##

### 1.1 纹理压缩 ###

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

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

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

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

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

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

### 1.2 精灵的多边形模式 ###

在图片的精灵模式中，有一个「Polygon」也就是多边形模式。  
![6893ff956252b08dc68fb3078a8233a5.png][]

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

最后需要在Image组件中开启「Use Sprite Mesh」选项  
![463d5a3ab35075da9ebd44d2664478a6.png][]

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

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

### 1.3 关闭图片的读写和Mip Map ###

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

开启读写会导致在运行时将图片的一份拷贝加载到内存，从而造成资源的浪费。「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」即可开启图集打包。  
![be53203b53ad90599199591b25d40a04.png][]

#### 主图集 ####

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

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

#### 子图集 ####

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

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

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][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

[41a53bbdf1f8c6f00f56ec36a9ada6b3.png]: https://img-blog.csdnimg.cn/img_convert/41a53bbdf1f8c6f00f56ec36a9ada6b3.png
[6893ff956252b08dc68fb3078a8233a5.png]: https://img-blog.csdnimg.cn/img_convert/6893ff956252b08dc68fb3078a8233a5.png
[f5cdde5e1fdbe1b448a67f9a6f384d31.png]: https://img-blog.csdnimg.cn/img_convert/f5cdde5e1fdbe1b448a67f9a6f384d31.png
[463d5a3ab35075da9ebd44d2664478a6.png]: https://img-blog.csdnimg.cn/img_convert/463d5a3ab35075da9ebd44d2664478a6.png
[7aa91fb477c1cdd2d85d3bf79ba4b3ef.png]: https://img-blog.csdnimg.cn/img_convert/7aa91fb477c1cdd2d85d3bf79ba4b3ef.png
[dd2b670276cdb6cb9ab94712fd3d7a2f.png]: https://img-blog.csdnimg.cn/img_convert/dd2b670276cdb6cb9ab94712fd3d7a2f.png
[43a7f6d53ac108713f5f15bb6483c1f4.png]: https://img-blog.csdnimg.cn/img_convert/43a7f6d53ac108713f5f15bb6483c1f4.png
[be53203b53ad90599199591b25d40a04.png]: https://img-blog.csdnimg.cn/img_convert/be53203b53ad90599199591b25d40a04.png
[f3f12daa174aaa324f0aeb3da11ba0ff.png]: https://img-blog.csdnimg.cn/img_convert/f3f12daa174aaa324f0aeb3da11ba0ff.png
[268d5cf36829c18f07fb25fd22da85ea.png]: https://img-blog.csdnimg.cn/img_convert/268d5cf36829c18f07fb25fd22da85ea.png
[01d1c03aff0e81d7bd799ddf2c2a6d33.png]: https://img-blog.csdnimg.cn/img_convert/01d1c03aff0e81d7bd799ddf2c2a6d33.png
[https_zhuanlan.zhihu.com_p_367679754]: https://zhuanlan.zhihu.com/p/367679754