格式化图像精灵的多维数组

Question

我正在制作一个为游戏加载精灵的函数，但我不太确定我知道该怎么做。我仍然在 javascript 和 OOP 上摸索，所以我有点迷失了。我需要通过它们所在的精灵表以及对应于精灵表中精灵位置的索引来选择精灵。我想用一个字母来引用精灵表，用一个数字来引用 XY 位置。像Tile("A", 132); 这样的 spritesheets 将是 512x512 像素，其中包含每个 32x32 像素大的 sprite，每张纸上总共有 256 个 sprite，并且有多个图纸。这是我目前所拥有的：

function Tileset(Spritesheet, Index){
    this.Spritesheet=Spritesheet;
    this.Index=Index;
    this.SpritesheetList=["TilesetA.png","TilesetB.png","TilesetC.png"];
    this.Tile=Image;
    this.LoadTiles = function(){
        for (sheet in SpritesheetList){
            var dummyImage= new Image;
            dummyImage.src=this.SpritesheetList[sheet];
            SpritesheetList[sheet]=[];
            for (var Y=0; Y<16; Y++){
                for (var X=0; X<16; X++){
                    this.SpritesheetList[sheet][Y*16 + X]=dummyImage.getSubimage(X*32, Y*32, 32, 32);
                };
            };
        };
        return this.SpritesheetList[Spritesheet][Index];
    };
    return this.SpritesheetList[Spritesheet][Index];
};

Answer 1

您的代码中存在一些问题。我不知道你是否使用任何库，但如果瓦片的大小为 32x32 像素，getSubimage 的最后两个参数应该是 32。

您还应该尝试只加载一次磁贴，而不是每次访问磁贴时。

我对您的代码进行了一些重构，以使其更具 OOP 和可重用性。

function Tileset(spritesheetImages) {
    this.spritesheetImages = spritesheetImages;
    this.spritesheetList   = {};
}

Tileset.prototype.loadTiles =  function() {
    for (var i = 0, len = this.spritesheetImages.length; i < len; i++) {
        var image = new Image();
        image.src = this.spritesheetImages[i];

        this.spritesheetList[this.spritesheetImages[i]] = [];

        for (var y = 0; y < 16; y++) {
            for (var x = 0; x < 16; x++) {
                this.spritesheetList[this.spritesheetImages[i]].push(image.getSubimage(x*16, y*16, 32, 32));
            }
        }
    }
};

Tileset.prototype.getTile = function(spritesheetImage, tileIndex) {
    return this.spritesheetList[spritesheetImage][tileIndex];
};

var tileset = new Tileset(["TilesetA.png","TilesetB.png","TilesetC.png"]);

tileset.loadTiles();

tileset.getTile("TilesetA.png", 132);

现在您可以在每次需要时创建瓷砖地图。我使用了原型方法，因为那时函数不会随每个实例一起复制。希望这就是你的意图。

编辑

要添加新的 spritesheet 图像，您可以使用此方法

Tileset.prototype.addSpritesheetImage = function(spritesheetImage) {
    var image = new Image();
    image.src = spritesheetImage;

    this.spritesheetList[spritesheetImage] = [];

    for (var y = 0; y < 16; y++) {
        for (var x = 0; x < 16; x++) {
            this.spritesheetList[spritesheetImage].push(image.getSubimage(x*16, y*16, 32, 32));
        }
    }
};

如果要使用 spritesheet 索引，可以将 getTile 方法更改为

Tileset.prototype.getTile = function(spritesheetIndex, tileIndex) {
    return this.spritesheetList[Object.keys(this.spritesheetList)[spritesheetIndex]][tileIndex];
};