Currently, I am experimenting with A-Frame and my Quest 2 headset in order to create a simple VR game. One particular challenge I am facing is understanding how to separate logic from rendering and establish a proper game loop. After discovering this tutorial...
https://medium.com/@mattnutsch/tutorial-how-to-make-webxr-games-with-a-frame-eedd98613a88
...that demonstrates a non-OOP style A-Frame game, which was helpful given my past experience with basic C game programming. However, I am struggling to figure out how to create a basic game loop within the same non-OOP style that effectively separates game logic from rendering. I attempted to develop a game without considering the implications of lower FPS scenarios and the challenges posed by variable refresh rates on a Quest 2 headset, resulting in issues related to home-made movement mechanics being tied to rendering capabilities. In particular, my ball throwing mechanic suffers from problems due to intertwined logic and rendering.
To showcase my problem, I have created a very basic bouncing ball demo on JSFiddle...
https://jsfiddle.net/mikegyoung/gny1w7mu/1/
I am specifically uncertain about the section around line 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.
}
});
`
In this setup, there is a bouncing ball inside a cube, and additional random triangles are added to simulate low FPS conditions. When moving using WASD keys and looking only at the ball while avoiding the triangles, the speed of the ball increases when the FPS is higher. My main concern is how to decouple logic from rendering so that the ball moves consistently regardless of FPS variations. I seem to be missing something programmatically significant here due to my limited JS skills. Appreciate any insights!
I have explored other examples of proper game loops in A-Frame, particularly focusing on the non-OOP style that I find more comprehensible as a beginner, but have not been successful. While I have worked on basic 2D game development with JS and HTML5, following the guide from Mozilla Developer Network Web Docs...
https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
...A-Frame seems to present a more abstracted approach. Any guidance would be greatly appreciated!