From a31865142ceffe1b4bf77643ceeb4e9eb43fee5a Mon Sep 17 00:00:00 2001 From: Jeremiah Billmann Date: Tue, 9 Jul 2013 21:23:48 -0400 Subject: [PATCH] Made a GameLoop helper module to make game class cleaner --- example/public/javascripts/accumulator.js | 34 ------------- example/public/javascripts/game.js | 60 +++++++++-------------- example/public/javascripts/gameloop.js | 33 +++++++++++++ example/views/layout.jade | 2 +- 4 files changed, 57 insertions(+), 72 deletions(-) delete mode 100644 example/public/javascripts/accumulator.js create mode 100644 example/public/javascripts/gameloop.js diff --git a/example/public/javascripts/accumulator.js b/example/public/javascripts/accumulator.js deleted file mode 100644 index da9b2c1..0000000 --- a/example/public/javascripts/accumulator.js +++ /dev/null @@ -1,34 +0,0 @@ -var Accumulator = (function () { - var _currentTime = new Date().getTime(), - _accumulator = 0.0, - - reset = function () { - _currentTime = new Date().getTime(); - _accumulator = 0.0; - }, - - tick = function () { - var newTime = new Date().getTime(), frameTime = newTime - _currentTime; - if (frameTime > 250) { - frameTime = 250; - } - _currentTime = newTime; - _accumulator += frameTime; - }, - - time = function () { - return _accumulator; - }, - - reduceTime = function (time) { - _accumulator -= time; - }; - - return { - tick: tick, - reset: reset, - time: time, - reduceTime: reduceTime - }; - -}) (); \ No newline at end of file diff --git a/example/public/javascripts/game.js b/example/public/javascripts/game.js index 1023cf6..0417168 100644 --- a/example/public/javascripts/game.js +++ b/example/public/javascripts/game.js @@ -1,10 +1,5 @@ $(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); }; - })(); + var canvas = document.getElementById('gameCanvas'), ctxCanvas = canvas.getContext('2d'), keyboard = new THREEx.KeyboardState(); GarageServerIO.initializeGarageServer('http://garageserver_io.jbillmann.c9.io', { logging: true, @@ -18,22 +13,12 @@ $(function () { }); GarageServerIO.setPlayerState({ x: 0, y: 0 }); - Accumulator.reset(); - render(); + GameLoop.start( + //Render Loop + function () { + ctxCanvas.clearRect(0, 0, canvas.width, canvas.height); - function render () { - requestAnimFrame(render); - - ctxCanvas.clearRect(0, 0, canvas.width, canvas.height); - - Accumulator.tick(); - while (Accumulator.time() >= 15) - { - captureInput(); - Accumulator.reduceTime(15); - } - - GarageServerIO.getStates(function (selfState, playerStates, entityStates) { + GarageServerIO.getStates(function (selfState, playerStates, entityStates) { playerStates.forEach(function (player) { ctxCanvas.fillRect(player.currentState.x, player.currentState.y, 15, 15); }); @@ -43,21 +28,22 @@ $(function () { }); ctxCanvas.fillRect(selfState.x, selfState.y, 15, 15); - }); - } - - function captureInput () { - if (keyboard.pressed('left')) { - GarageServerIO.addPlayerInput('left'); + }); + }, + //Update Loop + function () { + if (keyboard.pressed('left')) { + GarageServerIO.addPlayerInput('left'); + } + if (keyboard.pressed('right')) { + GarageServerIO.addPlayerInput('right'); + } + if (keyboard.pressed('down')) { + GarageServerIO.addPlayerInput('down'); + } + if (keyboard.pressed('up')) { + GarageServerIO.addPlayerInput('up'); + } } - if (keyboard.pressed('right')) { - GarageServerIO.addPlayerInput('right'); - } - if (keyboard.pressed('down')) { - GarageServerIO.addPlayerInput('down'); - } - if (keyboard.pressed('up')) { - GarageServerIO.addPlayerInput('up'); - } - } + ); }); \ No newline at end of file diff --git a/example/public/javascripts/gameloop.js b/example/public/javascripts/gameloop.js new file mode 100644 index 0000000..a7f5718 --- /dev/null +++ b/example/public/javascripts/gameloop.js @@ -0,0 +1,33 @@ +window.GameLoop = (function (window) { + var 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, + + start = function (renderCallback, updateCallback) { + loop(); + + function loop () { + requestAnimFrame(loop); + + var newTime = new Date().getTime(), frameTime = newTime - _currentTime; + if (frameTime > 250) { + frameTime = 250; + } + _currentTime = newTime; + _accumulator += frameTime; + + while (_accumulator >= 15) { + updateCallback(); + _accumulator -= 15; + } + + renderCallback(); + } + }; + + return { + start: start + }; +}) (window); \ No newline at end of file diff --git a/example/views/layout.jade b/example/views/layout.jade index fdd1f7f..2c27ec9 100644 --- a/example/views/layout.jade +++ b/example/views/layout.jade @@ -7,7 +7,7 @@ html script(src='/garageserver.io.js') script(src='/javascripts/jquery-2.0.0.min.js') script(src='/javascripts/keyboard.min.js') - script(src='/javascripts/accumulator.js') + script(src='/javascripts/gameloop.js') script(src='core.js') script(src='/javascripts/game.js') body