FPS affects game speed (Framerate independence)?

Questions
1

I’ve started piecing together a little TypeScript game after researching and fiddling with Babylon.js and Three.js. I’ve run into an issue where the game runs at different speeds on different browser and devices depending on the frame rate. I can’t quite find anything substantial on Google or this forum that discusses this or a solution.

At the moment I’m using standard HTML events to detect key, mouse and touch events and then the scene.onBeforeRenderObservable + engine.runRenderLoop to move my mesh. Is there a setting to tell the engine to make movement/animation time based? I’ve been fiddling with using mesh.moveWithCollision (although I can’t get it to work properly) in hopes that modifying the mesh position is the problem.

(document.getElementById('left') as HTMLElement).addEventListener('mousedown', () => {
  this.move = 'left';
});

(document.getElementById('left') as HTMLElement).addEventListener('mouseup', () => {
  this.move = '';
});

const speed = 0.3;
this.scene.onBeforeRenderObservable.add(() => {
  if (this.move === 'left') {
    this.mesh.position.x = this.mesh.position.x + speed;
  }
});

this.engine.runRenderLoop(() => {
  this.scene.render();
});

I also looked into using the Babylon.js animate functions but couldn’t figure out how to do this as my movement is based on a key being held down and the animation is based on a single event to trigger key frames.

1 Like
2

Hi @Wancieho
Welcome!

I don’t have time to setup an example, but i’m comfident that you’re looking for what’s normally referred to as “delta time”, the time in ms since last frame.

The value of your speed variable can be multiplied by “deltaTime” during onBeforeRenderObservable to ensure correct simulation across multiple devices and framerates.

Note: before applying deltaTime, you should divide your speed variable like so: speed = (speed / (1000 / 60))

3

This article gets referenced a lot:

Basically you render frames as fast as the system will allow, but only update physics at fixed intervals (your timestep).

Here’s one with javascript examples:

4

Hi @Wancieho and welcome from me.

https://doc.babylonjs.com/api/classes/babylon.engine#getdeltatime

1 Like
5

@all Thanks for the feedback. So far it seems like the consensus is to use delta time. I am busy investigating although I can’t seem to find any proper samples using Babylon.js so I’ll see what I can get working.

6

@Wancieho
Here’s a simple example to get you started :slight_smile:
https://playground.babylonjs.com/#QFRJ7K#9

1 Like
7

@aWeirdo awesome thanks that helps a lot! Have implemented and will test on various devices. I did not realise it would be so simple…

1 Like
8

I appreciate that feedback

9

@aWeirdo One more question though. Should my jump animation then also use delta time? I was looking at key-framing the jump but now understanding what you’ve explained it seems conflicting to use key-frames…

Or do I tell my mesh to increase it’s y coordinate and wait for gravity physics to pull him down? Which is also confusing as surely I would need to decrease “inertia” so that gravity eventually becomes stronger than the y force as it decays? Plus I assume I would need to add the delta time to the force + gravity? A little confusing…

BTW, this is for a platform style game. I built a game in Flash in about 2004 that had simple jump animations but back then never considered FPS or true physics so a little overwhelmed.

10

@Wancieho
Well, this sounds primarily as a design choice, you can use an animation with root motion or you can use a “static” animation and control the motion completely by code as you wrote about.
Either should be okay, animations themselves are controlled by time, and not scene fps, so only the motion would need deltaTime applied.

Afraid i don’t have much experience with simulating jumping. :slight_smile:

11

@aWeirdo I tested using key-framed animations and I can actually feel there’s something wrong compared to the delta movement.

I found this video and think I may implement something like it so I may have to forget using the gravity physics from the engine: YouTube

Thanks for steering me in the correct direction and discovering delta time.