Question

我正在制作一个为游戏加载精灵的功能，但不太确定我知道该怎么做。我仍然对javascript和OOP有所了解，所以它对我有点失落。我需要通过它们所在的spritesheet以及与spritesheet中的sprite位置相对应的索引来选择精灵。我想用字母引用spritesheet，用数字引用XY位置。像Tile("A", 132);这样的精灵表将是512x512像素，包含每个32x32像素的精灵，每张纸多出256张精灵。以下是我到目前为止的情况：

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);

现在您可以在每次需要时创建一个tilemap。我使用了原型方法，因为这些函数不会被每个实例复制。希望这是你想要的。

修改

要添加新的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]; };

格式化多维图像精灵数组

1 个答案: