我正在构建一个浏览器游戏。这是一款基于图 block 的游戏(如果您熟悉的话，它与《神奇宝贝》非常相似)。大约 9 年前，我使用 C++ 构建了一个类似的游戏。我仍然保留着我使用过的所有图像和音乐。我想使用 Javascript(也可能是 html5)重建这个游戏，以便人们可以在线玩它。
我遇到的问题是某些 map 太大(~300000px * 300000px)，无法作为图像加载。我搜索了“按需加载”，确实找到了一些可以进行“延迟加载”的库，但还有另一个问题:大约有 3000 个 map 。玩完整个游戏的玩家最终会缓存 50 张 GIF 图像。更不用说服务器网络的压力了。
因为游戏是基于图 block 的，并且通常(~300000px * 300000px) map 仅使用大约 100 个不同的 map 组件(< 2MB)，所以我的方法是将 map 使用的所有组件放入一个图像中，并将其与像这样平铺 map :
来自map1.png的平铺(0, 0)，宽度200，高度200，offset_x 450，offset_y 600
来自map1.png的平铺(0, 1)，宽度100，高度100，offset_x 650，offset_y 500
...
因此，客户端只需下载 2MB 的图像文件加上 500KB 的切片 map ，而不需要下载整个 map 作为图像。真实 map 可以在本地形成并按需渲染:
玩家位于图 block (100, 100)，渲染矩形 (70, 70, 130, 130)
我的问题是: 是否有任何库可以按需进行图像创建和渲染？ 有现成的例子或教程吗？ CSS Sprite 在这里可以做什么？ 我还可以选择其他任何关键字和链接吗？
谢谢!
最佳答案
您可以使用纯 JavaScript 创建图像，无需任何使用 Canvas 的库。 但我不明白为什么你的 imgs 大约是 2M，当它们是 200*200 时...... Sprite 可能会有所帮助，但大于 3000 像素的 Sprite 会出现一些问题，因此请记住这一点。 Sprite 只会将每个图像的大小减少几个字节，如果您的图像太大，那将是您最小的问题。
我的方法是按需加载图像并使用 100 张单图像。因此，流量会根据用户的特定需求而减少。当玩家移动时切换每个图 block 的源，您就完成了。
关于javascript - 任何 Javascript 库都可以按需进行本地镜像创建和渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6760886/