tilemap在更新时闪烁

时间:2013-04-09 11:55:01

标签: javascript jquery canvas map tile

我试图使用平铺地图编辑器创建的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

由于

1 个答案:

答案 0 :(得分:0)

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

引起的
scene.load();
每次都在

中调用

  

更新()

加载图块需要一些时间,因此在图块加载过程中画布将为空白(因为“ctx.clearRect(0,0,canvas.width,canvas.height);”已被调用),并且在加载图块后,画布将再次填充。所以你会看到闪烁的效果。 有两种方法可以帮助解决这个问题:

  1. 不要清除画布,直到加载新图块并
  2. 本地商店已加载图块。
  3. 这些可以避免闪烁问题,并希望对您有所帮助。