如何正確渲染效果最好的html5帆布遊戲

我希望我的英語足夠好。如何正確渲染效果最好的html5帆布遊戲

問題： 我正在開發一些帆布遊戲，使用context2d。我做了一次性能測試，看看畫布渲染效果如何。對於繪畫，drawImage方法與一些預先加載在內存中的50x50 jpg一起使用。

我的測試是實例化很多邏輯正方形50x50物體，在畫布中隨機移動而沒有碰撞只是看fps。

主循環完成間隔。

這個問題，我注意到當屏幕上有大約3000個隨機50x50時，低fps，以及我知道你渲染得越多，幀率越低。但我想問一些問題。

問題：

是一個好主意渲染僅在畫布屏幕的每個邏輯對象嗎？例如，在沒有碰撞的情況下，如果我將兩個50x50重疊在同一位置或幾乎相同的位置，則可見輸出小於（50·50）2像素，但我繪製的是（50·50）2像素對主循環中的每個元素使用drawimage。

希望你們瞭解問題和問題。渲染替代品？一些邏輯技術來實現這一點，而不是渲染每個對象？

來源

2011-08-08 zebnat

看看這個線程的一堆 ## [帆布最佳實踐，提示和優化技術，以提高性能]（http://stackoverflow.com/questions/8205828/html5-canvas-best-tips-tricks - 和 - 編碼最佳做法/ 8485927＃8485927）*添加任何你可能看不到* :) – jaredwilli

我明白你在問什麼，你問的也許你應該嘗試和渲染碰撞，所以你不必畫兩次。坦率地說，我認爲你最好在第一個平方上繪製第二個平方，然後我會告訴你爲什麼：

你的邏輯可能會採取更多的行動來確定重疊和繪圖的數量更復雜的形狀，然後實際繪製它。

所以在我看來，你最好在而不是測試碰撞在這一個。

人，糾正我，如果我錯了。

來源

2011-08-08 18:39:15

我沒有使用drawImage（只是筆畫），但只要他不使用谷歌的excanvas在IE上，你似乎是對的。 IE上的某些操作非常昂貴，因此您必須對此進行較窄的測試。 – ccoakley

感謝Rikudo的回覆。我在這裏問過是因爲一些伴侶告訴我要做邏輯的東西，我告訴他現在跟你說的一樣，也許這個邏輯需要更多的時間來處理。我不夠瘋狂，在屏幕上渲染大量不可碰撞的物體，但嘿，誰知道！讓我們看看其他答案和謝謝 – zebnat

絕對只是繪製。 bitblt（像素副本）經過優化，肯定比精靈之間的碰撞邏輯更快。但是，有一個例外可能是測試離屏精靈。這是一個快速測試，因爲您只是檢查屏幕邊界，也就是說，如果精靈離開屏幕。如果你有超過10,000個精靈，而且大部分時間都在屏幕外 - 例如放大時 - 那麼測試是值得的。如果他們總是在屏幕上，那麼就畫畫。

來源

2012-05-24 04:52:12

如何正確渲染效果最好的html5帆布遊戲

回答

相關問題