4个方面入手 TiledMap 地图优化！W字干货分享

当项目里的地图越来越庞大和复杂，一些性能上的问题也开始逐渐出现。本文将从裁剪区域共享、Sprite 颜色数据去除、多图集渲染合批和分帧寻路四个方面，分享关于 TiledMap 地图的优化以及实现。

本次的测试用例是这样的一张地图，有6个图层，其中4个图块层、2个物件层。测试的数据来源是在浏览器环境下，利用 console.time 和 timeEnd 函数，打印对应的逻辑耗时或渲染耗时，需要注意的是每次运行的耗时并不是一致的，但是在取均值后，可以认为是相对可靠的。

_buildLayerAndGroup() {
  for (let i = 0, len = layerInfos.length; i < len; i++) {
    if (layerInfo instanceof cc.TMXLayerInfo) {
      // 创建自定义的ShareCullingTiledLayer
      let layer = child.getComponent(ShareCullingTiledLayer);
      // 传递、记录首个TiledLayer
      layer._init(layerInfo, firstLayer);
      firstLayer = firstLayer || layer;
    }
  }
}

_updateCulling() {
  // this._firstLayer为空时 表示为首个layer
  let firstLayer = this._firstLayer;
  if (!firstLayer) {
    // 进行裁剪区域计算
    this._updateViewPort(); 
    this._cacheCullingDirty = this._cullingDirty;
  } else {
    // 直接复用firstLayer的结果
    this._cullingRect = firstLayer._cullingRect;
    this._cullingDirty = firstLayer._cacheCullingDirty;
    return; 
  }
}

很简单地我们就完成了这个优化。Share Culling 实现起来并不麻烦，但效果是显著的。

可以看到即使只有6个图层的情况下，裁剪函数的平均耗时降低了35%左右，当图层数量增加的时候，优化效率会更高。

讲到裁剪区域，这里还有一个优化点。在初始化图块图层时，引擎会遍历整个地图的图块，将所有图块的信息保存起来，方便后续使用。这里可以改成区域加载，一开始只解析当前屏幕中的图块，随后在移动的时候，再动态解析行动方向上的图块——当然这个方案也有缺点，就是我们需要额外的内存空间保存对应的坐标是否已经解析过。

接下来是物件颜色去除，这里我们用在地图物件上，但其实这个优化在所有 Sprite 组件中都是可以适用的。

我们从底层步骤往上看，首先是着色器。仿照内置的 Effect 及 Material 创建 Effect 和 Material，因为我们不再需要颜色了，所以只要把着色器中关于颜色的输入输出、计算等的代码去除即可。

// 删除颜色相关输入输出处理
CCProgram vs %{
  in vec3 a_position;
  // in vec4 a_color;
  // out vec4 v_color;
   void main () {
    // v_color = a_color;
    gl_Position = pos;
  }
}%

// 删除颜色相关输入、计算
CCProgram fs %{
  precision highp float;
  // in vec4 v_color;
   void main () {
    vec4 o = vec4(1, 1, 1, 1);
    CCTexture(texture, v_uv0, o);
    // o *= v_color;
    gl_FragColor = o;
  }
}%

// 自定义顶点格式，去掉默认的颜色字段
let gfx = cc.gfx;
let vfmtNoColor = new gfx.VertexFormat([
    { name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
    { name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
    // { name: gfx.ATTR_COLOR, …},
]);

/**
 * 初始化this._renderData 创建自定义格式的renderData
 */
initData() {
  let data = this._renderData = new cc.RenderData();
  this._renderData.init(this);
   // 按我们自己的格式创建renderData
  data.createFlexData(0, 4, 6, vfmtNoColor);
}

最后，把渲染颜色的函数也移除掉。这样就完成了一个不带颜色的 Assembler。

    /**
     * 更新颜色 拜拜了😆
     */
    // updateColor () {
        
    // }

/**
 * 修改默认Assembler
*/
_resetAssembler() {
  let assembler = this._assembler = new NoColorSpriteAssembler();
  assembler.init(this);
   this.setVertsDirty();
},

如果你要运用在其他地方，只要给 Sprite 换上前面的 material 就可以了。

那么如何运用在地图物件中呢？我们通过继承实现一个 TiledObjectGroup，并重写 _init 函数。在里面，我们将默认的 Sprite 组件改成我们自定义的组件，并赋予对应的去除颜色的材质即可。

_init(groupInfo, mapInfo, texGrids, noColorMaterial) {
  let objects = groupInfo._objects;
  for (let i = 0, l = objects.length; i < l; i++) {
    imgNode = new cc.Node();
    let sp = imgNode.addComponent("NoColorSprite");
    sp.setMaterial(0, noColorMaterial);
  }
}

首先一样需要修改着色器相关代码。我们同样复制一份内置 Effect，之后在 Effect 的声明中，增加一些 texture 参数，来接收多张图集数据。

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      properties:
        texture: { value: white }
        texture1: { value: white }
        texture2: { value: white }
        texture3: { value: white }
        // 4 5 6...
}%

随后，通过顶点数据传递 texture_index，表示当前使用的是哪张图集。这里在着色器代码中根据 texture_index 从不同的图集取值就可以了。

CCProgram fs %{
  precision highp float;
  in float texture_idx;
   void main () {
    vec4 o = vec4(1, 1, 1, 1);
     #if USE_TEXTURE
      if (texture_idx <= 1.0) {
        CCTexture(texture, v_uv0, o);
      } else if (texture_idx <= 2.0) {
        CCTexture(texture1, v_uv0, o);
      } else if (texture_idx <= 3.0) {
        CCTexture(texture2, v_uv0, o);
      } 
      // else ...
    #endif
     gl_FragColor = o;
  }
}%

let gfx = cc.gfx;
var vfmtPosUvColorIndex = new gfx.VertexFormat([
  { name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
  { name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
  { name: "a_texture_idx", type: gfx.ATTR_TYPE_FLOAT32, num: 1 },
  { name: gfx.ATTR_COLOR, type: gfx.ATTR_TYPE_UINT8, num: 4, normalize: true },
]);

initData() {
  let data = this._renderData = new cc.RenderData();
  this._renderData.init(this);
   data.createFlexData(0, 4, 6, vfmtPosUvColorIndex);
}

// 填充textureIndex数据
updateTextureIdx(sprite) {
  let textureIdx = sprite._textureIdx;
  let verts = this._renderData.vDatas[0];
   let verticesCount = this.verticesCount;
  let floatsPerVert = this.floatsPerVert;
   for (let i = 0; i < verticesCount; i++) {
    let index = i * floatsPerVert + 4;
    verts[index] = textureIdx;
  }
}

updateRenderData(sprite) {
  if (sprite._vertsDirty) {
    this.updateUVs(sprite);
    this.updateVerts(sprite);
    this.updateTextureIdx(sprite);
    sprite._vertsDirty = false;
  }
}

接着是传递图集，我们为 objectGroup 传递一个 texture 变量，来保存所有物件图层使用到的图集。在创建完 objectGroup 之后，再按顺序地把图集传递给材质。

_buildLayerAndGroup: function () {
  let layerInfos = mapInfo.getAllChildren ();
  let textureSet = new Set();
  for (let i = 0, len = layerInfos.length; i < len; i++) {
    let layerInfo = layerInfos[i];
    let group = child.getComponent("MutilObjectGroup");
    group._init(this.objectMaterial, textureSet);
  }
  // 设置材质的texture属性
  let objectTextures = Array.from(textureSet);
  for (let i = 0; i < objectTextures.length; i++) {
    let idx = i === 0 ? '' : i;
    this.objectMaterial.setProperty(`texture${idx}`, objectTextures[i], 0);
  }
}

_init(groupInfo, mapInfo, texGrids, material, textureSet) {
  // texture资源 -> textureIndex
  let textureIndexMap = new Map();
  Array.from(textureSet).forEach((texture, idx) => textureIndexMap.set(texture, idx));
  for (let i = 0, l = objects.length; i < l; i++) {
    let sp = imgNode.getComponent("MutilSprite");
    let spf = sp.spriteFrame;
     // 收集所有图集
    let size = textureSet.size;
    textureSet.add(grid.tileset.sourceImage);
    // 更新Map
    if (size !== textureSet.size) {
      textureIndexMap.set(grid.tileset.sourceImage, size)
    }
     sp.setMaterial(0, material);
    // 设置textureIndex
    let index = textureIndexMap.get(sp.spriteFrame._texture);
    // 写死哈希值 使其可以合批
    sp.getMaterial(0).updateHash(9999);
    sp.setTextureIdx(index + 1);
  }
}

寻路是游戏中的重要部分，当地图面积增加时，寻路算法的损耗也会变成一个不可小视的部分。分帧的思路也是一个常见的优化方法，我们把一件复杂的工作拆成好几段，每帧做一段。它本身并没有减少运算的数量，但是可以帮你压平 CPU 的使用率曲线，避免突发的计算占用导致掉帧。

/**
 * 开始一个寻路任务。此函数为外部调用入口
 */
findRoad(start, target, wall, callback, config) {
  const { maxWalkPerFrame } = config;
  this._maxWalkPointAmount = maxWalkPerFrame || Number.MAX_VALUE;

  // ...存储数据
   // 立即执行一次寻路
  this._findPath();
}

/**
 * 此函数应由外部引用者每帧调用
 */
update() {
  this._findPath();
}
/**
 * 执行一次寻路
 */
_findPath() {
  let walkPointAmount = 0;
   while (walkPointAmount++ < this._maxWalkPointAmount) {
    // 访问路径点...
    const point = this._waitQueue.poll();
  }
}

/**
 * 添加一个寻路任务。此函数为外部调用入口
 * @param {FindRoadTask} task 寻路任务 
 */
addFindRoadTask(task) {
  if (this._finding) {
    this._taskList.push(task);
  } else {
    this._startFindRoadTask(task);
  }
}

/**
 * 寻路任务结束回调。不论寻路成功或失败都会调用本函数
 */
_onFindOver() {
  if (!!this._taskList.length) {
    this._startFindRoadTask(this._taskList.shift());
  } else {
    this._finding = false;
  }
}

如此一来，就可以保证我们每帧同时只会执行一个任务，进一步地压平曲线。我们用同样的测试用例进行测试，结果如下。

需要注意一下，这里的蓝色线就是刚刚优化后的绿色线。可以看到绿色线又进一步地更平缓了，最高也不超过 0.5ms，我们可以不用再担心寻路会对帧数造成影响了。

如果把本文介绍的优化全做了是什么效果？

裁剪区域共享（Share Culling）：

Sprite 颜色数据去除：

多图渲染合批：

分帧寻路+寻路任务统一管理：

往期精彩

• 一套全能免费Creator游戏开发框架！—Oops Framework
  

• Creator 2.x 项目升级 3.x！避坑要点与基础 API 差异总结

• 物理画线“救救小鸡”，支持自建关卡！技术教程分享
  

• Creator 3.x 资源加密方案！支持Web与原生
  

• 微信小游戏超4M怎么办？小游戏包体优化方案