游戏开发优化篇之合并图集
对于性能来说，很多情况都是用空间换时间。
然后在尽量减少空间的占用，在两者之间做抉择。
首先我们了解一下性能指标
- 帧率：每秒游戏循环执行的次数，即每秒多少帧 越高越好
- drawcall： 一帧中游戏调用gpu绘制图形次数，越少越好
3 . cpu性能： cpu执行速度，越快越好
4 . gpu性能： gpu执行速度，越快越好
5 . 内存： 游戏资源占用的运行时空间， 越低越好
6 . 网络请求数： 请求网络下载资源，越少越好
7 . 加载速度： 将硬盘中的资源加载到内存中，越快越好
8 . 包体大小： 游戏包大小，越小越好
9 . 节点数量： 游戏中存在的节点数量，越少越好
合并图集：
这是一个地球人都知道的手段。那为什么要合并图集？也只是将给初级开发者听听而已。
来一个cocoscreator的链接：https://docs.cocos.com/creator/manual/zh/asset-workflow/atlas.html
首先我们要了解，xxgl 的绘图过程都做了什么？
- 启用对应的着色器程序
this.gl.useProgram(this.program);
- 绑定纹理
this.gl.bindTexture(gl.TEXTURE_2D, batchNode.getTexture().getTexture());
3.传递顶点数据
let n = indexList.length;
let indices = new Uint8Array(indexList);
//放入缓冲区
let buffer = this.buffer.initBuffers(vertices, 'vertices');
let persize = vertices.BYTES_PER_ELEMENT;
// 设置数据 这里可以优化
let pointer = program.setPointer('a_Position', 3, gl.FLOAT, false, persize * count, 0);
let texPointer = program.setPointer('a_TexCoord', 2, gl.FLOAT, false, persize * count, persize * 3);
this.buffer.initBuffers(indices, 'indices', this.gl.ELEMENT_ARRAY_BUFFER);
- 执行绘制
let u_Sampler = program.getUniformLocation('u_Sampler');
if (!u_Sampler) {
console.log('Failed to get the storage location of u_Sampler');
return false;
}
gl.uniform1i(u_Sampler, 0);
//调用一次drawcall加一
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
合并图集的作用在哪里？
在着色器程序不变的情况下，如果我们很多sprite 使用的都是一张纹理上的碎图，只是纹理坐标不同，那我们就可以在第3步传递数据的时候做文章，其他几步就可以不动，然后让绘制一次完成。相反的，如果有两个sprite使用了不同的纹理，那么就需要绑定两次纹理。这些步骤就需要再执行一次。drawcall也就变成了2。
显然合并图集已经影响了帧率和drawcall。
对内存和包体的影响
- 这里先说明纹理所占内存的计算公式：长x宽x一个像素点的字节数。
- 如果碎图有白边的话合成图集会省去一部分内存，这个cocos官方已经说了；
- 其次，不论是png还是jpg格式，每张图片都会有头部信息，如果合并图集，也就是说如果有两张图片就少了一张图片的头部信息，如果多张呢？自然是省了内存又减小包体。
- 虽然合并图集会产生一个plist配置文件，增大了一些内存和包体的占用，但是对于减少的量来说是可以忽略的。
- 如果图集包含的碎图越多，节省的空间就越多。如果只是那么三五张图篇，打成图集可能没有省出多少空间。所以对于单张很大的背景图就不建议使用了。毕竟尺寸的限制是2048*2048，合并不了几张还产生了plist文件。
- 如果图集使用不当，模块使用的资源划分的不是很标准，也会出现一个图集利用率的问题。也可以理解为内存的浪费，例如打开的一个界面中就用到了图集中的几张碎图。所以使用图集的时候要注意图片资源的划分情况。
对网络请求次数的影响
这个是显而易见的，十张图请求十次，合成图集就请求两次（因为多出一个plist文件）。省了很多网络链接的过程。但是要注意图集的大小和体积，过大的图集也会造成不良影响。
对加载速度的影响
首先我们要看看文件读写的步骤：
- 首先建立通道。
- 然后建立数据存储空间。
- 然后开始读写数据。
- 关闭流。
合并图集肯定会减少流的开启和关闭的次数，自然省去了不少加载时间。
结语
总体来看，合并图集的好处真是太多了，没有理由不用啊！
欢迎扫码关注公众号《微笑游戏》，浏览更多内容。
本文由博客群发一文多发等运营工具平台 OpenWrite 发布
