Fix game logic framerate being tied to screen refresh rate

halbu · Nov 17, 2018 · 5deaa61 · 5deaa61
1 parent e019e67
commit 5deaa61
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/built/build.js b/built/build.js
@@ -132,6 +132,7 @@ Constants.WINCH_Y_OFFSET = 12;
 Constants.PERSON_HEIGHT = 18;
 Constants.PERSON_LEFTMOST_WALK_POINT = 440;
 Constants.PERSON_RIGHTMOST_WALK_POINT = 750;
+Constants.MILLISECONDS_PER_FRAME = 17; // close enough
 Constants.COLORS = {
     DRAW_COLOR: '#ffffff',
     SCANLINE_COLOR: '#006000',
@@ -249,7 +250,12 @@ class HELI {
         this.inputManager.clearInput();
         this.overdrawScanlines();
         this.applyGlfx();
-        this.awaitNextFrame();
+        this.deltaTime = performance.now() - this.lastFrameTime;
+        while (this.deltaTime < Constants.MILLISECONDS_PER_FRAME) {
+            this.deltaTime = performance.now() - this.lastFrameTime;
+        }
+        this.lastFrameTime = performance.now();
+        window.requestAnimationFrame(() => { this.coreGameLoop(); });
     }
     applyGlfx() {
         // Load the latest glfxSourceCanvas frame
@@ -285,9 +291,6 @@ class HELI {
     coinflip() {
         return this.oneIn(2);
     }
-    awaitNextFrame() {
-        window.requestAnimationFrame(() => { this.coreGameLoop(); });
-    }
 }
 class InputManager {
     constructor(cnv) {

diff --git a/src/core/constants.ts b/src/core/constants.ts
@@ -26,6 +26,8 @@ class Constants {
     public static readonly PERSON_LEFTMOST_WALK_POINT = 440;
     public static readonly PERSON_RIGHTMOST_WALK_POINT = 750;
 
+    public static readonly MILLISECONDS_PER_FRAME = 17; // close enough
+
     public static readonly COLORS = {
         DRAW_COLOR: '#ffffff',
         SCANLINE_COLOR: '#006000',

diff --git a/src/core/core.ts b/src/core/core.ts
@@ -6,6 +6,8 @@ class HELI {
     public ctx: CanvasRenderingContext2D;
 
     public lastFrameTime: number;
+    public deltaTime: number;
+
     public inputManager: InputManager;
     public scanlineOffset = 0;
     public activeScreen: IAppScreen;
@@ -73,7 +75,13 @@ class HELI {
         this.overdrawScanlines();
         this.applyGlfx();
 
-        this.awaitNextFrame();
+        this.deltaTime = performance.now() - this.lastFrameTime;
+        while (this.deltaTime < Constants.MILLISECONDS_PER_FRAME) {
+            this.deltaTime = performance.now() - this.lastFrameTime;
+        }
+
+        this.lastFrameTime = performance.now();
+        window.requestAnimationFrame(() => {this.coreGameLoop(); });
     }
 
     public applyGlfx(): void {
@@ -113,8 +121,4 @@ class HELI {
     public coinflip(): boolean {
         return this.oneIn(2);
     }
-
-    public awaitNextFrame(): void {
-        window.requestAnimationFrame(() => { this.coreGameLoop(); });
-    }
 }