# FPS affects game speed (Framerate independence)? **URL:** \ **Category:** Questions\ **Created:** [April 7, 2019, 9:57pm UTC](https://forum.babylonjs.com/t/fps-affects-game-speed-framerate-independence/2419 "2019-04-07T21:57:40Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Wancieho](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@Wancieho](https://forum.babylonjs.com/u/Wancieho)\ **Post date:** [April 7, 2019, 9:57pm UTC](https://forum.babylonjs.com/t/fps-affects-game-speed-framerate-independence/2419/1 "2019-04-07T21:57:40Z")
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. ---
**Author:** ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)\ **Post date:** [April 7, 2019, 10:08pm UTC](https://forum.babylonjs.com/t/fps-affects-game-speed-framerate-independence/2419/2 "2019-04-07T22:08:06Z")
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)) ---
**Author:** ![withADoveInOneHand](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/withadoveinonehand/32/1243_2.png) [@withADoveInOneHand](https://forum.babylonjs.com/u/withADoveInOneHand)\ **Post date:** [April 7, 2019, 10:39pm UTC](https://forum.babylonjs.com/t/fps-affects-game-speed-framerate-independence/2419/3 "2019-04-07T22:39:22Z")
This article gets referenced a lot: > **[Fix Your Timestep! | Gaffer On Games](https://gafferongames.com/post/fix_your_timestep/)** > > Introduction Hi, I’m Glenn Fiedler and welcome to Game Physics. > In the previous article we discussed how to integrate the equations of motion using a numerical integrator. Integration sounds complicated, but it’s just a way to advance the your... 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: > **[A Detailed Explanation of JavaScript Game Loops and Timing | Isaac Sukin](https://isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing)** > > The main loop is a core part of any application in which state changes over time. In games, the main loop is often called the game loop, and it is typically responsible for computing physics and AI as well as drawing the result on the screen.... ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [April 7, 2019, 11:30pm UTC](https://forum.babylonjs.com/t/fps-affects-game-speed-framerate-independence/2419/4 "2019-04-07T23:30:49Z")
Hi @Wancieho and welcome from me. > [@aWeirdo](#): > > you’re looking for what’s normally referred to as “delta time”, [https://doc.babylonjs.com/api/classes/babylon.engine#getdeltatime](https://doc.babylonjs.com/api/classes/babylon.engine#getdeltatime) ---
**Author:** ![Wancieho](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@Wancieho](https://forum.babylonjs.com/u/Wancieho)\ **Post date:** [April 8, 2019, 11:05am UTC](https://forum.babylonjs.com/t/fps-affects-game-speed-framerate-independence/2419/5 "2019-04-08T11:05:00Z")
@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. ---
**Author:** ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)\ **Post date:** [April 8, 2019, 12:28pm UTC](https://forum.babylonjs.com/t/fps-affects-game-speed-framerate-independence/2419/6 "2019-04-08T12:28:00Z")
@Wancieho Here’s a simple example to get you started 🙂 [https://playground.babylonjs.com/#QFRJ7K#9](https://playground.babylonjs.com/#QFRJ7K#9) ---
**Author:** ![Wancieho](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@Wancieho](https://forum.babylonjs.com/u/Wancieho)\ **Post date:** [April 8, 2019, 3:47pm UTC](https://forum.babylonjs.com/t/fps-affects-game-speed-framerate-independence/2419/7 "2019-04-08T15:47:46Z")
@aWeirdo awesome thanks that helps a lot! Have implemented and will test on various devices. I did not realise it would be so simple… ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [April 8, 2019, 4:00pm UTC](https://forum.babylonjs.com/t/fps-affects-game-speed-framerate-independence/2419/8 "2019-04-08T16:00:25Z")
I appreciate that feedback ---
**Author:** ![Wancieho](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@Wancieho](https://forum.babylonjs.com/u/Wancieho)\ **Post date:** [April 8, 2019, 5:05pm UTC](https://forum.babylonjs.com/t/fps-affects-game-speed-framerate-independence/2419/9 "2019-04-08T17:05:46Z")
@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. ---
**Author:** ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)\ **Post date:** [April 8, 2019, 5:29pm UTC](https://forum.babylonjs.com/t/fps-affects-game-speed-framerate-independence/2419/10 "2019-04-08T17:29:02Z")
@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. 🙂 ---
**Author:** ![Wancieho](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@Wancieho](https://forum.babylonjs.com/u/Wancieho)\ **Post date:** [April 8, 2019, 8:36pm UTC](https://forum.babylonjs.com/t/fps-affects-game-speed-framerate-independence/2419/11 "2019-04-08T20:36:21Z")
@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](https://www.youtube.com/watch?v=c4b9lCfSDQM) Thanks for steering me in the correct direction and discovering delta time.