如何将图像分成几个部分？tilemap的

Question

我正在制作一个游戏,世界地图将从名为Tiles的块创建.所有Tiles都保存在单个PNG文件中,类似于下面发布的文件:

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

最好的方法是什么,所以它会在每个网络浏览器中都运行良好？

Answer 1

简单地看一下画布的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);