diff --git a/client/garageserver.io.js b/client/garageserver.io.js index 3bf903b..3007867 100644 --- a/client/garageserver.io.js +++ b/client/garageserver.io.js @@ -1,6 +1,5 @@ /* options = { - onUpdatePlayerPhysics: function (state), onConnect: function() onPlayerUpdate: function (data), onPlayerDisconnect: function (id), @@ -16,6 +15,7 @@ window.GarageServerIO = (function (window, socketio) { var io = socketio, socket = null, sequenceNumber = 0, + processedSequenceNumber = 0, players = [], inputs = [], updates = [], @@ -65,6 +65,21 @@ window.GarageServerIO = (function (window, socketio) { if (!updateFound) { updates.push(data); } + if (options.clientSidePrediction) { + for (updateIdx = 0; updateIdx < updates.length; updateIdx ++) { + if (updates[updateIdx].seq == processedSequenceNumber) { + updates.splice(0, updateIdx); + } + } + for (updateIdx = 0; updateIdx < inputs.length; updateIdx ++) { + if (inputs[updateIdx].seq == processedSequenceNumber) { + inputs.splice(0, updateIdx + 1); + } + } + if (updates.length > 0 && inputs.length > 0) { + options.onUpdatePhysics(updates[0].state, inputs); + } + } } else { for (playerIdx = 0; playerIdx < players.length; playerIdx ++) { if (players[playerIdx].id === data.id) { @@ -77,7 +92,7 @@ window.GarageServerIO = (function (window, socketio) { } } if (!updateFound) { - players[playerIdx].updates.push( { state: data.state, seq: data.seq } ); + players[playerIdx].updates.push({ state: data.state, seq: data.seq }); } break; } @@ -88,7 +103,7 @@ window.GarageServerIO = (function (window, socketio) { id: data.id, updates: [] }; - player.updates.push( { state: data.state, seq: data.seq } ); + player.updates.push({ state: data.state, seq: data.seq }); players.push(player); } } @@ -111,18 +126,34 @@ window.GarageServerIO = (function (window, socketio) { } }, - addPlayerInput = function (input) { - sequenceNumber += 1; - inputs.push(input); - if (options.clientSidePrediction && options.onUpdatePhysics) { + addPlayerInput = function (clientInput) { + var currentState = {}, + newState = {}, + inputsToProcess = []; + if (options.clientSidePrediction) { + for (var i = 0; i < updates.length; i ++) { + if (updates[i].seq == processedSequenceNumber) { + currentState = updates[i].state; + } + } } - sendPlayerInput(input); + + sequenceNumber += 1; + inputs.push({ input: clientInput, seq: sequenceNumber }); + + if (options.clientSidePrediction && options.onUpdatePhysics) { + inputsToProcess.push({ input: clientInput }); + newState = options.onUpdatePhysics(currentState, inputsToProcess); + processedSequenceNumber += 1; + updates.push({ state: newState, seq: processedSequenceNumber }); + } + sendPlayerInput(clientInput); }, - sendPlayerInput = function (input) { + sendPlayerInput = function (clientInput) { var currentTime = new Date().getTime(); - socket.emit('input', { input: input, seq: sequenceNumber, timestamp: currentTime }); + socket.emit('input', { input: clientInput, seq: sequenceNumber, timestamp: currentTime }); }, getPlayerStates = function (stateCallback) { diff --git a/example/public/javascripts/game.js b/example/public/javascripts/game.js index c5fedcb..2ef3c2b 100644 --- a/example/public/javascripts/game.js +++ b/example/public/javascripts/game.js @@ -1,5 +1,27 @@ $(function () { - GarageServerIO.connectToGarageServer('http://garageserver_io.jbillmann.c9.io', { logging: true }); + GarageServerIO.connectToGarageServer('http://garageserver_io.jbillmann.c9.io', { + logging: true, + clientSidePrediction: true, + onUpdatePhysics: function (state, inputs) { + var i = 0; + if (!state.x && !state.y) { + state.x = 0; + state.y = 0; + } + for (i = 0; i < inputs.length; i ++) { + if (inputs[i].input === 'left') { + state.x -= 1; + } else if (inputs[i].input === 'right') { + state.x += 1; + } else if (inputs[i].input === 'down') { + state.y += 1; + } else if (inputs[i].input === 'up') { + state.y -= 1; + } + } + return state; + } + }); var gameCanvas = document.getElementById('gameCanvas'), diff --git a/lib/server/garageservergame.js b/lib/server/garageservergame.js index 564f05a..245053b 100644 --- a/lib/server/garageservergame.js +++ b/lib/server/garageservergame.js @@ -24,8 +24,8 @@ GarageServerGame.prototype.updatePhysics = function (options) { if (this.options.onUpdatePhysics) { this.players[i].state = this.options.onUpdatePhysics(this.players[i].state, this.players[i].inputs); } - this.players[i].inputs = []; this.players[i].sequence += this.players[i].inputs.length; + this.players[i].inputs = []; } } };