如何绘制/加载当前正在查看的页面的一部分？

Question

我目前正在开发一个基于 javascript 的地图生成器应用程序，我已经编写了 400 多行代码，用于创建六边形地图、为瓷砖添加坐标、在草、海洋和城堡等元素上添加纹理, 单位等。

我为这个离线地图编辑器添加了很多有用的功能，比如放大和缩小，打开/关闭网格，拖动地图等等，我目前正在研究如何添加保存并将功能加载到此离线游戏地图编辑器中。

它看起来有点像一个绘图应用程序，除了设置了绘图像素之外，您可以使用它来绘制带有十六进制图块的地图。您只需单击 Generate a new map 并提供所需的地图大小（例如 64 块宽度 x 64 块高度）并为您绘制地图，这些块是简单的 div，具有相对背景图像作为纹理。使用简单的 for 循环，一张一张地绘制瓷砖。但随着代码越来越大，我的担心也越来越多。

因为我在自己的地图编辑器上创建的地图将用于在线多人游戏，所以它会很大！比如下个游戏要支持至少20000个用户，至少要有20000个瓦片，只供用户占据，更不用说他们将拥有的领土，山脉，丛林，野蛮部落等等。..

我进行了计算，发现一张 512 x 512（约 262000 个图块）的地图足以满足这么多用户的需求。但是，地图会很大。所以我决定测试并查看使用我以尽可能少的过程创建的代码制作这样一张地图需要多少加载时间，我发现这需要将近一分钟或更长时间，这是不可接受的，从玩家视角。

例如在如此巨大的地图中放大将意味着循环遍历每 262000 个图块以更改其大小。虽然这个过程比从头开始绘制/加载地图花费的时间更少，但它仍然很慢。

我在想一张地图太大了，连浏览器的窗口都放不下，我为什么要画整个地图？为什么不加载用户当前正在查看的部分。仅加载/绘制需要的部分，这样可以减少加载时间并提高性能。但这被证明是一个真正的挑战，网上关于实现这种功能的资源非常有限。从哪儿开始？如何解决问题和相应的解决方案？

Answer 1

我会先将您的顾虑分开一点。您可以查看 WxH 像素数，并且用户屏幕的左上角位于 (x,y) 坐标处。 正如您所指出的，加载整个地图是疯狂的。但是通过了解游戏世界的大小以及用户在该世界中的坐标，您可以轻松选择视野中的项目子集。 请记住，在缩小的分辨率下，您不应该使用全尺寸图像。加载 262000 张图像（仅用于地图！）将会太重并且可能会崩溃。对于不同的缩放级别，您应该有不同的图像。这是一个更大的问题，你应该买一本书并在谷歌上做更多的研究。但至少考虑“用户在哪里”与“世界上的项目在哪里”是我要开始的地方。 希望对您有所帮助。