Question

我一直在努力让Tiled Maps可以在游戏中渲染，并且我可以进行所有工作，但是渲染每个单独的tile时效率不高。

要解决此问题，我将地图渲染到了画布上，然后使用canvas.toDataURL("image/png");

将画布转换为图像

现在，每当我运行游戏时，游戏就会加载但地图却无法渲染，我使用了调试器并加载了所有内容，但是加载了由画布制作的图像，但未完全加载，因此它看起来是空白的。

这是我创建地图图像的代码

preDrawMap(){
    let mapCanvas = document.createElement("canvas");
    mapCanvas.width = this.data.width * this.data.tilewidth;
    mapCanvas.height = this.data.height * this.data.tileheight;

    let mapContext = mapCanvas.getContext("2d");
    for(let l=0; l<this.data.layers.length; l++){
        let x=0;
        let 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){
                    let tile = this.tiles[this.data.layers[l].data[d]];
                    mapContext.drawImage(tile,x,y);
                }
                x += this.data.tilewidth;
            }
        }
    }
    let self = this;
    this.image = new Image();
    this.image.addEventListener("load",function(){
        self.loadCallback();
    });
    this.image.addEventListener("error",function(){
        alert("Failed to convert map canvas to image");
    });
    this.image.src = mapCanvas.toDataURL("image/png");
}

self.loadCallback()方法是一种告诉资产管理器资产已加载的方法。

刷新页面后才会加载HTML5图片

0 个答案: