javascript - 如何优化动态加载 HTML5 游戏世界的 Canvas 渲染？

Question

我一直在为我自己的游戏开发等距游戏引擎。目前，这是一个巨大的开放世界， map 数据是从 Node.js 服务器动态检索的。

为了理解我在做什么……在很大程度上，这是一个基于图 block 的世界。因此，每个 map 的最大列数、行数 (19)，每个世界的最大 map 数列、行数 (6)。这是一张 6x6 的世界地图，每张 map 由 19x19 block 组成。每当玩家移动到新的 map /区域时，客户端都会请求周围 map 的 3x3 矩阵，其中中心 map 是玩家当前所在的 map 。这部分优化得相当好。

然而，我的问题是找到一种优化 Canvas 上绘图的好方法。目前，我这样做没有太多延迟，但我也有一台快速的计算机，但我担心有时它可能会导致其他人延迟/困惑其他图形的渲染。

基本上，我现在的工作方式是当数据从服务器发送回时，它会添加每个 map 以及必须渲染到缓冲区中的每个列/行的所有图 block 图像。游戏循环的每个循环基本上都会将 25 个图 block 的一小部分渲染到特定 map 的隐藏 Canvas 上。当所有请求的 map 完成渲染后(几个游戏循环后)，相机将继续将这些隐藏的 map 合并到 3x3 矩阵的 1 个大 map Canvas 中(通过从隐藏的 Canvas 中切片部分并将它们合并到新的 Canvas 上) Canvas )。

理想情况下，我希望整个过程是异步的。但我一直在研究网络 worker ，显然他们不能很好地支持 Canvas 。有没有人想出一个流程来做类似的事情并保持良好的优化？

谢谢!

Answer 1

下面是在每帧中渲染 19x19 网格的示例。在每一帧中从右到左从上到下添加一个新的随机图 block 。网格以相同的顺序渲染，您可以看到这适用于重叠的图 block 。

我认为最好保存每个图 block 并创建一个渲染整个网格的函数。因此，如果玩家在 3x3 周围区域获得更新，则下载并保留这些图 block 并重新渲染整个网格。

更新我提供了一个消除过度绘制的功能和一个切换功能。这可能会提高某些人的表现。它从下到上从左到右绘制。这首先绘制覆盖的项目，并通过 globalCompositeOperation“distination-over”告诉 Canvas 在添加新内容时保留现有像素。这应该意味着在 Canvas 上放置像素的工作量更少，因为它不会在未使用的像素上绘制。

var cols = 19;
var tile_width = 32;
var rows = 19;
var tile_height = 16;
var y_offset = 64;

var h_tw = tile_width / 2;
var h_th = tile_height / 2;

var frames = 0;
var fps = "- fps";

setInterval(function(){
  fps = frames + " fps";
  frames = 0;
}, 1000);

var can = document.getElementById('tile');
var ctx = can.getContext('2d');

var wcan = document.getElementById('world');
var wctx = wcan.getContext('2d');
wcan.width = cols * tile_width;
wcan.height = rows * tile_height + y_offset;

var tiles = initTiles();


document.getElementById('toggle').addEventListener('click', function() {
  if (this.innerHTML == 'renderWorld') {
    renderFn = renderWorldNoOverdraw;
    this.innerHTML = "renderWorldNoOverdraw";
  } else {
    renderFn = renderWorld;
    this.innerHTML = "renderWorld";
  }
});

//renderWorld();
var ani_x = cols;
var ani_y = 0;
var renderFn = renderWorld;
ani();


function initTiles () {
  var tiles = [];
  
  for (var y = 0; y < rows; y++) {
    var row = [];
    for (var x = 0; x < cols; x++) {
      var can = document.createElement('canvas');
      can.width=tile_width;
      can.height=tile_height+y_offset;
      row[x]=can;
    }
    tiles[y] = row;
  }  
  return tiles;
}

function ani() {
  var can = tiles[ani_y][--ani_x]
  
  if (ani_x == 0) ani_x = cols, ani_y++;
  ani_y %= rows;
  var ctx = can.getContext('2d');
  randTile(can, ctx);
  
  renderFn();
  requestAnimationFrame(ani);
}

// renders from bottom left to right and skips
// drawing over pixels already present.
function renderWorldNoOverdraw() {
  frames++;
  wctx.clearRect(0,0,wcan.width,wcan.height);
  wctx.save();
  wctx.globalCompositeOperation = "destination-over";
  wctx.translate(0, y_offset);
  var x_off = 0;
  var y_off = 0;
  var y_off2 = 0;
  for (var y = rows; y--;) {
    x_off = (cols * h_tw)- ((rows-y) * h_tw);
    y_off = y * h_th + tile_height;
    y_off2 = y_off;
    for (var x = 0; x < cols; x++) {
      var can = tiles[y][x];
      wctx.drawImage(can, x_off, y_off2 + y_offset);
      y_off2 -= h_th;
      x_off += h_tw;
    }
  }
  wctx.translate(0,-y_offset);
  wctx.fillStyle = "#ddaadd";
  wctx.fillRect(0,0,wcan.width, wcan.height);
  wctx.restore();
  wctx.fillStyle= "black";
  wctx.fillText(fps, 10, 10);
}

function renderWorld() {
  frames++;
  wctx.fillStyle = "#CCEEFF";
  wctx.fillRect(0, 0, wcan.width, wcan.height);
  wctx.save();
  wctx.translate(0, y_offset);
  var x_off = 0;
  var y_off = 0;
  var y_off2 = 0;
  for (var y = 0; y < rows; y++) {
    x_off = (cols * h_tw) + (y * h_tw) - h_tw;
    y_off = y * h_th;
    y_off2 = y_off;
    for (var x = cols; x--;) {
      var can = tiles[y][x];
      wctx.drawImage(can, x_off, y_off2 - 64);
      y_off2 += h_th;
      x_off -= h_tw;
    }
    y_off += h_th;
    x_off -= h_tw;
  }
  wctx.restore();
    wctx.fillStyle= "black";
  wctx.fillText(fps, 10, 10);
}

function randTile(can, ctx) {
  var maxH = can.height - 24;
  var ranH = Math.floor(Math.random() * maxH);
  var h = Math.max(ranH, 1);
  ctx.clearRect(0, 0, can.width, can.height);
  ctx.beginPath();
  ctx.save();
  ctx.translate(0, can.height - 16);

  ctx.moveTo(0, 8);
  ctx.lineTo(16, 0);
  ctx.lineTo(32, 8);
  ctx.lineTo(16, 16);
  ctx.lineTo(0, 8);
  ctx.strokeStyle = "#333333";
  ctx.stroke();

  // random floor color
  var colors = ["#dd9933", "#22aa00", "#66cccc", "#996600"];
  ctx.fillStyle = colors[Math.floor(Math.random() * 4)];
  ctx.fill();

  // random building
  if (Math.floor(Math.random() * 8) == 0) {
    ctx.beginPath();
    ctx.moveTo(8, 8);
    ctx.lineTo(8, -h - 4);
    ctx.lineTo(16, -h);
    ctx.lineTo(16, 12);
    ctx.lineTo(8, 8);
    ctx.stroke();
    ctx.fillStyle = "#333333";
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(16, 12);
    ctx.lineTo(16, -h);
    ctx.lineTo(24, -h - 4);
    ctx.lineTo(24, 8);
    ctx.lineTo(16, 12);
    ctx.stroke();
    ctx.fillStyle = "#999999";
    ctx.fill()

    ctx.beginPath();
    ctx.moveTo(16, -h);
    ctx.lineTo(24, -h - 4);
    ctx.lineTo(16, -h - 8);
    ctx.lineTo(8, -h - 4);
    ctx.moveTo(16, -h);
    ctx.stroke();
    ctx.fillStyle = "#CCCCCC";
    ctx.fill()
  }
  ctx.restore();
}

body {
  background-color: #444444;
}

<button id="toggle">renderWorld</button><br/>
<canvas id='tile' width="32" height="32" style="display:none"></canvas>
<canvas id="world" width="608" height="368">
</canvas>