我正在为一个大学项目开发一个多射弹模拟器,我想知道如何最好地设置 JavaScript 渲染到 HTML5 Canvas 的时间
我正在使用 Euler 积分器设置物理,准确性对于这个项目非常重要。渲染非常简单
我的问题是如何最好地为所有这些设置时间。
现在我有:
- 在使用固定时间步长的 setTimeout() 循环的函数中运行的物理和其他逻辑
- 在使用 requestAnimationFrame() 调用(灵活的时间步长)循环的另一个函数中渲染
这两个循环几乎同时运行(我知道 JavaScript 并不真正支持没有 Web Worker 的线程)但我不希望渲染(当前以比需要高得多的 FPS 运行)不必要地“窃取”CPU来自物理模拟的循环,如果你明白我的意思的话。
鉴于物理精度在这里最为重要,您建议如何设置计时系统? (也许在这里使用 Web Workers 会有用,但我还没有看到它在其他引擎中使用过)
谢谢!
最佳答案
我建议您不要尝试“多线程”,除非您确实在这样做,即使那样,我也不一定会推荐它。
保持所有内容同步的最佳方式是使用单线程执行。一个大约 33
毫秒的 setTimeout
循环似乎适合我的游戏。
另外,至少根据我的经验,setTimeout
提供了比 setInterval
或 requestAnimationFrame
更美观的体验。使用 setInterval
,Javascript 会在帧延迟交付时努力“ catch ”,这会导致动画帧不一致。使用 requestAnimationFrame
,会跳过帧以确保游戏流畅运行,这实际上让事情变得更难了,因为您的用户并不完全确定他们的 View 在任何给定的时间都是最新的。
关于javascript - 正确处理 HTML5 Canvas 引擎的时序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13233672/