3

I have been working on a HTML5 Game Engine and I have had a tiled map loader working perfectly for a few months. I have since rewritten my engine and everything works as expected except the tiled map loader. The map loads and then loads the tile set then it splits the tile set into however many tiles are in the tile set and saves them into a list.

This is how the map is rendering now:

map rendering test

it is supposed to be a grass field but its coming out as the last tile in the tileset. I have checked the map data to make sure it was correct and then checked each tile in the list and found that all 256 tiles are the tile that is shown above. i have tried rewriting it several times and going back to my old map system and it always has the same result.

this is my code for loading the json data:

static loadJSON(url, success){
    var request = new XMLHttpRequest();
    request.overrideMimeType("application/json");
    request.onreadystatechange = function(){
        if(request.readyState == 4 && request.status == 200){
            success(request.responseText);
        }
    };
    request.open("GET", url, true);
    request.send();
}

and this is my code for Tiled Map Loading:

export class TiledMap{

constructor(){
    this.tilesets = [];
    this.tiles = [];
    this.tiles.push(null);
    this.data = null;
    this.image = null;
    this.x = 0;
    this.y = 0;
    this.loadSuccess = null;
    this.totalTiles = 0;
    this.folder = null;
}

//load the tiled map in json format
load(url,success){
    var self = this;
    this.loadSuccess = success;
    FILE.loadJSON(url,function(response){
        self.data = JSON.parse(response);
        self.folder = url.substring(0,url.lastIndexOf("/"));
        self.loadTilesets();
    });
}

//load the tilesets for the tiled map
loadTilesets(){
    var self = this;
    var successCount = 0;
    var errorCount = 0;
    for(let ts=0; ts<this.data.tilesets.length; ts++){
        var image = new Image();
        image.addEventListener("load",function(){
            successCount++
            if(successCount + errorCount == self.data.tilesets.length){
                self.seperateTiles();
            }
        }, {once:true});
        image.addEventListener("error",function(){
            errorCount++;
            console.error("Failed to load: " + self.data.tilesets[ts].image);
        }, {once:true});

        if(this.folder.length >= 1){
            this.folder += "/";
        }
        image.src = this.folder + this.data.tilesets[ts].image;
        this.tilesets.push(image);
    }
}

//seperate the tiles in the tileset
seperateTiles(){
    var self = this;
    for(let ts=0; ts<this.tilesets.length; ts++){
        var nTilesX = this.tilesets[ts].width / this.data.tilewidth;
        var nTilesY = this.tilesets[ts].height / this.data.tileheight;
        this.totalTiles = nTilesX * nTilesY;

        for(let ty=0; ty<nTilesY; ty++){
            for(let tx=0; tx<nTilesX; tx++){
                var tileCanvas = document.createElement("canvas");
                var tileContext = tileCanvas.getContext("2d");

                tileCanvas.width = this.data.tilewidth;
                tileCanvas.height = this.data.tileheight;

                var x = tx * this.data.tilewidth;
                var y = ty * this.data.tileheight;
                tileContext.drawImage(this.tilesets[ts],-x,-y);

                var tile = new Image();
                tile.addEventListener("load",function(){
                    self.tiles.push(tile);
                    if(self.totalTiles == (self.tiles.length-1)){
                        self.preDrawMap();
                    }
                },{once:true});
                tile.addEventListener("error",function(){
                    console.error("Failed to seperate tiles on tileset: " + self.tilesets[ts]);
                }, {once: true});
                tile.src = tileCanvas.toDataURL("image/png");
            }
        }
    }
}

//draw the tiled map on to a canvas
preDrawMap(){
    var mapCanvas = document.createElement("canvas");
    mapCanvas.width = this.data.width * this.data.tilewidth;
    mapCanvas.height = this.data.height * this.data.tileheight;

    var mapContext = mapCanvas.getContext("2d");
    for(let l=0; l<this.data.layers.length; l++){
        var x = 0;
        var y = 0;

        if(this.data.layers[l].type == "tilelayer"){
            for(let d=0; d<this.data.layers[l].data.length; d++){
               if(d % this.data.width == 0 && d != 0){
                   y += this.data.tileheight;
                   x = 0;
               }

               if(this.data.layers[l].data[d] != 0){
                   var tile = this.tiles[this.data.layers[l].data[d]];
                   mapContext.drawImage(tile,x,y);
               }
               x += this.data.tilewidth;
            }
        }
    }
    var self = this;
    this.image = new Image();
    this.image.addEventListener("load",function(){
        self.loadSuccess();
    }, {once:true});
    this.image.addEventListener("error",function(){
        console.error("Failed to convert map canvas to image");
    }, {once:true});
    this.image.src = mapCanvas.toDataURL("image/png");
}

//render the tiled map
render(){
    core.ctx.drawImage(this.image,this.x,this.y);
}

//set the position of the map
setPosition(x,y){
    this.x = x;
    this.y = y;
}


}

I cant seem to find the reason it is only saving the last tile, is there something im missing?

Arcxes Games
  • 91
  • 5

1 Answers1

0

After playing with my code for a few more hours I discovered that the parts that changed my code were using var instead of let, im not sure how that is whats causing my issue but after changing 

var x = tx * this.data.tilewidth;
var y = ty * this.data.tileheight;
tileContext.drawImage(this.tilesets[ts],-x,-y);

var tile = new Image();

into

let x = tx * this.data.tilewidth;
let y = ty * this.data.tileheight;
tileContext.drawImage(this.tilesets[ts],-x,-y);

let tile = new Image();

it all worked perfectly, this is running in a for loop so is there something conflicting with the scope of these variables?

Arcxes Games
  • 91
  • 5