4個(gè)方面入手 TiledMap 地圖優(yōu)化！W字干貨分享

當(dāng)項(xiàng)目里的地圖越來越龐大和復(fù)雜，一些性能上的問題也開始逐漸出現(xiàn)。本文將從裁剪區(qū)域共享、Sprite 顏色數(shù)據(jù)去除、多圖集渲染合批和分幀尋路四個(gè)方面，分享關(guān)于 TiledMap 地圖的優(yōu)化以及實(shí)現(xiàn)。

本次的測(cè)試用例是這樣的一張地圖，有6個(gè)圖層，其中4個(gè)圖塊層、2個(gè)物件層。測(cè)試的數(shù)據(jù)來源是在瀏覽器環(huán)境下，利用 console.time 和 timeEnd 函數(shù)，打印對(duì)應(yīng)的邏輯耗時(shí)或渲染耗時(shí)，需要注意的是每次運(yùn)行的耗時(shí)并不是一致的，但是在取均值后，可以認(rèn)為是相對(duì)可靠的。

_buildLayerAndGroup() {
  for (let i = 0, len = layerInfos.length; i < len; i++) {
    if (layerInfo instanceof cc.TMXLayerInfo) {
      // 創(chuàng)建自定義的ShareCullingTiledLayer
      let layer = child.getComponent(ShareCullingTiledLayer);
      // 傳遞、記錄首個(gè)TiledLayer
      layer._init(layerInfo, firstLayer);
      firstLayer = firstLayer || layer;
    }
  }
}

_updateCulling() {
  // this._firstLayer為空時(shí) 表示為首個(gè)layer
  let firstLayer = this._firstLayer;
  if (!firstLayer) {
    // 進(jìn)行裁剪區(qū)域計(jì)算
    this._updateViewPort(); 
    this._cacheCullingDirty = this._cullingDirty;
  } else {
    // 直接復(fù)用firstLayer的結(jié)果
    this._cullingRect = firstLayer._cullingRect;
    this._cullingDirty = firstLayer._cacheCullingDirty;
    return; 
  }
}

很簡(jiǎn)單地我們就完成了這個(gè)優(yōu)化。Share Culling 實(shí)現(xiàn)起來并不麻煩，但效果是顯著的。

可以看到即使只有6個(gè)圖層的情況下，裁剪函數(shù)的平均耗時(shí)降低了35%左右，當(dāng)圖層數(shù)量增加的時(shí)候，優(yōu)化效率會(huì)更高。

講到裁剪區(qū)域，這里還有一個(gè)優(yōu)化點(diǎn)。在初始化圖塊圖層時(shí)，引擎會(huì)遍歷整個(gè)地圖的圖塊，將所有圖塊的信息保存起來，方便后續(xù)使用。這里可以改成區(qū)域加載，一開始只解析當(dāng)前屏幕中的圖塊，隨后在移動(dòng)的時(shí)候，再動(dòng)態(tài)解析行動(dòng)方向上的圖塊——當(dāng)然這個(gè)方案也有缺點(diǎn)，就是我們需要額外的內(nèi)存空間保存對(duì)應(yīng)的坐標(biāo)是否已經(jīng)解析過。

接下來是物件顏色去除，這里我們用在地圖物件上，但其實(shí)這個(gè)優(yōu)化在所有 Sprite 組件中都是可以適用的。

我們從底層步驟往上看，首先是著色器。仿照內(nèi)置的 Effect 及 Material 創(chuàng)建 Effect 和 Material，因?yàn)槲覀儾辉傩枰伾耍?strong style="box-sizing: border-box;">所以只要把著色器中關(guān)于顏色的輸入輸出、計(jì)算等的代碼去除即可。

// 刪除顏色相關(guān)輸入輸出處理
CCProgram vs %{
  in vec3 a_position;
  // in vec4 a_color;
  // out vec4 v_color;
   void main () {
    // v_color = a_color;
    gl_Position = pos;
  }
}%

// 刪除顏色相關(guān)輸入、計(jì)算
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;
  }
}%

// 自定義頂點(diǎn)格式，去掉默認(rèn)的顏色字段
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 創(chuàng)建自定義格式的renderData
 */
initData() {
  let data = this._renderData = new cc.RenderData();
  this._renderData.init(this);
   // 按我們自己的格式創(chuàng)建renderData
  data.createFlexData(0, 4, 6, vfmtNoColor);
}

最后，把渲染顏色的函數(shù)也移除掉。這樣就完成了一個(gè)不帶顏色的 Assembler。

    /**
     * 更新顏色 拜拜了??
     */
    // updateColor () {
        
    // }

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

如果你要運(yùn)用在其他地方，只要給 Sprite 換上前面的 material 就可以了。

那么如何運(yùn)用在地圖物件中呢？我們通過繼承實(shí)現(xiàn)一個(gè) TiledObjectGroup，并重寫 _init 函數(shù)。在里面，我們將默認(rèn)的 Sprite 組件改成我們自定義的組件，并賦予對(duì)應(yīng)的去除顏色的材質(zhì)即可。

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

首先一樣需要修改著色器相關(guān)代碼。我們同樣復(fù)制一份內(nèi)置 Effect，之后在 Effect 的聲明中，增加一些 texture 參數(shù)，來接收多張圖集數(shù)據(jù)。

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

隨后，通過頂點(diǎn)數(shù)據(jù)傳遞 texture_index，表示當(dāng)前使用的是哪張圖集。這里在著色器代碼中根據(jù) 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數(shù)據(jù)
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;
  }
}

接著是傳遞圖集，我們?yōu)?objectGroup 傳遞一個(gè) texture 變量，來保存所有物件圖層使用到的圖集。在創(chuàng)建完 objectGroup 之后，再按順序地把圖集傳遞給材質(zhì)。

_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);
  }
  // 設(shè)置材質(zhì)的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);
    // 設(shè)置textureIndex
    let index = textureIndexMap.get(sp.spriteFrame._texture);
    // 寫死哈希值 使其可以合批
    sp.getMaterial(0).updateHash(9999);
    sp.setTextureIdx(index + 1);
  }
}

尋路是游戲中的重要部分，當(dāng)?shù)貓D面積增加時(shí)，尋路算法的損耗也會(huì)變成一個(gè)不可小視的部分。分幀的思路也是一個(gè)常見的優(yōu)化方法，我們把一件復(fù)雜的工作拆成好幾段，每幀做一段。它本身并沒有減少運(yùn)算的數(shù)量，但是可以幫你壓平 CPU 的使用率曲線，避免突發(fā)的計(jì)算占用導(dǎo)致掉幀。

/**
 * 開始一個(gè)尋路任務(wù)。此函數(shù)為外部調(diào)用入口
 */
findRoad(start, target, wall, callback, config) {
  const { maxWalkPerFrame } = config;
  this._maxWalkPointAmount = maxWalkPerFrame || Number.MAX_VALUE;

  // ...存儲(chǔ)數(shù)據(jù)
   // 立即執(zhí)行一次尋路
  this._findPath();
}

/**
 * 此函數(shù)應(yīng)由外部引用者每幀調(diào)用
 */
update() {
  this._findPath();
}
/**
 * 執(zhí)行一次尋路
 */
_findPath() {
  let walkPointAmount = 0;
   while (walkPointAmount++ < this._maxWalkPointAmount) {
    // 訪問路徑點(diǎn)...
    const point = this._waitQueue.poll();
  }
}

/**
 * 添加一個(gè)尋路任務(wù)。此函數(shù)為外部調(diào)用入口
 * @param {FindRoadTask} task 尋路任務(wù) 
 */
addFindRoadTask(task) {
  if (this._finding) {
    this._taskList.push(task);
  } else {
    this._startFindRoadTask(task);
  }
}

/**
 * 尋路任務(wù)結(jié)束回調(diào)。不論尋路成功或失敗都會(huì)調(diào)用本函數(shù)
 */
_onFindOver() {
  if (!!this._taskList.length) {
    this._startFindRoadTask(this._taskList.shift());
  } else {
    this._finding = false;
  }
}

如此一來，就可以保證我們每幀同時(shí)只會(huì)執(zhí)行一個(gè)任務(wù)，進(jìn)一步地壓平曲線。我們用同樣的測(cè)試用例進(jìn)行測(cè)試，結(jié)果如下。

需要注意一下，這里的藍(lán)色線就是剛剛優(yōu)化后的綠色線。可以看到綠色線又進(jìn)一步地更平緩了，最高也不超過 0.5ms，我們可以不用再擔(dān)心尋路會(huì)對(duì)幀數(shù)造成影響了。

如果把本文介紹的優(yōu)化全做了是什么效果？

裁剪區(qū)域共享（Share Culling）：

Sprite 顏色數(shù)據(jù)去除：

多圖渲染合批：

分幀尋路+尋路任務(wù)統(tǒng)一管理：

往期精彩

• 一套全能免費(fèi)Creator游戲開發(fā)框架！—Oops Framework
  

• Creator 2.x 項(xiàng)目升級(jí) 3.x！避坑要點(diǎn)與基礎(chǔ) API 差異總結(jié)

• 物理畫線“救救小雞”，支持自建關(guān)卡！技術(shù)教程分享
  

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

• 微信小游戲超4M怎么辦？小游戲包體優(yōu)化方案