diff --git a/app/Game/Client/GameController.js b/app/Game/Client/GameController.js index 3e68885..7220705 100755 --- a/app/Game/Client/GameController.js +++ b/app/Game/Client/GameController.js @@ -6,10 +6,11 @@ define([ "Game/Client/Control/PlayerController", "Game/Core/NotificationCenter", "Lib/Utilities/RequestAnimFrame", - "Game/Config/Settings" + "Game/Config/Settings", + "Lib/Vendor/Stats" ], -function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, NotificationCenter, requestAnimFrame, Settings) { +function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, NotificationCenter, requestAnimFrame, Settings, Stats) { function GameController () { this.viewController = new ViewController(); @@ -20,12 +21,19 @@ function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, Notifi this.me = null; + this.initStats(); + this.update(); - this.render(); } GameController.prototype = Object.create(Parent.prototype); + GameController.prototype.initStats = function() { + this.stats = new Stats(); + this.stats.setMode(0); + document.body.appendChild(this.stats.domElement); + }; + GameController.prototype.makeMouseJoint = function(p) { var ground = this.physicsEngine.getGround(); var body = this.me.getBody(); @@ -54,19 +62,19 @@ function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, Notifi } GameController.prototype.update = function () { + this.stats.begin(); - setTimeout(this.update.bind(this), Settings.BOX2D_TIME_STEP * 1000); + requestAnimFrame(this.update.bind(this)); this.physicsEngine.update(); if(this.me) { this.me.update(); } - } - GameController.prototype.render = function() { - requestAnimFrame(this.render.bind(this)); this.viewController.render(); + + this.stats.end(); } GameController.prototype.onWorldUpdate = function (updateData) { diff --git a/app/Game/Client/Networker.js b/app/Game/Client/Networker.js index 8f92484..bd12d2b 100755 --- a/app/Game/Client/Networker.js +++ b/app/Game/Client/Networker.js @@ -63,8 +63,22 @@ function (ProtocolHelper, GameController, User, NotificationCenter) { console.log("already spawned player, options: ", options.spawnedPlayers[i]) } } + + this.initPing(); } + Networker.prototype.initPing = function() { + this.pingDOMElement = document.createElement("span"); + this.pingDOMElement.style.color = "white"; + this.pingDOMElement.style.fontFamily = "monospace"; + document.body.appendChild(this.pingDOMElement); + this.ping(); + }; + + Networker.prototype.ping = function() { + this.sendCommand("ping", Date.now()); + }; + // Sending commands @@ -97,6 +111,11 @@ function (ProtocolHelper, GameController, User, NotificationCenter) { ProtocolHelper.applyCommand(message, this.gameController); } + Networker.prototype.onPong = function(timestamp) { + this.pingDOMElement.innerHTML = "Ping: " + (Date.now() - parseInt(timestamp, 10)); + setTimeout(this.ping.bind(this), 1000); + }; + return Networker; }); \ No newline at end of file diff --git a/app/Game/Client/View/ViewController.js b/app/Game/Client/View/ViewController.js index 1d6ed58..23beee7 100755 --- a/app/Game/Client/View/ViewController.js +++ b/app/Game/Client/View/ViewController.js @@ -35,11 +35,11 @@ define(requires, function (DomController, Three, Settings, CameraController) { preserveDrawingBuffer: true }; - //if(isWebGlEnabled()) { + if(Settings.USE_WEBGL) { this.renderer = new Three.WebGLRenderer(rendererOptions); - //} else { - //this.renderer = new Three.CanvasRenderer(rendererOptions); - //} + } else { + this.renderer = new Three.CanvasRenderer(rendererOptions); + } this.renderer.setClearColor("#333333", 1); this.renderer.setSize(Settings.STAGE_WIDTH, Settings.STAGE_HEIGHT); diff --git a/app/Game/Config/Settings.js b/app/Game/Config/Settings.js index f173ffc..67bfeef 100755 --- a/app/Game/Config/Settings.js +++ b/app/Game/Config/Settings.js @@ -8,7 +8,7 @@ define({ BOX2D_GRAVITY: 16, BOX2D_VELOCITY_ITERATIONS: 5, BOX2D_POSITION_ITERATIONS: 5, - BOX2D_TIME_STEP: 1 / 30, + BOX2D_TIME_STEP: 1 / 60, // GRAPHIC PATHS GRAPHICS_PATH: 'static/img/', @@ -43,8 +43,9 @@ define({ // BROWSER CANVAS_DOM_ID: 'canvasContainer', IS_BROWSER_ENVIRONMENT: typeof window !== 'undefined', + USE_WEGBL: true, - DEBUG_MODE: true, + DEBUG_MODE: false, // NETWORKING WORLD_UPDATE_BROADCAST_INTERVAL: 70 diff --git a/app/Game/Core/Physics/Engine.js b/app/Game/Core/Physics/Engine.js index b582a6b..6b5c22c 100755 --- a/app/Game/Core/Physics/Engine.js +++ b/app/Game/Core/Physics/Engine.js @@ -12,6 +12,7 @@ function (Settings, Box2D, CollisionDetector) { Settings.BOX2D_ALLOW_SLEEP ); this.ground = null; + this.lastStep = Date.now(); console.log(Settings.BOX2D_TIME_STEP) } @@ -36,7 +37,9 @@ function (Settings, Box2D, CollisionDetector) { } Engine.prototype.update = function () { - this.world.Step(Settings.BOX2D_TIME_STEP, Settings.BOX2D_VELOCITY_ITERATIONS, Settings.BOX2D_POSITION_ITERATIONS); + var stepLength = (Date.now() - this.lastStep) / 1000; + this.world.Step(stepLength, Settings.BOX2D_VELOCITY_ITERATIONS, Settings.BOX2D_POSITION_ITERATIONS); + this.lastStep = Date.now(); this.world.ClearForces(); } diff --git a/app/Lib/Vendor/Stats.js b/app/Lib/Vendor/Stats.js new file mode 100644 index 0000000..a66f82b --- /dev/null +++ b/app/Lib/Vendor/Stats.js @@ -0,0 +1,9 @@ +define(function() { + var Stats=function(){var l=Date.now(),m=l,g=0,n=Infinity,o=0,h=0,p=Infinity,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function(b){b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px"; + i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div"); + k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function(b){s=b;switch(s){case 0:a.style.display= + "block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{REVISION:11,domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height= + a+"px",m=b,r=0);return b},update:function(){l=this.end()}}}; + + return Stats; +}); diff --git a/app/Lobby/User.js b/app/Lobby/User.js index b9583bb..e080190 100755 --- a/app/Lobby/User.js +++ b/app/Lobby/User.js @@ -53,6 +53,11 @@ function (Parent, ProtocolHelper, NotificationCenter) { NotificationCenter.trigger("user/controlCommand", this.id, message); }; + User.prototype.onPing = function(timestamp) { + var message = ProtocolHelper.encodeCommand("pong", timestamp); + NotificationCenter.trigger("user/" + this.socketLink.id + "/message", message); + }; + return User; }); \ No newline at end of file diff --git a/client.js b/client.js index 1ca0b73..741f3b6 100755 --- a/client.js +++ b/client.js @@ -7,10 +7,11 @@ var inspector = {}; requirejs([ "Game/Client/Networker", - "Lib/Vendor/SocketIO" + "Lib/Vendor/SocketIO", + "Game/Config/Settings" ], -function (Networker, SocketIO) { +function (Networker, SocketIO, Settings) { var options = { "reconnect": false, @@ -27,4 +28,5 @@ function (Networker, SocketIO) { var networker = new Networker(socket); inspector.networker = networker; + inspector.settings = Settings; }); \ No newline at end of file