diff --git a/example/game.js b/example/game.js index aac9ece..37b47f9 100644 --- a/example/game.js +++ b/example/game.js @@ -7,14 +7,15 @@ function Game (sockets) { this.physicsInterval = 15; this.physicsDelta = this.physicsInterval / 1000; this.physicsIntervalId = 0; - this.worldState = { height: 400, width: 800, playerSize: 15, entitySize: 5 }; + this.worldState = { playerSize: 40, entitySize: 15 }; this.server = garageServer.createGarageServer(sockets, { logging: true, interpolation: true, clientSidePrediction: true, - worldState: this.worldState + worldState: this.worldState, + smoothingFactor: 0.2 }); } diff --git a/example/public/javascripts/game.js b/example/public/javascripts/game.js index ae0d669..a9cf43e 100644 --- a/example/public/javascripts/game.js +++ b/example/public/javascripts/game.js @@ -5,25 +5,31 @@ $(function () { var canvas = document.getElementById('gameCanvas'), ctxCanvas = canvas.getContext('2d'), keyboard = new THREEx.KeyboardState(), playerSize = 0, entitySize = 0; + window.addEventListener('resize', resizeCanvas, false); + GarageServerIO.initializeGarageServer('http://garageserver_io.jbillmann.c9.io', { logging: true, onReady: startGame, onUpdatePlayerPrediction: GamePhysics.getNewPlayerState, onInterpolation: GamePhysics.getInterpolatedState, onWorldState: function (state) { - document.getElementById('gameCanvas').style.width = state.width + 'px'; - document.getElementById('gameCanvas').style.height = state.height + 'px'; playerSize = state.playerSize; entitySize = state.entitySize; } }); + function resizeCanvas() { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + } + + resizeCanvas(); function startGame() { GameLoop.start( //Render Loop function () { ctxCanvas.clearRect(0, 0, canvas.width, canvas.height); - + ctxCanvas.fillStyle = 'white'; var playerStates = GarageServerIO.getPlayerStates(), entityStates = GarageServerIO.getEntityStates(); playerStates.forEach(function (player) { diff --git a/example/public/stylesheets/style.css b/example/public/stylesheets/style.css index ec7f7ac..68098c3 100644 --- a/example/public/stylesheets/style.css +++ b/example/public/stylesheets/style.css @@ -1,16 +1,21 @@ +* { + margin: 0; + padding: 0; +} + +html, body { + height: 100%; + width: 100%; +} + +body { + background-color: #001429; +} + #gameCanvas { - outline: 1px solid black; - padding-left: 0; - padding-right: 0; - margin-left: auto; - margin-right: auto; + background-color: #001429; + background: -webkit-gradient(linear, left top, left bottom, from(#000306), to(#001429)); + background: -moz-linear-gradient(top, #000306 0%, #001429 100%); display: block; } -#fps { - padding-left: 0; - padding-right: 0; - margin-left: auto; - margin-right: auto; - width: 800px; -} \ No newline at end of file diff --git a/example/shared/core.js b/example/shared/core.js index 4cf8a39..d8768ba 100644 --- a/example/shared/core.js +++ b/example/shared/core.js @@ -10,16 +10,16 @@ } for (i = 0; i < inputs.length; i ++) { if (inputs[i].input === 'left') { - state.x -= (50 * deltaTime); + state.x -= (125 * deltaTime); state.direction = 'left'; } else if (inputs[i].input === 'right') { - state.x += (50 * deltaTime); + state.x += (125 * deltaTime); state.direction = 'right'; } else if (inputs[i].input === 'down') { - state.y += (50 * deltaTime); + state.y += (125 * deltaTime); state.direction = 'down'; } else if (inputs[i].input === 'up') { - state.y -= (50 * deltaTime); + state.y -= (125 * deltaTime); state.direction = 'up'; } else if (inputs[i].input === 'space') { if (garageServer) { @@ -34,13 +34,13 @@ exports.getNewEntityState = function (state, deltaTime) { if (state.direction === 'left') { - state.x -= (100 * deltaTime); + state.x -= (300 * deltaTime); } else if (state.direction === 'right') { - state.x += (100 * deltaTime); + state.x += (300 * deltaTime); } else if (state.direction === 'down') { - state.y += (100 * deltaTime); + state.y += (300 * deltaTime); } else if (state.direction === 'up') { - state.y -= (100 * deltaTime); + state.y -= (300 * deltaTime); } return state;