HTML5游戏画布非常大的地图？

Question

我正在使用六角形瓷砖。 我想制作一张非常大的地图，就像一张世界地图一样。

一个图块的宽度为60px，高度为40px。 并且我的世界将有成千上万的线条（从左到右）。

但这通常很难加载。 如何使用超大地图？ 我该如何解决滞后问题？

Answer 1

不要“绘制”可见视口之外的图块。

Answer 2

我同意，请勿在可见区域之外绘制瓷砖。

您还可能会遇到简单地遍历大量数据并进行计算以解决问题的问题，您可以尝试将背景预渲染为svg或什至非矢量图像格式。

Answer 3

您的地图中有很多像素 ，这些像素1行的宽度超过6000+像素！

通常，.jpg压缩图块是背景带宽最有效的图像。

但是根据您的情况，您可以尝试将SVG用于地图背景而不是像素地图。

SVG仅记住地图上的直线和曲线。

因此，可以将SVG视为不需要“记住”线条之间的空白像素的图像。

这意味着客户端计算机几乎没有完全渲染的背景可放入内存。

例如：

这张SVG世界地图的下载大小为656k，在视图盒中完全渲染后仍然只有1mb：

http://upload.wikimedia.org/wikipedia/commons/d/df/Worldmap_location_NED_50m.svg

同一张地图的.png下载量为160k，但完全渲染到6000+像素宽时，则为15mb +。

SVG也是“平铺”的理想选择。

它具有一个内置的视图viewbox ，可让您仅查看由画布表示的地图部分。

SVG具有缩放的附加好处，而不会损失很多图像质量。 （缩放而不像素化）