Javascript 多人游戏 - 游戏/物理逻辑的 requestAnimationFrame？

Question

我正在开发一款基于 Javascript 的多人游戏。到目前为止，我已经准备好基本的服务器、客户端和网络。

我确实遇到了一个问题，我的播放器在 120Hz 屏幕上移动速度比 60Hz 屏幕快。我通过将玩家的移动速度乘以“requestAnimationFrame”的增量时间来修复此问题。

但是；将动画与逻辑分开会是更好的解决方案吗？

如:

//Game loop; Do each 1/60th of a second
setInterval(gameTick, 1000/60);
function gameTick(){
  player.handleKeys();
  enemies.foreach( (enemy) => {
    enemy.update();
  });
}

//Draw loop; match to player screen refresh rate
window.requestAnimationFrame(gameLoop);
function gameLoop() {
    player.draw();
    enemies.foreach( (enemy) => {
    enemy.draw();
  });
  window.requestAnimationFrame(gameLoop);
}

虽然差异可能“可以忽略不计”，但我想避免使用 240Hz 的玩家向服务器“发送垃圾邮件”，并且比其他玩家有优势。

另一方面，对于 240Hz 显示器；您的键盘输入只有四分之一的帧会得到处理，因此感觉可能不那么流畅？

我问的原因是这将是一场竞争性游戏，因此应该保持平衡。但是我已经检查了各种来源，在这些来源上达成共识似乎是使用 requestAnimationFrame(即使是逻辑；不仅仅是绘图)，尽管我对此表示怀疑并且想知道哪个是正确的(和/或用于专业竞技游戏)。

Answer 1

requestAnimationFrame (rAF) 将仅以 60fps 的最大速率触发。 (一些浏览器的一些旧版本有关闭 VSync 的标志，这确实影响了 rAF)

注意

• rAf、setTimeout 或 setInterval 不可靠，可能会因多种原因丢帧。

• 如果选项卡或窗口隐藏或(选项卡)未聚焦，rAF 将停止触发。

• setInterval 和 setTimeout 如果 Tab 或 Window 被隐藏或(tab)未获得焦点，将被限制。

• rAF 时间参数不代表(下一个显示的)帧的时间，而是调用 rAF 回调的时间。

  这意味着...

  • 如果从 rAF 时间参数计算帧之间的时间将 float 并且不能可靠地用作增量时间。
  • 时间参数表示调用时间，而不是帧呈现给显示器的时间，并且可以比渲染内容呈现给显示硬件的时间早 < 1/60 秒。<

本地网络

对于多人游戏，服务器应该提供时间，以便所有玩家都在一个共同且可靠的时间戳上运行。如果网络延迟数据包，客户端可以从上一个时间戳向前预测时间以避免卡住，但应该在收到时恢复到同步(服务器时间)时间。

大型网络

通信取决于距离，即使在完美的点对点网络上，如果客户端位于世界的另一端，由于光传输时间，最佳 ping 可能为 130 毫秒(接近 8 帧 @60Hz)。这不包括数据包交换和实际路由长度。通常，到地球上最远​​点的 ping 时间约为 300 毫秒。

专业游戏必须考虑这种延迟，这也是为什么许多多人游戏提供本地服务器，并且如果距离较远则限制某些服务器的玩家。 300 毫秒为距离较近的玩家提供了显着优势。

使用浏览器 API 来托管客户端的实时多人游戏充其量也会出现问题，因为浏览器是一个不可靠且不一致的客户端主机，主要是因为客户端运行的设备种类繁多.

顺便说一下

window 是默认的 this (globalThis)，因此不是必需的。例如 window.requestAnimationFrame 等同于 requestAnimationFrame