A帧游戏循环基础:我如何从渲染中分离逻辑？

Question

我正在尝试A帧和我的Quest 2耳机，试图制作一个简单的虚拟现实游戏。我很难把逻辑从呈现和实现正确的游戏循环中分离出来。我找到了这个教程..。

https://medium.com/@mattnutsch/tutorial-how-to-make-webxr-games-with-a-frame-eedd98613a88

...of是一个简单的A帧游戏，用非面向对象的方式编程，我最初发现它很好用，它来自于过去尝试过的基本C游戏编程，尽管我很难在同样的非OOP风格中创建一个基本的游戏循环，该风格将游戏逻辑和呈现分离开来。我做了一个游戏，但没有考虑到较低的FPS案例的后果，再加上在Quest 2耳机上不同的刷新速度的乐趣，导致家庭酿造的运动和物理与渲染能力有关的各种问题。特别是，我制作了一个抛球技工，它与逻辑和渲染紧密相连。

我把我的问题提炼成一个在这个JSFiddle上非常简单的弹跳球演示来演示这个问题.

https://jsfiddle.net/mikegyoung/gny1w7mu/1/

我想我要问的那部分是在第115线.

`

// game loop
AFRAME.registerComponent('game-loop', {
    init: function () {
        this.throttledFunction = AFRAME.utils.throttle(this.gameLoop, gameLoopSpeed, this);
    },
    gameLoop: function () {

    },
    tick: function (t, dt) {            
        this.throttledFunction();  // called every frame.
    } 
});

`

在它中，我有一个弹跳球在一个立方体，我添加了大量的随机三角形，以模拟一个低FPS的情况，当你移动(WASD)，并使用鼠标看远离三角形，只看球时，球更快地移动时，在/接近完整的FPS。我想知道如何使我的逻辑独立于渲染，所以球以同样的速度移动，而不考虑低FPS的情况。不知道我在编程上遗漏了什么，因为我缺少JS裁剪。谢谢!

我已经尝试寻找其他简单的例子，一个适当的游戏循环在A-帧，在更多的非OOP风格，我发现很容易理解为初学者，但没有任何运气。我使用JS和HTML5进行了一些基本的2D游戏编程，从.

https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

...but，似乎是一个框架抽象了更多的东西。

谢谢!

Answer 1

我最终决定，从一开始就开始使用three.js是最好的方法。我在回答另一个关于Stack溢出的问题时发现了这个非常有用的例子.

WebXR controllers for button pressing in three.js

到目前为止，我已经尝试实现一个可抛的、弹跳的球，根据这里发现的信息，逻辑和呈现分离.

https://isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing

...and我试过实现一个HUD来调试.

https://jsfiddle.net/f7oa6r0t/

See line 296 for HUD snippets
See line 430 for game loop snippets

毫无疑问，对于我来说，这是一组非常简单的补充，也许没有很好的实现，但却是构建更有创意的东西的起点。