0

I'm dabbling with A-Frame and my Quest 2 headset, trying to make a simple VR game. I'm having trouble wrapping my head around separating logic from rendering and implementing a proper game loop. I found this tutorial...

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

...of a simple A-Frame game programmed in a non-OOP style that I initially found handy, coming from a past dabbling with basic C game programming, though I'm struggling with how I can create a basic game loop in that same non-OOP style that separates game logic from rendering. I cooked-up a game but didn't think of the consequences of lower FPS cases, plus the fun that is varying refresh rates on a Quest 2 headset, causing all kinds of issues with home-brewed movement and physics being tied to rendering capabilities. In particular, I made a ball throwing mechanic that's pretty broken with logic and rendering tied together.

I distilled my problem into a very simple bouncing ball demo on this JSFiddle to demonstrate the issue...

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

I guess the portion I'm questioning is at/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 it, I have a bouncing ball in a cube, I add a ton of random triangles to the scene to simulate a low FPS situation, and when you move in (WASD) and use the mouse to glance away from the triangles and only look at the ball, the ball moves faster when at/near full FPS. I'm wondering how I'd go about having my logic independent from rendering, so the ball moves at the same speed regardless of low FPS situations. Not sure what I'm programmatically missing here from having very lacking JS chops. Thanks!

I've tried looking for other simple examples of a proper game loop in A-Frame, in more of the non-OOP style I find easy to understand for starters, but didn't have any luck. I have dabbled with some basic 2D game programming with JS and HTML5, going off the handy example from Mozilla Developer Network Web Docs...

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

...but it seems like A-Frame abstracts things away more.

Thanks!

Mike Young
  • 11
  • 1
  • To make the movement independent of frame rate, pay attention to the dt parameter on tick(). This tells you how many msecs passed since the last frame, so you can update movements etc. based on this. – Diarmid Mackenzie Dec 06 '22 at 16:53

1 Answers1

0

I've ultimately decided that just moving to using three.js from the start would be the best route. I found this tremendously helpful example in an answer to another question posed on Stack Overflow...

WebXR controllers for button pressing in three.js

Thus far I've tried implementing a throwable, bouncing ball, with logic and rendering separated, based on information found here...

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

...and I've tried implementing a HUD for debugging...

https://jsfiddle.net/f7oa6r0t/

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

Undoubtedly a very simplistic set of additions on my part, and maybe not well implemented, but a starting point to building something more creative.

Mike Young
  • 11
  • 1