我正在构建一个浏览器游戏。这是一个基于平铺的游戏（如果你熟悉的话，就像神奇宝贝一样）。大约9年前，我用C ++构建了一个类似的游戏。我仍然拥有我使用的所有图像和音乐。我想用Javascript（也可能是html5）重建这个游戏，这样人们就可以在线玩。
我遇到的问题是一些地图太大（~300000px * 300000px）要加载为图像。我搜索了“按需加载”并且我确实发现了一些可以执行“延迟加载”的库，但是还有另一个问题：大约有3000个地图。玩整个游戏的玩家最终将缓存50个图像。更不用说服务器网络的压力了。
因为游戏是基于图块的，并且通常（~300000px * 300000px）地图仅使用大约100个不同的地图组件（<2MB），我的方法是将地图使用的所有组件放入单个图像中并与之一起使用像这样的瓷砖地图：
来自map1.png，宽度200，高度200，偏移量_x 450，偏移量_ 600的平铺（0,0）
来自map1.png，宽度100，高度100，偏移量_x 650，偏移量500的平铺（0,1）
...
因此，客户端只需下载2MB图像文件和500KB图块地图，而不是将整个地图作为图像下载。真实地图可以在本地形成并按需呈现：
Tile的玩家（100,100），渲染矩形（70,70,130,130）
我的问题是： 是否有任何库可以按需进行图像创建和渲染？ 是否有任何现有的示例或教程？ CSS Sprite可以做什么？ 我可以选择其他任何关键字和链接吗？
谢谢！
答案 0 :(得分：0)
您可以使用纯javascript创建图像，而不使用任何库使用画布。 但我不明白为什么你的img大约是2M，当它们是200 * 200时...... 精灵可能会有所帮助，但精灵大于3000像素存在一些问题，请记住这一点。精灵只会减少每个图像几个字节的大小，如果你的imgs那么大就是你最小的问题。
我的方法是按需加载图像并使用100张单张图像。因此，流量减少到用户的特定需求。当玩家移动并完成后，切换每个牌的来源。
答案 1 :(得分：0)