0

我正在使用<canvas>JS/Coffeescript 制作一个小游戏。

到目前为止，我的绘制循环是使用 requestAnimationFrame 完成的：

draw: () =>
    # Various drawing code.
    requestAnimFrame(@draw, @canvas)

虽然我的更新循环很简单setInterval：

setInterval(() => @update Date.now(), 1000/FPS)

我将它们分开，以便绘图不会被无关的更新代码堵塞，认为这可能是正确的方法。

但是是吗？是否有意义？如何以最低的系统成本确保流畅的动画？

4

1 回答 1

1

同时使用requestAnimationFrame(rAF)setInterval只会产生额外的开销。

这是因为 JavaScript 是单线程的，必须一个一个地执行作用域。如果 JS 引擎在 rAF 范围内，则 setInterval 范围内的执行将作为事件排队，在rAF 退出当前范围后执行 - 反之亦然。并且代码仍然会被堵塞/堆积（由于setInterval）。

所以那里没有任何好处，恰恰相反，因为有更多的代码要执行（更多有时更少，但在这种情况下不是）包括。内部堆栈推送和弹出，事件的创建和排队，要解析的额外代码等 - 也许在微观层面上，但如果你的代码很昂贵，那么它可能很重要。话虽如此，请考虑使用 30 fps 而不是 60 fps，这在大多数情况下已经足够了，而且它会使您的预算翻倍。

使用 rAF，您的“时间预算”通常约为 16.7 毫秒。无论您做什么，您都必须获取创建单个框架所需的代码，以便在该时间范围内执行。如果不是，将跳过一帧（或更多）。

关键是优化代码以及如何将场景组合在一起，无论是字面上的还是抽象的。尽可能缓存所有内容（内存是您的朋友），仅更新需要的内容等等。对此没有通用的答案，因为这取决于具体情况，什么是最佳的做事方式。

于 2013-09-19T22:42:24.557 回答