巧用九宫格以减少UI资源量

Posted 2020-08-09 _Soy

UI资源量对资源包大小和内存的影响

　　UI资源具有以下特点：

　　　　(1)UI资源几乎都是图片，而图片是最占资源量的资源类型之一。

　　　　(2)Unity不支持外部压缩，即使在外部将一个10MB的图片压缩到只剩1MB，导入引擎之后它也会被解压出来变成10MB，然后转换为各平台特有的格式。

　　　　(3)UI资源一般都贴着相机视窗显示在最上层，也是游戏中人机交互的重要部分，一般需要保证高质量，所以一般都使用RGB32位色(真彩色)，这会让资源量更大。

　　　　(4)UI资源一般涉及大量图标、背景框等，如果要保证高分辨率，它们将会导致资源量很大。

　　而且因为UI资源几乎都是以图集形式展现，所以在加载的时候，它会被整个一块儿加载进内容，如果不优化好UI医院两，会增大内存的开销。

 

什么是九宫格UI

　　九宫格，顾名思义，就是9个格子，这9个格子并不要求一定要相同大小，是一种做UI常见的方式，来增强UI资源的复用性并减少资源量。九宫格的主要目的是处理图片拉伸效果，因为图片一旦被拉伸，他就会出现形变、模糊等问题，但是，有的图片它的某一些部分又是允许被拉伸的。例如，一个UI背景框，它的中间部分几乎是一个纯色，允许被拉伸(纯色被拉伸不会发生质量问题)，但是，边缘的4个角可能有一些特殊花纹或则倒角不允许被任意拉伸，这个时候即可以用九宫格，来使4个角不进行拉伸放大，只让中间部分进行拉伸放大，达到一个小框拉大成一个大背景框使用的同时图片质量又不会发生损伤的目的。

 

如何让美术提供合适的九宫格UI资源

　　让美术尽量地提供九宫格资源，主要有以下一些原则：

　　　　(1)不到万不得已的情况下，对于大面积地板性质的UI，尽量只在4个角上做文章，其他地方用可用于拉伸的纯色。

　　　　(2)凡是左右可以缩短的UI、上下可以缩短的UI，都尽量使用九宫格切短了交给程序来做。九宫格不一定是9个格子，也可以是3个格子等。

 

如何在NGUI中划分九宫格

　　当美术将一个资源图片合并成一个非常精简小巧的图片交给客户端程序后，客户端程序需要对这个图片进行切割九宫格。切割方法为如下。

　　　　(1)将这个UI原件制作到图集中去。

　　　　(2)选中图集的Atlas预设文件，在Inspector界面。

　　　　(3)在Sprite Details中单击Sprite按钮，会弹出这个图集中所有精灵的预览图，从中选中要切割九宫格的那个Sprite。

　　　　(4)调整Border设置项，这个Border就是切割九宫格所需要的设置。它一共需要设置4个参数：Left、Right、Bottom、Top，这4个项代表着：从左边朝右X像素位置处划一条竖着的线，从右边朝左X像素位置处划一条竖着的线，从下边朝上X像素处划一条横着的线，从上边朝下X像素处划一条横着的线。这样4条线就将一个Sprite切成了九宫格。

 

如何使用九宫格UI

　　使用九宫格UI的时候，必须保证这个Sprite是已经切好了九宫格。然后创建这个Sprite，将它的模式设置为Sliced即可。

　　Fill Center选项是自动拉伸九宫中的中心格子来充满中心被拉大的区域，如果不勾选Fill Center选项，则九宫格被拉伸之后，中心格子不会自动充满，会出现一个空隙。

　　也可以将图片设置为Advance高级模式，高级模式的本质区别是，允许对划分的九宫格的每一块设置一个Type，比如左上角的格子平铺、中心各自拉伸等。

 

去掉Mipmap以进一步降低资源包大小和内存占用

　　在Unity中，MipMap纹理图片的一个属性，有开启和关闭两种状态。比如说一张1024*1024的纹理图片，在导入引擎之后它的默认状态下MipMap是开启状态的，这会导致它会自动生成512*512、256*256、128*128、64*64、32*32的这么多张额外的图片。主要用途是，当这个纹理离摄像机足够远时(例如一个人跑到了很远的地方去)，这个纹理图片在游戏摄像机中就会很小，这个时候为了节省性能和达到更好的显示效果，Unity会自动选用之前自动生成的众多MipMap小纹理中的一张来替代最初的纹理。

　　NGUI生成的UI图集也是一张纹理图片，它的默认状态下也是选中了MipMap的，但是，UI是附着在摄像机视窗最上层的，几乎不会存在像人物一样跑到很远的地方去的情况。所以，可以选中UI图集的图片文件，在图片类型红选择Advance高级类型，然后取消掉MipMap的选项，再Apply应用保存即可。