遊戲畫布上的HTML 5高效繪圖

我試圖用帆布元素開發遊戲。現在，我以瓷磚（彩色方塊）作爲背景，並通過基於此演示的箭頭鍵控制英雄：http://www.lostdecadegames.com/demos/simple_canvas_game/遊戲畫布上的HTML 5高效繪圖

但是，調用showDungeon（）繪製我的背景使得英雄的移動不是像演示中那樣平滑。我認爲問題在於，我將每個圖塊繪製爲32x32，這使得Chrome中的移動速度變慢。我可以做的任何建議或代碼優化？當瓷磚是16x16的時候，運動很好，但是我想要瓷磚32x32。我有點不希望使用CSS來加倍畫布的大小，因爲這可能會破壞帶有抗鋸齒功能的圖形。 http://www.html5rocks.com/en/tutorials/casestudies/onslaught.html#toc-pixelated

// Draw everything 
var render = function() { 

    showDungeon(); 
    ctx.drawImage(img, hero.x, hero.y); 

}; 

// The main game loop 
var main = function() { 
    var now = Date.now(); 
    var delta = now - then; 

    update(delta/1000); 
    render(); 

    then = now; 
}; 

// Let's play this game! 
var then = Date.now(); 
setInterval(main, 1); // Execute as fast as possible

無關的問題：由於某種原因，我不能畫一個綠色方塊是一個英雄的渲染（），所以我用圖片代替。 http://jsfiddle.net/4M5Xz/4/

來源

2011-09-14 Raptrex

還考慮[使用requestAnimationFrame]（http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-raf）而不是setInterval。 – Ernest

你必須在代碼中一個奇怪的循環：

function showDungeon() { 
    for (var x = 0; x < (15*32); x++) { 
     for (var y = 0; y < (15*32); y++) { 
     ... 
     } 
    } 
}

這就像你正在繪製背景太多次。我把它改成：

function showDungeon() { 
    for (var x = 0; x < 15; x++) { 
     for (var y = 0; y < 15; y++) { 
     ... 
     } 
    } 
}

它又平滑了。

來源

2011-09-14 06:44:58

遊戲畫布上的HTML 5高效繪圖

回答

相關問題