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

时间:2013-05-31 17:54:35

标签: javascript performance map

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

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

它看起来像一个绘图应用程序,除了设置绘制像素,你用它来绘制一个带有六角形图块的地图。您只需单击生成新地图并提供所需的地图大小(例如64个瓷砖宽度乘以64个瓷砖高度)并为您绘制地图,瓷砖是具有相对背景图像作为纹理的简单div。使用简单的for循环逐个绘制平铺。但随着代码规模的扩大,我的担忧也随之增加。

因为我在自己的地图编辑器上创建的地图将用于在线多人游戏,所以它将是巨大的!例如,在即将到来的游戏中支持至少20000个用户,应该至少有20000个瓷砖,仅供用户占用,更不用说他们将拥有的领土,山脉,丛林,野蛮部落等等。

我已经进行了计算,发现512 x 512(大约262000个图块)地图可以充分满足那些用户的需求。但是,地图将是巨大的。所以我决定测试并看看用尽可能少的过程创建的代码制作这样的地图需要多少加载时间我发现它需要将近一分钟或更长时间,这是不可接受的游戏玩家的观点。

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

我正在考虑一个巨大的地图,它甚至不适合浏览器的窗口,我为什么要绘制整个地图?为什么不加载用户当前正在查看的部分。仅加载/绘制所需的零件,这样可以减少加载时间并提高性能。但事实证明这是一项真正的挑战,而且在线实施此类功能的资源非常有限。从哪儿开始?如何解决问题和各自的解决方案?

1 个答案:

答案 0 :(得分:1)

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