1

我正在为一个大学项目开发​​一个多弹模拟器，我想知道如何最好地设置 JavaScript 渲染到 HTML5 画布的时间

我正在使用 Euler 积分器设置进行物理和精度对于这个项目非常重要。渲染非常简单

我的问题是如何最好地设置所有这一切的时间。

现在我有：

  • 在使用 setTimeout() 以固定时间步长循环的函数中运行的物理和其他逻辑
  • 使用 requestAnimationFrame() 调用循环的另一个函数中的渲染（灵活的时间步长）

这两个循环同时运行（我知道 JavaScript 并不真正支持没有 Web Worker 的线程），但我不希望渲染（当前运行的 FPS 比需要的高得多）不必要地“窃取” CPU 周期物理模拟，如果你明白我的意思。

鉴于物理精度在这里最重要，您如何建议设置计时系统？（也许在这里使用 Web Workers 会很有用，但我还没有看到它在其他引擎中使用过）

谢谢！

4

2 回答 2

2

我建议您不要尝试“多线程”，除非您实际上正在这样做，即使那样，我也不一定会推荐它。

保持一切同步的最佳方法是使用单线程执行。setTimeout大约ms的单个循环33似乎适用于我的游戏。

此外，至少根据我的经验，setTimeout它提供了比setIntervalor更多的审美体验requestAnimationFrame。使用setInterval，当帧延迟交付时，Javascript 会努力“赶上”，这会导致动画帧不一致。使用requestAnimationFrame时，会跳过帧以确保游戏流畅运行，这实际上使事情变得更加困难，因为您的用户并不完全确定他们的视图在任何给定的时间都是最新的。

于 2012-11-05T14:22:19.757 回答
1

一种方法是设置处理物理的时间间隔，每 x 帧一次，渲染所有内容。

var physicsTime;
var renderFrequency;
var frameCount;

setInterval(function(){updateStuff()},physicsTime);

然后在 updateStuff()

function updateStuff(){
  frameCount ++;
  if (frameCount >= renderFrequency){
    frameCount -= renderFrequency;
    render();
  }
  physics();
}
于 2012-11-05T14:12:45.177 回答