Javascript - 使用增量时间的游戏循环

Question

我正在尝试实现一个使用增量时间的游戏循环。我从this article 获得了以下代码，但是我觉得它并不能很好地解释这种类型的游戏循环。我对 requestAnimationFrame 进行了研究，但这些解释似乎都没有用。有人可以简单地分解一下这个循环是如何工作的吗？

function timestamp() {
   return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
},

var now,
dt   = 0,
last = timestamp(),
step = 1/60;

function frame() {
  now = timestamp();
  dt = dt + Math.min(1, (now - last) / 1000);
  while(dt > step) {
    dt = dt - step;
    update(step);
  }
  render(dt);
  last = now;
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

Answer 1

requestAnimationFrame 是一个特殊的计时器。与 setInterval 在给定的最小毫秒后重复执行回调不同，requestAnimationFrame 以可变方式执行以实现平滑的帧速率。

问题在于requestAnimationFrame 是如何做到这一点的。根据情况，它可能运行得更快或更慢。这意味着，如果您的更新逻辑直接与requestAnimationFrame 相关联，则在requestAnimationFrame 以60fps 运行时，以“每次更新一步”运行的角色将在一秒钟内移动60 步，但在以60fps 运行时只会移动40 步。它会降低到 40fps。

为了抵消计时器的这种突然加速/减速，我们使用“增量时间”。您无需依赖requestAnimationFrame 的每次迭代来调用更新，而是检查帧之间的时间以查看是否是调用更新的正确时间。

假设你的角色应该每 100 毫秒走一步。如果游戏以 60fps 运行，100ms 大约是每 6 帧。这意味着对于每次迭代，您的代码都会检查 100 毫秒是否已过。在第 6 帧左右，它会调用 update。现在如果计时器以 40fps 运行，100ms 大约是 4 帧。同样的逻辑，在每次迭代时，它都会检查是否经过了 100 毫秒。在第 4 帧它执行并调用更新。这样，您就可以确保无论波动如何，都会始终调用更新。