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

_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; 
  }
}

// 删除颜色相关输入输出处理
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);
}

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

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

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

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

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

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

/**
 * 开始一个寻路任务。此函数为外部调用入口
 */
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;
  }
}