Refactoring out physics loop on client for #17

client/garageserver.io.js

@@ -9,7 +9,6 @@ options = {
     onGameState: function (state),
     onPing: function (pingDelay),
     onUpdatePlayerPhysics: function (id, state, inputs, deltaTime),
-    onUpdate: function (),
     onInterpolation: function(id, previousState, targetState, amount)
     logging: true
 }
@@ -22,9 +21,6 @@ window.GarageServerIO = (function (window, socketio) {
         this.clientTime;
         this.renderTime;
         this.physicsDelta;
-        this.physicsIntervalId;
-        this.currentTime;
-        this.accumulator = 0.0;
         this.playerId;
         this.pingDelay = 100;
         this.interpolationDelay = 100;
@@ -37,15 +33,6 @@ window.GarageServerIO = (function (window, socketio) {
         setTime: function (serverTime) {
             this.clientTime = serverTime;
             this.renderTime = this.clientTime - this.interpolationDelay;
-        },
-        accumulate: function () {
-            var newTime = new Date().getTime(),
-                frameTime = newTime - this.currentTime;
-            if (frameTime  > 250) {
-                frameTime = 250;
-            }
-            this.currentTime = newTime;
-            this.accumulator += frameTime;
         }
     };
 
@@ -236,12 +223,6 @@ window.GarageServerIO = (function (window, socketio) {
             });
         },
 
-        start = function () {
-            var self = this;
-            _stateController.currentTime = new Date().getTime();
-            _stateController.physicsIntervalId = setInterval(function () { self.update(); }, this.physicsDelta * 1000);
-        },
-
         getPlayerId = function () {
             return _stateController.playerId;
         },
@@ -254,17 +235,6 @@ window.GarageServerIO = (function (window, socketio) {
             _playerController.remove(id);
         },
 
-        update = function () {
-            if (_options.onUpdate) {
-                _stateController.accumulate();
-                while (_stateController.accumulator >= (_stateController.physicsDelta * 1000))
-                {
-                    _options.onUpdate();
-                    _stateController.accumulator -= (_stateController.physicsDelta * 1000);
-                }
-            }
-        },
-
         addPlayerInput = function (clientInput) {
             _inputController.add(clientInput);
             if (_stateController.clientSidePrediction && _options.onUpdatePlayerPhysics) {
@@ -376,8 +346,6 @@ window.GarageServerIO = (function (window, socketio) {
 
     return {
         initializeGarageServer: initializeGarageServer,
-        start: start,
-        update: update,
         addPlayerInput: addPlayerInput,
         getStates: getStates,
         getPlayerId: getPlayerId,

example/public/javascripts/game.js

@@ -2,7 +2,9 @@ $(function () {
     var canvas = document.getElementById('gameCanvas'), ctxCanvas = canvas.getContext('2d'), keyboard = new THREEx.KeyboardState(),
         requestAnimFrame = (function () {
             return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000/60); };
-        })();
+        })(),
+        currentTime = new Date().getTime(),
+        accumulator = 0.0;
 
     GarageServerIO.initializeGarageServer('http://garageserver_io.jbillmann.c9.io', { 
         logging: true,
@@ -12,8 +14,27 @@ $(function () {
             interpolationState.x = (previousState.x + amount * (targetState.x - previousState.x));
             interpolationState.y = (previousState.y + amount * (targetState.y - previousState.y));
             return interpolationState;
-        },
-        onUpdate: function () {
+        }
+    });
+    GarageServerIO.setPlayerState({ x: 0, y: 0 });
+
+    render();
+
+    function render () {
+        requestAnimFrame(render);
+
+        ctxCanvas.clearRect(0, 0, canvas.width, canvas.height);
+
+        var newTime = new Date().getTime(), frameTime = newTime - currentTime;
+        if (frameTime  > 250) {
+            frameTime = 250;
+        }
+
+        currentTime = newTime;
+        accumulator += frameTime;
+
+        while (accumulator >= 15)
+        {
             if (keyboard.pressed('left')) {
                 GarageServerIO.addPlayerInput('left');
             }
@@ -26,17 +47,8 @@ $(function () {
             if (keyboard.pressed('up')) {
                 GarageServerIO.addPlayerInput('up');
             }
+            accumulator -= 15;
         }
-    });
-
-    GarageServerIO.start();
-    GarageServerIO.setPlayerState({ x: 0, y: 0 });
-    render();
-
-    function render () {
-        requestAnimFrame(render);
-
-        ctxCanvas.clearRect(0, 0, canvas.width, canvas.height);
 
         GarageServerIO.getStates(function (selfState, playerStates, entityStates) {