Блог

Я создаю функцию, которая загружает спрайты для игры, и не совсем уверен, что знаю, как это сделать. Я все еще нащупываю свой путь вокруг javascript и ООП, так что это отчасти потеряно для меня. Мне нужно выбрать спрайты по таблице спрайтов, в которой они находятся, и по индексу, который соответствует расположению спрайтов в таблице спрайтов. Я хочу ссылаться на таблицу спрайтов с помощью буквы и позиции XY с помощью числа. Что-то вроде Tile("A", 132); таблиц спрайтов будет иметь размер 512×512 пикселей, содержащих спрайты размером 32×32 пикселя, что составляет 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];
};
  

В вашем коде есть некоторые проблемы. Я не знаю, используете ли вы какую-либо библиотеку, но если плитки имеют размер 32×32 пикселей, последние два аргумента getSubimage должны быть 32.

Вы также должны пытаться загружать плитки только один раз, а не каждый раз, когда вы обращаетесь к плитке.

Я немного переработал ваш код, чтобы сделать его более ООП и многоразовым.

 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 каждый раз, когда вам нужно. Я использовал методы прототипа, потому что тогда функции не копируются с каждым экземпляром. Надеюсь, это то, что вы намеревались.

Редактировать

Чтобы добавить новое изображение таблицы спрайтов, вы можете использовать этот метод

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

Если вы хотите использовать индекс таблицы спрайтов, вы можете изменить метод getTile на

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