UI合图工具

1.作用简述：

在游戏开发中，Draw call 作为一个非常重要的性能指标，直接影响游戏的整体性能表现。UI制作过程种，设计人员往往会根据产品原型设计出相应的很多UI图片，每一张单独的图片在UI渲染过程中，都会被当作一个单独的批次Drawcall进行渲染，当工程中UI图片过多时，因为批次渲染问题，就会增加渲染的工作量，对项目性能产生很大影响。

合图工具将多个UI图片，合并成一张图片，本质就是在UI的渲染过程中，保证连续节点的渲染状态一致，将尽可能多的节点数据合并一次性提交，从而减少绘图指令的调用次数，降低图形 API 调用带来的性能消耗，同时也可以避免 GPU 进行频繁的渲染状态切换。目前合图工具支持png tga jpg格式的图片合并。

2.编辑器界面概述：

2.1.进入合图工具

用户可由主编辑器菜单栏上的”工具”-“合图”进入合图工具，如下图：

2.2.合图工具界面

2.2.1.工具栏：

分别为新建工程，打开工程，保存工程，另存工程为。

分别为添加精灵，删除精灵，添加文件夹。（精灵的意思是2d图片）

为发布精灵表（即导出合图）

2.2.2.精灵栏（2d图片资产栏）:参与合图的所有2d图片显示在这里。

2.2.3.合图窗口：合图后的图片集显示窗口。

2.2.4.属性栏：合图属性设置栏。

各项参数功能如下

算法：默认即可，无需调整。

允许旋转：在合图时，为节省图片占用大小，系统会对每张图片进行位置分配，

有些图片进行旋转。一般不勾选。

合图边框：指图片与画布外边缘的距离，单位为：像素，默认为0。比如数值为8，即所有图片的外边缘，与画布的外边缘距离为8个像素。一般项目不要设置小于5，数值过小，在UI切图时，容易出错。

小图间距：只合图的没一张小图边缘之间的距离，单位为：像素，默认为1.

裁剪模式：

当前合图裁剪模式分为无(No Trim)、裁剪(Trim)以及多边形裁剪(Polygon_outLine)模式三种，默认开启裁剪模式,示例如下：

无裁剪（ 86*122 tri:2） 开启裁剪（76*110 tri:2） 多边形裁剪（76*110 tri:13）

多边形裁剪模式下图元三角化，三角面片数量增多，一般绘制顶点比绘制像素消耗的性能少，实际应用中目前尚需看图片情况而定，透明区域较多时建议开启

纹理格式：指合成之后，要输出的图片的格式，目前有俩种图片格式：PNG.格式，TGA格式。

像素格式：像素存储格式，默认ARGB8888，一般没特殊需求，默认即可。

预乘alpha: alpha通道用预乘的方式进行处理。

合图路径：即合图生成后，存放的路径，选择目录仅限在当前工程。

合图名称：合图的名称，这个名称需根据项目需求，合理的命名。

缩放：图片缩放系数，当前系数如下："1"、"0.9375" 1024->960、"0.83333" 768->640、"0.5"、"0.46875" 2048->960、"0.41667" 1536->640、"0.25"

最大尺寸：合图输出的最大尺寸。

2的幂次大小：图片尺寸是2的n次幂，需勾选。

强制正方形：合图的尺寸为正方形。

3.合图工具工作流：

合图工具的作用是将多个UI2d图片，通过调整一些参数，合成一张图集，减少UI批次。下面以一个实际例子来演示合图工具的工作流：

3.1.首先将要做合图的2d图片集，放到项目美术公用的一个文件夹，文件位置自定义，不要放入工程文件中，方便后续参与制作的美术人员更改（添加或减少图片，都需要重新进行合图工作。）

3.2. 编辑器主窗口，工具-合图，打开合图工具：

3.3.文件夹中，选择所有参与合图的图片,鼠标拖入到合图工具的合图窗口：

3.4.图片集拖入窗口后，图片会自动排列，如下图1.

3.5.对合图进行属性参数设置：

目前编辑器一般用的参数设置如下：

合图边框：5~10之间，数值过小，引擎切图时容易出错

小图间距：2~5之间，数值过大，浪费空间。

裁剪模式：No trim（不裁剪）

纹理格式：TGA

预乘alpha：勾选

合图路径，名称：自定义填写

缩放：1

最大尺寸：看图片多少来定义.最大不超过1024.

2的幂次大小：勾选

强制正方形：勾选

需保证合图窗口种，所有小图占用资源合理，尽量最大化利用空间。不要出现画布过大，图片集只占用了很小部分的情况。

3.6.参数设置完之后，点击工具栏：发布精灵表。

之后，编辑器会在用户保存的路径下，自动生成俩个文件：一个.plist文件，一个用户设定格式的合图文件。其中.plist文件记录了图片大小 uv信息 以及对应贴图的路径

3.7.将导出tga格式或是png格式合图图片，重新按图片导入编辑器的方法，导入编辑器，对应生成.pvr，.ktx格式的文件，之后，将合图生成的.plist文件，与编辑器生成的.pvr, .ktx文件一起放入工程对应的UI图片合图路径下。

3.8.合图的应用：合图目前编辑器中只应用在UI编辑器。

打开工程种对应的.uix文件，图片组件下：

纹理：选择合图的.plist文件.

Plist：选择合图里需要的对应单张图片

应用即可，以上即合图的工作流。

备注：合图输入格式必须是PNG，输出必须是TGA。必须是2的N次幂正方形

4. .合图使用建议

在一帧的渲染过程中，场景会先被解析成场景树。场景树的每一个节点依次加入渲染队列中等待交付 GPU 渲染。GPU 接收渲染指令并执行的操作就叫做一次 drawcall; 如下图所示，合理使用贴图会降低drawcall数量，六条渲染指令合并成两个drawcall;

图1 UI场景渲染示意图

但由于UI下是按照节点层级顺序依次提交渲染指令的，如果不注意层级顺序，会导致drawcall数量增加,渲染性能反而不如不使用合图。如图2，场景同图1,但因为层级顺序的改变导致drawcall数量由2->5;

图2 UI场景渲染错误示意图

.同时，image的渲染与label、prograssbar、imagearray等不使用同一渲染指令，无法合批，添加控件时需注意尽量将使用同一合图的控件按顺序合在一起添加，当前若label仅显示在最前方，与其他控件不存在遮挡关系，可以设置其globalzorder 大于0，以使其最后渲染。

.同一UIScene中，尽量将需动态变化的image与静态的image（背景图等）合图分开；

.1024 x 1024的合图如果能拆成两张512x512 尽量拆成两张;

.尽量不要跨UIScene使用合图，如果需要，仅合并共用部分;