画布性能图块集渲染答案

【问题标题】：Canvas performance tileset rendering画布性能图块集渲染
【发布时间】：2020-07-27 18:39:40
【问题描述】：

我在画布上做多人游戏。我有一个画布用于地面，第二个用于播放器，第三个用于播放器上方的地图元素。玩家视野远小于地图，所以当玩家移动所有 32px 中的每 2px 时，我会重新渲染地图。

我意识到我需要在地图画布中渲染其他玩家，因为例如当玩家向右移动时，其他玩家会因为玩家相机移动而在 2px 边缘处结结巴巴。

当我将其他玩家放在地面画布上时，一切正常，但性能非常糟糕。我应该将其他玩家放在另一个画布中并分别转换它们吗？我渲染只对玩家图块可见，但也许我需要在开始时渲染整个地面，并且每个移动显示只对玩家图块可见？ There is a video how it's looking at this moment.

【问题讨论】：

您是否以块的形式渲染地图？另外，你只渲染视野内的玩家吗？
您需要提供一些代码，否则我们无能为力来帮助提高性能。

标签： javascript canvas html5-canvas

【解决方案1】：

我会尝试在缓冲区画布上绘制更大的部分，并使用 drawimage 将其绘制到主画布上。

即地图（缓冲区）画布为 1600 * 1200 屏幕为 800 * 800 view center x is vx （这个功能是为了保持居中，你的版本已经有逻辑了）（您可能还需要 Math.max(vx, 0) 才能保持可见

drawimage(buffercanvas, vx - 400, vy - 400, 800, 800, 0, 0, 800, 800)

我发现这加快了我的游戏速度，但我使用 lineto() 等进行绘图，如果您使用精灵，我不确定它是否会提供相同的优势

【讨论】：