javascript - 如何让我的 canvas2d 游戏更快？

Question

我正在开发一个 html5 canvas2d 游戏。随着游戏的复杂性，FPS 计数越来越低。我不在我的场景中使用图像。那么有什么提高FPS的技巧或做法吗？

提前致谢，

Answer 1

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

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

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

此外，您应该将游戏循环与浏览器的重绘事件同步：使用请求动画帧而不是 plain-ol' setinterval。

Answer 2

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

Answer 3

你可以做很多事情来优化你的游戏。通常，只有很多小的改进才能有所作为。

需要注意的一些事项

• 使用多个画布（如前所述）

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

例子

// This...
test = [];

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

• 循环：您可以通过使用反向 while 循环来加速循环，如下所示：

例如

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

• 对象嵌套：如果可能，不要将对象嵌套超过 3 层。JS 需要一段时间才能找到它们。

• Draws : DrawImage 很昂贵。谨慎使用。