使用 <canvas> 方法处理大型 'map'
Approach with <canvas> for a large 'map'
我希望构建一个具有自上而下视图的基于图块的 javascript 游戏。想想：模拟城市经典。
我想知道对于大于用户视口的地图，正确的方法是什么。我应该为整个地图创建一个大 canvas 并让用户使用浏览器滚动，还是应该将 canvas 设置为浏览器的大小，然后手动实现滚动。
在这两种情况下，我都可以看出可能存在性能方面的考虑。大地图很大canvas会比较慢，小地图需要手动滚动（滚动时还要重绘？）
地图的最佳方法是保持屏幕外 canvas 比显示器略大。将地图渲染到它上面并将 canvas 渲染到显示器 canvas 上。虽然没有运动你不需要更新地图，当只有小像素运动时你只需要在运动方向上重新渲染新的东西。这是通过复制已渲染的内容并将其沿相反的移动方向移动，然后仅沿行进方向的两个边缘渲染新内容来完成的。如果放大，您可以只缩放背景地图并分段重新渲染它，而不是一次性渲染。缩小也一样。只渲染边缘，然后分段重新渲染地图。
查看 google 地图。他们就是这样做的。当然，您的地图图像不必等待它们来自服务器，因此用户不会在地图等待内容时看到空白区域。
这种方法是处理大型规则和不规则平铺地图的最佳方法。
如果地图是动画的，那么你只需要暴力破解它并在每个动画帧重新渲染地图，但仍然使用屏幕外 canvas。将地图动画速率降低到帧速率的一半可能是值得的。这样你就可以交错动画，将一半动画分布到每个奇数帧，另一半分布到偶数帧。
我希望构建一个具有自上而下视图的基于图块的 javascript 游戏。想想：模拟城市经典。
我想知道对于大于用户视口的地图，正确的方法是什么。我应该为整个地图创建一个大 canvas 并让用户使用浏览器滚动，还是应该将 canvas 设置为浏览器的大小，然后手动实现滚动。
在这两种情况下，我都可以看出可能存在性能方面的考虑。大地图很大canvas会比较慢，小地图需要手动滚动（滚动时还要重绘？）
地图的最佳方法是保持屏幕外 canvas 比显示器略大。将地图渲染到它上面并将 canvas 渲染到显示器 canvas 上。虽然没有运动你不需要更新地图，当只有小像素运动时你只需要在运动方向上重新渲染新的东西。这是通过复制已渲染的内容并将其沿相反的移动方向移动，然后仅沿行进方向的两个边缘渲染新内容来完成的。如果放大，您可以只缩放背景地图并分段重新渲染它，而不是一次性渲染。缩小也一样。只渲染边缘，然后分段重新渲染地图。
查看 google 地图。他们就是这样做的。当然，您的地图图像不必等待它们来自服务器，因此用户不会在地图等待内容时看到空白区域。
这种方法是处理大型规则和不规则平铺地图的最佳方法。
如果地图是动画的，那么你只需要暴力破解它并在每个动画帧重新渲染地图，但仍然使用屏幕外 canvas。将地图动画速率降低到帧速率的一半可能是值得的。这样你就可以交错动画，将一半动画分布到每个奇数帧，另一半分布到偶数帧。