使用 requestAnimationFrame 时应该如何组织更新/绘制逻辑？答案

【问题标题】：How should I organize my update/draw logic when using requestAnimationFrame?使用 requestAnimationFrame 时应该如何组织更新/绘制逻辑？
【发布时间】：2022-09-27 15:45:27
【问题描述】：

我的 HTML5 游戏的 JavaScript 代码具有以下结构：

// <body onload=\"load()\">
function load() {} // Load all images then call init()
function init() {} // Get all images ready for the game logic then call animate()
function animate() {} // Use requestAnimationFrame(), update() and drawing()
function update() {} // Update the game logic
function drawing() {} // Render the images on canvas

问题在于animate()。我没有在网上找到任何关于如何在其中组织 requestAnimationFrame()、update() 和 drawing() 的一致资源。

我试图自己详细说明，但游戏做过以几乎任何方法运行，例如将animate()、update() 或drawing() 作为参数传递给requestAnimationFrame()，或者在函数的开头或结尾使用requestAnimationFrame()，或者具有这些函数中的任何一个以任何顺序，或一个功能在另一个功能内，等等。

然而，这并不意味着一切都好。其中一些安排会导致我稍后才发现的问题，例如在不同的计算机或以不同的帧速率进行测试时。然后我必须回到代码尝试另一种方法。

那么，我应该如何组织呢？如果您能给我一个合适的算法，我将不胜感激，如果您有任何关于它的良好教学资源，我将不胜感激。

请提供足够的代码，以便其他人可以更好地理解或重现该问题。
这取决于意见什么是最好的。有些人更喜欢有一个完全独立的时间循环来进行逻辑更新，而 rAF 只用于绘图，有些人更喜欢把所有东西都放在同一个地方等等。只要你的代码正确地期望 rAF 不会定期触发，你任何结构都应该没问题。唯一的小提示：虽然我在在线 IDE 中做一些原型，但我总是将 rAF 调用放在最后，因为在那里，“假”控制台很昂贵，并且在循环中抛出错误很痛苦。但除此之外...

标签： javascript animation rendering conventions requestanimationframe

【解决方案1】：

使用requestAnimationFrame 反复调用animate。 animate 调用update 然后draw。基本上就是这样。由于您无法控制时间间隔，因此可以更好地控制时间确切地，传递最后一次调用animate 是有意义的。也许事件之后的增量时间更有意义。然后你可以使用增量时间来计算给定速度的距离等等。

这是一个游戏循环的例子，解释了here：

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);

网上有很多资源。对于初学者来说，这是一个不错的https://www.sitepoint.com/quick-tip-game-loop-in-javascript/

【讨论】：

“官方”如...？谁来制作“官方”代码？这与任何可以被视为网络上的“官方工作组”的东西所提倡的想法完全背道而驰。如果您确实将增量时间传递给它，为什么还要多次执行update() 步骤？只需传递真正的增量时间，而不是传递这个硬编码的step，让您的内部逻辑直接包含增量时间。
你是对的，我修正了措辞并添加了来源。 update 是一个技巧，它允许使用线性插值通过传递提醒来“填补空白”。虽然我没有测试它。