画布性能图块渲染

时间:2020-07-27 18:39:40

标签: javascript canvas html5-canvas

我正在画布上进行多人游戏。我有一块画布用于地面,第二块用于播放器,第三块用于播放器上方的地图元素。播放器的视野比地图小得多,因此当播放器移动所有32px的每2px时,我会重新渲染地图。

我认识到我需要在地图画布上渲染其他玩家,因为当玩家向右移动时,其他玩家会因为玩家的摄像机移动而在2px的空白处口吃我的位置。

当我将其他播放器放在地面画布上时,一切正常,但是性能很差。我应该将其他玩家放在另一个画布中并分别对其进行转换吗?我只渲染对玩家图块可见,但也许我需要在开始时渲染整个地面,而每个动作显示仅对玩家图块可见? There is a video how it's looking at this moment.

1 个答案:

答案 0 :(得分:0)

我会尝试在缓冲画布上绘制较大的部分,并在每转时使用drawimage将其绘制到主画布上。

即地图(缓冲)画布为1600 * 1200 屏幕是800 * 800 查看中心x是vx(此功能将保持居中,您已经拥有适用于您版本的逻辑) (您可能还需要Math.max(vx,0)才能保持可见状态

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

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