Javascript-使用delta时间的游戏循环

Javascript - gameloop using delta time

本文关键字：游戏 循环 时间 使用 delta Javascript-      更新时间：2023-09-26

我正在尝试实现一个使用delta时间的游戏循环。我从这篇文章中得到了以下代码，但我觉得它不能很好地解释这种类型的游戏循环。我对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);

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

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

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

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

相关文章：