feat($rendering): adding interpolation

cstuncsik · Sep 25, 2016 · 27adb8e · 27adb8e
1 parent 375c15f
commit 27adb8e
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -63,7 +63,7 @@ var loop = createGameLoop({
 | **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* |
+| **render**            | Function(interpolation:Number) | N/A             | *This function is responsible for drawing game objects* |
 
 #### Returned *object*
 
@@ -92,10 +92,18 @@ loop.setSlow(2);
 
 [The Curious Case of Casey and The Clearly Deterministic Contraptions](http://gamesfromwithin.com/casey-and-the-clearly-deterministic-contraptions)
 
-[GAFFER ON GAMES - Fix Your Timestep!](http://gafferongames.com/game-physics/fix-your-timestep/)
+[Fix Your Timestep!](http://gafferongames.com/game-physics/fix-your-timestep/)
 
 [A Detailed Explanation of JavaScript Game Loops and Timing](http://www.isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing)
 
-[Game Loop](http://gameprogrammingpatterns.com/game-loop.html)
+[Game Programming Patterns - Game Loop](http://gameprogrammingpatterns.com/game-loop.html)
+
+[Interpolated Physics Rendering](http://kirbysayshi.com/2013/09/24/interpolated-physics-rendering.html)
+
+[GAME TIMERS: ISSUES AND SOLUTIONS.](http://fabiensanglard.net/timer_and_framerate/)
+
+[Game loops - Basic theory](http://svanimpe.be/blog/game-loops.html)
+
+[To multiply with delta time or not to multiply with delta time?](http://www.learn-cocos2d.com/2013/10/game-engine-multiply-delta-time-or-not/)
 
 
diff --git a/examples/index.html b/examples/index.html
@@ -4,13 +4,26 @@
     <meta charset="UTF-8">
     <style>
         #box {
-            position: absolute; top: 10px; left: 10px; height: 50px; width: 50px; background-color: red;
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            height: 50px;
+            width: 50px;
+            background-color: red;
         }
+
         #fpsDisplay {
-            position: absolute; top: 70px; left: 10px;"
+            position: absolute;
+            top: 70px;
+            left: 10px;
+        "
         }
+
         #elapsedTimeDisplay {
-            position: absolute; top: 90px; left: 10px;"
+            position: absolute;
+            top: 90px;
+            left: 10px;
+        "
         }
     </style>
     <title>Browser Game Loop</title>
@@ -23,7 +36,8 @@
 <script>
 
     var box = document.getElementById('box'),
-        boxRotation = 0,
+        prevBoxRotation = 0,
+        currBoxRotation = 0,
         velocity = 5,
         direction = 1,
         mouseDown = false,
@@ -37,11 +51,11 @@
         render: render
     });
 
-    document.addEventListener('mousedown', function(){
+    document.addEventListener('mousedown', function () {
         mouseDown = true;
     });
 
-    document.addEventListener('mouseup', function(){
+    document.addEventListener('mouseup', function () {
         mouseDown = false;
     });
 
@@ -54,11 +68,13 @@
     }
 
     function update(step) {
-        boxRotation += step*velocity*direction;
+        prevBoxRotation = currBoxRotation;
+        currBoxRotation += step * velocity * direction;
     }
 
-    function render() {
-        box.style.transform = 'rotate('+boxRotation+'deg)';
+    function render(interp) {
+        var interpolatedBoxRotation = (currBoxRotation * interp) + (prevBoxRotation * (1 - interp));
+        box.style.transform = 'rotate(' + interpolatedBoxRotation + 'deg)';
         fpsDisplay.textContent = Math.round(loop.getFps()) + ' FPS';
         elapsedTimeDisplay.textContent = Math.round(loop.getElapsedTime()) + ' s';
     }

diff --git a/examples/main.js b/examples/main.js
@@ -1,7 +1,8 @@
 requirejs(['../src/gameLoop'], function (createLoop) {
 
     var box = document.getElementById('box'),
-        boxRotation = 0,
+        prevBoxRotation = 0,
+        currBoxRotation = 0,
         velocity = 5,
         direction = 1,
         mouseDown = false,
@@ -32,11 +33,13 @@ requirejs(['../src/gameLoop'], function (createLoop) {
     }
 
     function update(step) {
-        boxRotation += step * velocity * direction;
+        prevBoxRotation = currBoxRotation;
+        currBoxRotation += step * velocity * direction;
     }
 
-    function render() {
-        box.style.transform = 'rotate(' + boxRotation + 'deg)';
+    function render(interp) {
+        var interpolatedBoxRotation = (currBoxRotation * interp) + (prevBoxRotation * (1 - interp));
+        box.style.transform = 'rotate(' + interpolatedBoxRotation + 'deg)';
         fpsDisplay.textContent = Math.round(loop.getFps()) + ' FPS';
         elapsedTimeDisplay.textContent = Math.round(loop.getElapsedTime()) + ' s';
     }

diff --git a/src/gameLoop.js b/src/gameLoop.js
@@ -39,7 +39,7 @@
                 update(updateTimeStep/slowStep);
             }
             frameTime += (delta - frameTime) / fpsFilterStrength;
-            render();
+            render(lag / slowStep);
         }
 
         function start() {