fix($gameplay): change 'fps' param to 'updateTimeStep' because it is …

…fixed
cstuncsik · Sep 24, 2016 · afc94ee · afc94ee
1 parent a8e0611
commit afc94ee
Showing 4 changed files with 42 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,29 @@ A very minimal game loop for browser games.
 
 It's working with fixed update time step and variable rendering.
 
+## Loop execution model
+
+```
+FRAME
+
+|---<<<--------------------<<<------------------------<<<---------------------<<<---|
+|                         |---<<<------------------<<<---|                          |
+|                         |                              |                          |
+|         |---------|     |         |----------|         |     |----------|         |
+|         |         |     |--->>>---|          |--->>>---|     |          |         |
+|--->>>---| input() |------>>>------| update() |------>>>------| render() |--->>>---|
+          |         |               |          |               |          |
+          |---------|               |----------|               |----------|
+```
+
+```
+TIMELINE
+
+input  : |    |   |    |  |   |    |    |   |  |   |  |    |  |    |   |  
+update :  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
+render :   |    |   |    |  |   |    |    |   |  |   |  |    |  |    |   |
+```
+
 ## API
 
 ### Factory function
@@ -32,15 +55,15 @@ var loop = createGameLoop({
 });
 ```
 
-|                       |          |             |          |
-| --------------------- | -------- | ----------- | -------- |
-| **Property**          | **Type** | **Default** | **Desc** |
-| **fps**               | Number   | 30          | *Sets update time step to a fixed value (actually doesn't affect render frequency but update, 30 means ~33ms time step)* |
-| **fpsFilterStrength** | Number   | 20          | *How often should FPS measurement change (1 means every frame)* |
-| **slow**              | Number   | 1           | *Slow motion coefficient (the bigger the slower)* |
-| **input**             | Function | N/A         | *This function is responsible for processing input (runs once per frame)* |
-| **update**            | Function(step:Miliseconds) | N/A         | *This function is responsible for updating game objects' properties, physics etc... (can run more than once per frame)* |
-| **render**            | Function | N/A         | *This function is responsible for drawing game objects (runs once per frame)* |
+|                       |          |                 |          |
+| --------------------- | -------- | --------------- | -------- |
+| **Property**          | **Type** | **Default**     | **Desc** |
+| **updateTimeStep**    | Number   | 1000/30 ~33ms   | *Sets update time step to a fixed value* |
+| **fpsFilterStrength** | Number   | 20              | *How often should FPS measurement change (1 means every frame)* |
+| **slow**              | Number   | 1               | *Slow motion coefficient (the bigger the slower)* |
+| **input**             | Function | N/A             | *This function is responsible for processing input* |
+| **update**            | Function(updateTimeStep:Number) | N/A         | *This function is responsible for updating game objects' properties, physics etc...* |
+| **render**            | Function | N/A             | *This function is responsible for drawing game objects* |
 
 #### Returned *object*
 

diff --git a/examples/index.html b/examples/index.html
@@ -31,7 +31,7 @@
         elapsedTimeDisplay = document.getElementById('elapsedTimeDisplay');
 
     var loop = createGameLoop({
-        fps: 30,
+        updateTimeStep: 1000 / 30,
         input: input,
         update: update,
         render: render

diff --git a/examples/main.js b/examples/main.js
@@ -9,7 +9,7 @@ requirejs(['../src/gameLoop'], function (createLoop) {
         elapsedTimeDisplay = document.getElementById('elapsedTimeDisplay');
 
     var loop = createLoop({
-        fps: 30,
+        updateTimeStep: 1000 / 30,
         input: input,
         update: update,
         render: render

diff --git a/src/gameLoop.js b/src/gameLoop.js
@@ -12,9 +12,8 @@
 }(function () {
     return function (options) {
         'use strict';
-        var s = 1000,
-            fps = options.fps || 30,
-            step = s / fps,
+        var sec = 1000,
+            updateTimeStep = options.updateTimeStep || sec / 30,
             delta = 0,
             lag = 0,
             then = performance.now(),
@@ -23,7 +22,7 @@
             frameTime = 0,
             first = false,
             slow = options.slow || 1,
-            slowStep = slow * step,
+            slowStep = slow * updateTimeStep,
             update = options.update,
             render = options.render,
             input = options.input,
@@ -33,11 +32,11 @@
             rafId = requestAnimationFrame(frame);
             delta = now - then;
             then = now;
-            lag += delta;
+            lag += Math.min(sec, delta);
             input();
             while (lag >= slowStep) {
                 lag -= slowStep;
-                update(step/slowStep);
+                update(updateTimeStep/slowStep);
             }
             frameTime += (delta - frameTime) / fpsFilterStrength;
             render();
@@ -57,15 +56,15 @@
         }
 
         function getFps() {
-            return s / frameTime;
+            return sec / frameTime;
         }
 
         function getElapsedTime() {
-            return (then - beginning) / s;
+            return (then - beginning) / sec;
         }
 
         function setSlow(slow){
-            slowStep = slow * step;
+            slowStep = slow * updateTimeStep;
         }
 
         return {