php - HTML5游戏画布超大图？

Question

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

一个瓦片是 60px 宽和 40px 高。我的世界将有一千块瓷砖（从左到右）。

但这通常很难加载。我该怎么做才能使用非常大的地图？我该如何解决滞后问题？

score 4 · Accepted Answer

4

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

于 2013-08-29T17:17:13.793 回答

score 1 · Accepted Answer

我同意，不要在可视区域之外绘制瓷砖。

您也可能会遇到问题，只需遍历这么多数据并进行计算即可解决问题，您可以尝试将背景预渲染为 svg 甚至非矢量图像格式。

score 1 · Accepted Answer

您在 1 行 6000+ 像素宽的地图中有很多像素！

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

但在您的情况下，您可以尝试使用 SVG 作为地图背景而不是像素地图。

SVG 只记住地图的线条和曲线。

因此，将 SVG 视为您不必“记住”行之间的空白像素的图像。

这意味着客户端计算机要放入内存的完全渲染背景要少得多。

例如：

这张 SVG 世界地图的下载量为 656k，但仍然只有大约 1mb 完全呈现在视图框中：

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

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

它具有内置功能viewbox，可让您仅查看画布所代表的地图部分。

SVG 具有在不损失图像质量的情况下进行缩放的额外好处。（缩放而不像素化）

3 回答 3