畫布多個圖像和移動瀏覽器性能

我正在寫關於HTML5畫布的移動瀏覽器性能。我試圖做一個簡單的平臺遊戲（如超級馬里奧兄弟）。我有一個主角，兩個敵人和街區模仿跳躍平臺。角色和敵人由drawImage繪製，block由fillRect繪製（現在，稍後它也將繪製圖像）。一切都是動畫的（當角色移動時，角色X被添加到塊X等）。畫布多個圖像和移動瀏覽器性能

現在我試圖添加一些隨機硬幣。首先，我創建的變量對圖片

var coinB = new Image(); 
coinB.src = 'coin.png';

接下來我創建陣列與隨機X和Y對象：

var k; 
for (k = 0; k <= 30; k++) { 
    coins.push({ 
     x: Math.floor(Math.random() * 36 + 4) * 100, 
     y: Math.floor(Math.random() * 3 + 1) * 100, 
     width:25, 
     height:25 
    }); 
}

而在這之後，我試圖選擇一切，並得出：

var l; 
/* left is the character X for the animation */ 
for (l = 0; l < coins.length; l++) { 
    ctx.drawImage(coinB, coins[l].x - left, coins[l].y, coins[l].width, coins[l].height); 
}

一切都在requestAnimFrame中的函數（）中。

不幸的是，此後，遊戲的移動FireFox（Chrome Mobile 20-30 fps）的遊戲速度大約爲30fps（從之前的60 fps沒有硬幣）。所以它的硬幣大約是fps的一半。

有沒有更好的方法來導入圖像並繪製它們？例如，我爲所有事情做了new Image()（mainchar = new Image（），enemy = new Image（），coin = new Image（）= ect），與.src一樣。我認爲這不是最好的解決方案。我應該怎麼做，以獲得更好的性能（減少fps）？謝謝你的幫助。

來源

2013-08-20 Amay

初始化主環路外的硬幣怎麼樣？實例化對象不是免費的。你也可以用'for（l = 0，len = coins.length; i danielepolencic

我有類似的經歷;我已經尋找提示和技巧，但沒有解決性能問題的神奇方法。提高性能的關鍵是將「drawImage」調用降至最低限度......請記住，它是您流程的瓶頸！所以，一定要畫出當前可見的東西（即不要畫出硬幣/塊/背景）。

對於什麼關心圖像加載，我沒有看到任何替代你目前正在做的。最好的辦法是使用一個獨特的文件，包含所有的圖像，然後在需要時使用正確的部分;這應該會減少下載時間（1個大文件比許多小文件更好），但不會增加性能。

希望這有所幫助，玩得開心！

來源

2013-08-20 20:07:59

他應該檢查你的答案，因爲我看不到其他方式來回答他的問題**'）** –

畫布多個圖像和移動瀏覽器性能

回答

相關問題