如何让我的canvas2d游戏更快？

Question

我正在做一个html5 canvas2d游戏。这场比赛太复杂了，FPS数量越来越低。 我在场景中不使用图像。那么是否有任何技巧或做法来增加FPS？

在此先感谢，

Answer 1

第一步是分析您的游戏。你可以在这里找到一个很好的教程：http://nicolahibbert.com/optimising-html5-canvas-games/和一些关于HTML游戏优化的必备规则。

Answer 2

尽管您的问题并不十分具体，但我通过使用多个相互重叠的画布对我的画布应用/游戏进行了改进。
这样，您可以避免对画布的未更改部分进行不必要的重绘。

假设你的游戏中有20名玩家。如果其中一个移动，您应该只更新它的图层（它是自己的画布），而不是更新整个图片。

这是许多画布库使用的技术，包括kinetick.js，它确实提高了您的应用程序的速度。

此外，您应该将您的游戏循环与浏览器的重绘事件同步：使用request animation frame而不是普通的“setinterval”。

Answer 3

有很多事情可以做，以优化您的游戏。通常情况下，只是很多小小的改进都可以改变。

有些事情需要注意的

• 使用多个画布（前面已经提到）

• 垃圾收集：JS的垃圾收集真的可以让你的游戏震荡。这本身就是一个主题，但您可以做的一件事就是尽可能限制对象的创建并重新使用您的对象。

例

// This... 
test = []; 

// ...Is better than this 
test = new array() 

• 循环：您可以通过使用反向加速你的循环而循环，就像这样：

EG

var i = nodes.length(); 
while (i--) { 
    // ...do stuff... 
} 

• 对象嵌套：如果可能的话，不要嵌套超过3级的对象。它需要JS一段时间来找到它们。

• 绘制：DrawImage是昂贵的。谨慎使用。