Я работал над игровым движком HTML5, и у меня загрузчик плиточных карт работал отлично в течение нескольких месяцев.С тех пор я переписал свой движок, и все работает как положено, за исключением загрузчика мозаичных карт.Карта загружает, а затем загружает набор плиток, затем разбивает набор плиток на любое количество плиток в наборе плиток и сохраняет их в список.
Вот как карта рендерит сейчас:
предполагается, что это поле травы, но оно выходит в качестве последней плитки в наборе плиток.Я проверил данные карты, чтобы убедиться, что они были правильными, а затем проверил каждую плитку в списке и обнаружил, что все 256 плиток являются плиткой, показанной выше.Я пытался переписать его несколько раз и вернуться к моей старой системе карт, и она всегда дает один и тот же результат.
Это мой код для загрузки данных JSON:
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();
}
и этомой код для загрузки мозаичной карты:
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;
}
}
Кажется, я не могу найти причину, по которой он сохраняет только последнюю плитку, чего-то не хватает?