javascript - 如何将图像分成几个部分？瓦片 map

Question

我正在制作一个游戏，世界地图将由称为 Tiles 的 block 创建。所有图 block 都保存在单个 PNG 文件中，类似于下面发布的文件:

我需要分割这个图像并将所有这些 block 分别存储在内存中，这样我就可以按需要的顺序在屏幕上绘制这些图 block 。

这样做的最佳方式是什么，以便它在每个网络浏览器中都能正常运行？

Answer 1

简单地看一下 Canvas 的 drawImage 函数:当使用它的所有参数时，它已经允许有选择地复制图像的一部分。

var tileIndex   = 3; // index of the tile within the texture image 
var tileWidth=16, tileHeight = 16;
var tilePerLine = 6;
var offsetX     = (tileIndex % tilePerLine)*tileWidth;  
var offsetY     = Math.floor(tileIndex / tilePerLine) * tileHeight;

ctx.drawImage(thisImage, offsetX, offsetY, tileWidth, tileHeight, x, y);