无限滚动与瓷砖地图画布没有重绘

Question

我在游戏引擎已经工作了大约6天直，夺回一切，我已经从制作游戏早在老的DOS天的教训。然而，当时有双缓冲，你可以简单地重绘所有的速度。唉，在HTML5中是另一回事。

到目前为止，我的发动机具有“层”，这是画布置于另一层之上，在0,0位置，我在屏幕上绘制它们的上下文一个比另一个坐标0,0。这意味着，你绘制一个图层，并在绘制阶段绘制图层（当然，如果它满足几个条件的话）。

我设法做了一个例程在画布上绘制平铺地图，并使用 - >this < - 文章我设法通过在每一帧上重绘来滚动。当你使用320x240时，这一切都可以正常工作，但是当我将它增加到640x480并将瓦片数加倍时，它会像地狱一样慢下来。

所以我想出了这个主意（仅用于本例中的缘故水平滚动），用稍大的画布：

1. 画在画布上所有的瓷砖，并通过相机的X轴偏移其x位置POS机。
2. 如果相机位置（相对于第一绘制瓦片）> tile_width
   1. 重绘整个画布，增加1到起始X瓷砖和
   2. 复位画布的X位置，以零

这我只会在每次滚动时都重新绘制画布，并且通过一些优化，我甚至可以仅重绘边缘拼贴而不是整个画布（反正这是主意）。

所以我的问题是：我会如何在代码？这可能是我连续六天在这台发动机上工作而感到厌倦，但我却没有看到它。另外，更让我困惑的是：如何在不影响画布其他部分的情况下绘制边缘贴图？ :(

我可以展示一些代码，但我认为我可以用一个小的jsfiddle例子来适应我自己的代码，但是如果您确实需要查看代码，我可能只是为此做一个小示例。但请注意，我的绘图代码只是文章代码的一个修改后的副本（用于测试滚动），因此您可以假定我没有写入tilemapping代码。我有，但我打赌我需要为这种情况重写它xD 。

提前感谢 - ！DARKGuy

Answer 1

好吧，我终于成功地做到这一点，解决我自己的问题 - 但是，它的速度更快，但还是战战兢兢我以前尝试如果任何人的兴趣请咨询 - 但SI我甚至没有收到任何评论，我认为没有人反对。

下面是GameDev的最终工作解决方案