瓦片地图在更新时闪烁答案

【问题标题】：tilemap flickering on update瓦片地图在更新时闪烁
【发布时间】：2013-04-09 11:55:01
【问题描述】：

我正在尝试使用平铺地图编辑器创建的 JSON 文件将游戏地图绘制到画布上。

我相信我快到了，但我有一个问题。如果我在我的更新函数中调用加载地图，我会得到地图在画布中闪烁。我想这是因为我每次更新都会清除画布。

因此，如果我移动调用以在主 js 文件中的其他任何位置加载场景，例如 game_settings 函数（这是我想要的），我只会得到一个空白画布。

这是我的主要 js 文件：

var canvas;
var ctx;

$(document).ready(function(){

canvas = document.getElementById("TBG");
ctx = canvas.getContext("2d");

var game_width = canvas.width;
var game_height = canvas.height;

var scene = new Scene();


$('#new_but').click(function(){
    game_init("new");
});

$('#load_but').click(function(){
    game_init("load");
});


function game_init(state) {
    game_settings(state);
    update();
}

function game_settings(state){
    if(state == "load"){
        ui.load_game();

    }
    else{
        //set beginning params
        ui.new_game();
    }
}


function update(){

    ctx.clearRect(0,0,canvas.width,canvas.height);
    scene.load("level_01");

    setTimeout(update,1);
}
});

我的问题：我应该在哪里调用 scene.load 方法？？

如果你想查看场景类文件，here

谢谢

【问题讨论】：

标签： javascript jquery canvas map tile

【解决方案1】：

我认为关于 tilemap 闪烁的问题不是由画布清除引起的，而是由于

scene.load();

在每次调用

更新（）

加载图块需要一些时间，因此在加载图块期间画布将是空白的（因为 "ctx.clearRect(0,0,canvas.width,canvas.height);" 已被调用），并且在瓷砖加载后，画布将再次被填充。所以你会看到闪烁的效果。两种方法将有助于解决这个问题：

在加载新图块之前不要清除画布
已加载图块的本地存储。

这些可以避免闪烁的问题，希望对你有所帮助。

【讨论】：