【小程序】游戏开发优化篇之合并图集

• Z时代
• 2024-01-10
• 分类：技术分享

 this.gl.useProgram(this.program);

this.gl.bindTexture(gl.TEXTURE_2D, batchNode.getTexture().getTexture());

    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);

对于性能来说，很多情况都是用空间换时间。
然后在尽量减少空间的占用，在两者之间做抉择。

首先我们了解一下性能指标

1. 帧率：每秒游戏循环执行的次数，即每秒多少帧 越高越好
2. 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 的绘图过程都做了什么？

1. 启用对应的着色器程序

 this.gl.useProgram(this.program);

1. 绑定纹理

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);

1. 执行绘制

    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。

对内存和包体的影响

1. 这里先说明纹理所占内存的计算公式：长x宽x一个像素点的字节数。
2. 如果碎图有白边的话合成图集会省去一部分内存，这个cocos官方已经说了；
3. 其次，不论是png还是jpg格式，每张图片都会有头部信息，如果合并图集，也就是说如果有两张图片就少了一张图片的头部信息，如果多张呢？自然是省了内存又减小包体。
4. 虽然合并图集会产生一个plist配置文件，增大了一些内存和包体的占用，但是对于减少的量来说是可以忽略的。
5. 如果图集包含的碎图越多，节省的空间就越多。如果只是那么三五张图篇，打成图集可能没有省出多少空间。所以对于单张很大的背景图就不建议使用了。毕竟尺寸的限制是2048*2048，合并不了几张还产生了plist文件。
6. 如果图集使用不当，模块使用的资源划分的不是很标准，也会出现一个图集利用率的问题。也可以理解为内存的浪费，例如打开的一个界面中就用到了图集中的几张碎图。所以使用图集的时候要注意图片资源的划分情况。

对网络请求次数的影响

这个是显而易见的，十张图请求十次，合成图集就请求两次（因为多出一个plist文件）。省了很多网络链接的过程。但是要注意图集的大小和体积，过大的图集也会造成不良影响。

对加载速度的影响

首先我们要看看文件读写的步骤：

1. 首先建立通道。
2. 然后建立数据存储空间。
3. 然后开始读写数据。
4. 关闭流。

合并图集肯定会减少流的开启和关闭的次数，自然省去了不少加载时间。

结语

总体来看，合并图集的好处真是太多了，没有理由不用啊！
欢迎扫码关注公众号《微笑游戏》，浏览更多内容。

欢迎扫码关注公众号《微笑游戏》，浏览更多内容。

以上是 【小程序】游戏开发优化篇之合并图集 的全部内容， 来源链接： utcz.com/a/105901.html