如何让我的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很贵。谨慎使用。