无限滚动带有平铺地图的画布，无需重绘

Question

我已经在游戏引擎中工作了大约6天，重新学习了我在旧的DOS时代制作游戏所学到的一切。但是，当时有双缓冲，您可以简单地以极快的速度重绘所有内容。唉，在HTML5中，这是另一个故事。

到目前为止，我的引擎有“图层”，这些画布是一个在另一个上面放置的画布，在0,0位置，我在屏幕坐标0,0处将它们的上下文相互叠加。这意味着，您在一个图层中绘制并在渲染阶段绘制图层（当然，如果它符合一些条件）。

我设法制作了一个在画布上绘制平铺地图的例程，并使用 - ＆gt; this＆lt; - 文章我设法通过重绘每一帧来滚动它。当你使用320x240时，这一切都运行得很好，但是当我将它增加到640x480并且是平铺计数的两倍时，它会像地狱一样慢下来。

所以我提出了这个想法（为了这个例子，只有水平滚动），使用稍大的画布：

1. 使用所有图块绘制画布，并通过相机的X位置偏移其x位置。
2. 如果相机位置（相对于第一个绘制的图块）＆gt; tile_width
   1. 重绘整个画布，将1增加到起始X tile AND
   2. 将画布的X位置重置为零

这样，我只会在每次滚动时重绘画布，并且通过一些优化，我甚至可以仅重绘边缘图块而不是整个画布（无论如何都是这个想法）。

所以我的问题是：我如何在代码中做到这一点？！我可能已经厌倦了连续工作六天这个引擎，但我只是没有看到它。另外，更让我困惑的是：如何绘制边缘瓷砖而不影响画布的其余部分？ ：（

我可以显示一些代码，但我认为我可以使用一个小的jsfiddle示例，我可以适应我自己的代码。但是，如果你真的需要看代码，我可能会为此做一个小样本。请注意，我的绘图代码只是文章代码的修改副本（用于测试滚动），因此您可以假设我没有编写tilemapping代码。我有，但我打赌我需要为这种情况重写它xD。

提前致谢！ - DARKGuy

Answer 1

好吧，我终于设法做到并解决了我自己的问题 - 然而，它比我之前的尝试更快但仍然跳跃。如果有人有兴趣请问 - 但由于我甚至没有一个评论，我认为没有人反正。

以下是GameDev

的最终工作解决方案