Question

我一直在开发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;
}


}

我似乎无法找到仅保存最后一个图块的原因，是否缺少某些内容？

Answer 1

在玩了几个小时的代码后，我发现更改代码的部分使用的是var而不是let，我不确定那是什么导致了我的问题，但是在更改之后

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

var tile = new Image();

进入

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

let tile = new Image();

一切正常，它在for循环中运行，所以这些变量的范围有冲突吗？

HTML5 Tiled Map将所有图块保存为图块集中的最后一个图块

1 个答案: