From 4afc39081dbe623a017a3650e5588836c6f246c4 Mon Sep 17 00:00:00 2001 From: Jeena Date: Thu, 16 Jan 2014 16:09:17 +0100 Subject: [PATCH] debug draw overlay, fullscreen --- app/Bootstrap/HttpServer.js | 7 +- app/Game/Client/GameController.js | 28 +---- app/Game/Client/Networker.js | 13 +- app/Game/Client/Physics/Engine.js | 41 ++++--- app/Game/Client/View/DomController.js | 135 +++++++++++++++++---- app/Game/Client/View/ViewManager.js | 9 +- app/Game/Client/View/Views/AbstractView.js | 31 ++++- app/Game/Client/View/Views/PixiView.js | 34 ++++-- app/Game/Core/Physics/Engine.js | 1 + app/Lib/Vendor/Screenfull.js | 3 + package.json | 3 +- server.js | 2 +- static/html/index.html | 33 ++++- 13 files changed, 247 insertions(+), 93 deletions(-) create mode 100644 app/Lib/Vendor/Screenfull.js diff --git a/app/Bootstrap/HttpServer.js b/app/Bootstrap/HttpServer.js index a8cfd7d..57bc03e 100755 --- a/app/Bootstrap/HttpServer.js +++ b/app/Bootstrap/HttpServer.js @@ -7,7 +7,8 @@ function (http, nodeStatic) { function HttpServer (options) { options.port = options.port || 1234; - options.caching = typeof options.caching != 'undefined' ? options.caching : true; + options.caching = typeof options.caching != 'undefined' ? options.caching : 3600; + console.log(options.caching) options.rootDirectory = options.rootDirectory || './'; this.server = null; @@ -44,6 +45,10 @@ function (http, nodeStatic) { fileServer.serveFile('./node_modules/requirejs/require.js', 200, {}, req, res); break; + case req.url == '/screenfull.js': + fileServer.serveFile('./node_modules/screenfull/dist/screenfull.js', 200, {}, req, res); + break; + case new RegExp(/^\/app/).test(req.url): fileServer.serve(req, res, function () { self.handleFileError(res) diff --git a/app/Game/Client/GameController.js b/app/Game/Client/GameController.js index 35b8003..405584d 100755 --- a/app/Game/Client/GameController.js +++ b/app/Game/Client/GameController.js @@ -7,16 +7,15 @@ define([ "Lib/Utilities/NotificationCenter", "Lib/Utilities/RequestAnimFrame", "Game/Config/Settings", - "Lib/Vendor/Stats", "Game/Client/GameObjects/GameObject", - "Game/Client/GameObjects/Doll" + "Game/Client/GameObjects/Doll", + "Game/Client/View/DomController" ], -function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, NotificationCenter, requestAnimFrame, Settings, Stats, GameObject, Doll) { +function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, NotificationCenter, requestAnimFrame, Settings, GameObject, Doll, DomController) { function GameController () { this.view = ViewManager.createView(); - this.initStats(); this.me = null; Parent.call(this); @@ -24,23 +23,6 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Notificat GameController.prototype = Object.create(Parent.prototype); - GameController.prototype.initStats = function() { - this.stats = new Stats(); - this.stats.setMode(0); - document.body.appendChild(this.stats.domElement); - var p = document.createElement("p"); - var button = document.createElement("button"); - button.innerHTML = "Reset level"; - button.onclick = function() { - inspector.resetLevel(); - button.disabled = true;; - setTimeout(function() { - button.disabled = false; - }, 1000 * 30); - } - p.appendChild(button); - document.body.appendChild(p); - }; GameController.prototype.destruct = function() { //destroy box2d world etc. @@ -51,7 +33,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Notificat } GameController.prototype.update = function () { - this.stats.begin(); + DomController.statsBegin(); requestAnimFrame(this.update.bind(this)); @@ -67,7 +49,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Notificat this.view.render(); - this.stats.end(); + DomController.statsEnd(); } GameController.prototype.onWorldUpdate = function (updateData) { diff --git a/app/Game/Client/Networker.js b/app/Game/Client/Networker.js index 7f15b9f..0c5b872 100755 --- a/app/Game/Client/Networker.js +++ b/app/Game/Client/Networker.js @@ -3,10 +3,11 @@ define([ "Game/Client/GameController", "Game/Client/User", "Lib/Utilities/NotificationCenter", - "Game/Config/Settings" + "Game/Config/Settings", + "Game/Client/View/DomController" ], -function (ProtocolHelper, GameController, User, NotificationCenter, Settings) { +function (ProtocolHelper, GameController, User, NotificationCenter, Settings, DomController) { function Networker (socketLink) { this.socketLink = socketLink; @@ -74,10 +75,7 @@ function (ProtocolHelper, GameController, User, NotificationCenter, Settings) { } 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(); }; @@ -121,7 +119,8 @@ function (ProtocolHelper, GameController, User, NotificationCenter, Settings) { } Networker.prototype.onPong = function(timestamp) { - this.pingDOMElement.innerHTML = "Ping: " + (Date.now() - parseInt(timestamp, 10)); + var ping = (Date.now() - parseInt(timestamp, 10)); + DomController.setPing(ping); setTimeout(this.ping.bind(this), 1000); }; diff --git a/app/Game/Client/Physics/Engine.js b/app/Game/Client/Physics/Engine.js index ce4d2ac..b22357b 100755 --- a/app/Game/Client/Physics/Engine.js +++ b/app/Game/Client/Physics/Engine.js @@ -2,34 +2,43 @@ define([ "Game/Core/Physics/Engine", "Game/Config/Settings", "Game/Client/View/DomController", - "Lib/Vendor/Box2D" + "Lib/Vendor/Box2D", + "Lib/Utilities/NotificationCenter" ], -function (Parent, Settings, DomController, Box2D) { +function (Parent, Settings, DomController, Box2D, NotificationCenter) { function Engine () { Parent.call(this); - if(Settings.DEBUG_MODE) { - this.setupDebugDraw(); - } + this.debugMode = false; + + NotificationCenter.on("view/toggleDebugMode", this.onToggleDebugMode, this); } Engine.prototype = Object.create(Parent.prototype); + Engine.prototype.onToggleDebugMode = function(debugMode) { + this.debugMode = debugMode; + + if(this.debugMode && !this.debugDraw) { + this.setupDebugDraw(); + } + }; + Engine.prototype.setupDebugDraw = function () { - //var debugSprite = Settings.DEBUG_DRAW_CANVAS_SPRITE; + var debugSprite = DomController.getDebugCanvas().getContext("2d"); // set debug draw - var debugDraw = new Box2D.Dynamics.b2DebugDraw(); + this.debugDraw = new Box2D.Dynamics.b2DebugDraw(); - debugDraw.SetSprite(debugSprite); - debugDraw.SetDrawScale(Settings.RATIO); - debugDraw.SetFillAlpha(0.5); - debugDraw.SetLineThickness(1.0); + this.debugDraw.SetSprite(debugSprite); + this.debugDraw.SetDrawScale(Settings.RATIO); + this.debugDraw.SetFillAlpha(0.5); + this.debugDraw.SetLineThickness(1.0); - debugDraw.SetFlags(null + this.debugDraw.SetFlags(null | Box2D.Dynamics.b2DebugDraw.e_shapeBit | Box2D.Dynamics.b2DebugDraw.e_jointBit //| Box2D.Dynamics.b2DebugDraw.e_coreShapeBit @@ -39,15 +48,15 @@ function (Parent, Settings, DomController, Box2D) { //| Box2D.Dynamics.b2DebugDraw.e_pairBit ); - this.world.SetDebugDraw(debugDraw); - this.world.SetWarmStarting(true); + this.world.SetDebugDraw(this.debugDraw); } - Engine.prototype.update = function () { Parent.prototype.update.call(this); - this.world.DrawDebugData(); + if(this.debugMode) { + this.world.DrawDebugData(); + } } return Engine; diff --git a/app/Game/Client/View/DomController.js b/app/Game/Client/View/DomController.js index 6145786..795f6bf 100755 --- a/app/Game/Client/View/DomController.js +++ b/app/Game/Client/View/DomController.js @@ -1,15 +1,101 @@ define([ - 'Game/Config/Settings' + 'Game/Config/Settings', + 'Lib/Utilities/NotificationCenter', + "Lib/Vendor/Stats", + "Lib/Vendor/Screenfull" ], -function (Settings) { +function (Settings, NotificationCenter, Stats, Screenfull) { - var DomController = { - canvas: null, - debugCanvas: null + function DomController() { + this.canvas = null; + this.debugCanvas = null; + this.stats = null; + this.ping = null; + + NotificationCenter.on("view/ready", this.initDevTools, this); + } + + DomController.prototype.initDevTools = function() { + + var self = this; + + // create dev tools container + this.devToolsContainer = document.createElement("div"); + this.devToolsContainer.id = "devtools"; + document.body.appendChild(this.devToolsContainer); + + // create Fullscreen + var p = document.createElement("p"); + var button = document.createElement("button"); + button.innerHTML = "Fullscreen"; + button.onclick = function() { + if(Screenfull.enabled) { + Screenfull.request(self.canvas); + } + } + p.appendChild(button); + this.devToolsContainer.appendChild(p); + + window.onresize = function() { + if(Screenfull.enabled) { + NotificationCenter.trigger("view/fullscreenChange", Screenfull.isFullscreen); + } + } + + // create Ping: container + this.ping = document.createElement("span"); + this.devToolsContainer.appendChild(this.ping); + + // create FPS stats + this.stats = new Stats(); + this.stats.setMode(0); + this.devToolsContainer.appendChild(this.stats.domElement); + + // create Reset level + p = document.createElement("p"); + button = document.createElement("button"); + button.innerHTML = "Reset level"; + button.onclick = function() { + inspector.resetLevel(); + button.disabled = true;; + setTimeout(function() { + button.disabled = false; + }, 1000 * 30); + } + p.appendChild(button); + this.devToolsContainer.appendChild(p); + + // create debug mode + var label = document.createElement("label"); + var checkbox = document.createElement("input"); + checkbox.type = "checkbox"; + checkbox.onclick = function(e) { + NotificationCenter.trigger("view/toggleDebugMode", e.target.checked); + self.getDebugCanvas().style.display = e.target.checked ? "" : "none"; + } + label.appendChild(checkbox); + label.appendChild(document.createTextNode("Debug")); + this.devToolsContainer.appendChild(label); }; - DomController.getCanvasContainer = function () { + DomController.prototype.statsBegin = function() { + if(this.stats) { + this.stats.begin(); + } + }; + + DomController.prototype.statsEnd = function() { + if(this.stats) { + this.stats.end(); + } + }; + + DomController.prototype.setPing = function(ping) { + this.ping.innerHTML = "Ping: " + ping; + }; + + DomController.prototype.getCanvasContainer = function () { var container = document.getElementById(Settings.CANVAS_DOM_ID); if(container) { @@ -19,38 +105,35 @@ function (Settings) { } } - DomController.getCanvas = function () { - return DomController.canvas; + DomController.prototype.getCanvas = function () { + return this.canvas; } - DomController.setCanvas = function (canvas) { + DomController.prototype.setCanvas = function (canvas) { - var container = DomController.getCanvasContainer(); - if(DomController.canvas) { - container.removeChild(DomController.canvas); + var container = this.getCanvasContainer(); + if(this.canvas) { + container.removeChild(this.canvas); } - DomController.canvas = canvas; + this.canvas = canvas; container.appendChild(canvas); } - DomController.getDebugCanvas = function () { - return DomController.debugCanvas; - } + DomController.prototype.getDebugCanvas = function () { - DomController.createDebugCanvas = function () { - var container = DomController.getCanvasContainer(); - if(DomController.debugCanvas) { - container.removeChild(DomController.debugCanvas); + if(!this.debugCanvas) { + var canvas = document.createElement('canvas'); + canvas.width = Settings.STAGE_WIDTH; + canvas.height = Settings.STAGE_HEIGHT; + this.debugCanvas = canvas; + this.getCanvasContainer().appendChild(canvas); } - var canvas = document.createElement('canvas'); - canvas.width = Settings.STAGE_WIDTH; - canvas.height = Settings.STAGE_HEIGHT; - DomController.debugCanvas = canvas; - container.appendChild(canvas); + return this.debugCanvas; } - return DomController; + + return new DomController(); }); \ No newline at end of file diff --git a/app/Game/Client/View/ViewManager.js b/app/Game/Client/View/ViewManager.js index 0ba3047..d4694d4 100644 --- a/app/Game/Client/View/ViewManager.js +++ b/app/Game/Client/View/ViewManager.js @@ -4,9 +4,10 @@ define([ "Game/Client/View/Views/AbstractView", //"Game/Client/View/Views/ThreeView", "Game/Client/View/Views/PixiView", + "Lib/Utilities/NotificationCenter" ], -function (Settings, Exception, AbstractView, PixiView) { +function (Settings, Exception, AbstractView, PixiView, NotificationCenter) { var ViewManager = {}; @@ -22,7 +23,7 @@ function (Settings, Exception, AbstractView, PixiView) { default: throw new Exception("A view called", Settings.VIEW_CONTROLLER, "has not been (fully) implemented."); } -/* + if(!(view instanceof AbstractView)) { throw new Exception("The view", Settings.VIEW_CONTROLLER + 'View', "must extend AbstractView!"); } @@ -34,7 +35,9 @@ function (Settings, Exception, AbstractView, PixiView) { if(!(view.canvas instanceof HTMLCanvasElement)) { throw new Exception("In the view", Settings.VIEW_CONTROLLER + 'View', "this.setCanvas(canvas) has not been called with a valid HTMLCanvasElement!"); } -*/ + + NotificationCenter.trigger("view/ready", view); + return view; } diff --git a/app/Game/Client/View/Views/AbstractView.js b/app/Game/Client/View/Views/AbstractView.js index a1bb3fc..8e9f7cd 100644 --- a/app/Game/Client/View/Views/AbstractView.js +++ b/app/Game/Client/View/Views/AbstractView.js @@ -10,12 +10,16 @@ function (DomController, Settings, Exception, NotificationCenter) { function AbstractView () { this.me = null; this.canvas = null; + this.debugMode = false; NotificationCenter.on("view/createMesh", this.createMesh, this); NotificationCenter.on("view/createAnimatedMesh", this.createAnimatedMesh, this); NotificationCenter.on("view/addMesh", this.addMesh, this); NotificationCenter.on("view/removeMesh", this.removeMesh, this); NotificationCenter.on("view/updateMesh", this.updateMesh, this); + + NotificationCenter.on("view/fullscreenChange", this.onFullscreenChange, this); + NotificationCenter.on("view/toggleDebugMode", this.onToggleDebugMode, this); } AbstractView.prototype.isWebGlEnabled = function () { @@ -30,10 +34,6 @@ function (DomController, Settings, Exception, NotificationCenter) { this.canvas = canvas; DomController.setCanvas(canvas); - - if(Settings.DEBUG_MODE) { - DomController.createDebugCanvas(); - } } AbstractView.prototype.loadPlayerMesh = function(player) { @@ -102,7 +102,28 @@ function (DomController, Settings, Exception, NotificationCenter) { AbstractView.prototype.setCameraZoom = function (z) { throw new Exception('Abstract Function setCameraZoom not overwritten '); - } + }; + + AbstractView.prototype.onFullscreenChange = function(isFullScreen) { + + if (!isFullScreen) { + Settings.STAGE_WIDTH = 600; + Settings.STAGE_HEIGHT = 400; + } else { + // FIXME: Create FIXME meme (dumb and dumber) + // FIXME: don't overwrite Settings + Settings.STAGE_WIDTH = window.innerWidth; + Settings.STAGE_HEIGHT = window.innerHeight; + } + }; + + AbstractView.prototype.onToggleDebugMode = function(debugMode) { + if(debugMode) { + this.setCameraPosition(-Settings.STAGE_WIDTH / 2, -Settings.STAGE_HEIGHT / 2); + } + + this.debugMode = debugMode; + }; return AbstractView; }); \ No newline at end of file diff --git a/app/Game/Client/View/Views/PixiView.js b/app/Game/Client/View/Views/PixiView.js index 1b060a1..442ef16 100755 --- a/app/Game/Client/View/Views/PixiView.js +++ b/app/Game/Client/View/Views/PixiView.js @@ -2,10 +2,11 @@ define([ "Game/Client/View/Views/AbstractView", "Game/Client/View/DomController", "Lib/Vendor/Pixi", - "Game/Config/Settings" + "Game/Config/Settings", + "Lib/Utilities/NotificationCenter" ], -function (Parent, DomController, PIXI, Settings) { +function (Parent, DomController, PIXI, Settings, NotificationCenter) { function PixiView () { @@ -104,14 +105,16 @@ function (Parent, DomController, PIXI, Settings) { } PixiView.prototype.calculateCameraPosition = function() { + var reference = this.me.getPosition(); var pos = {}; pos.x = -reference.x; pos.y = reference.y; - pos.x = pos.x * Settings.RATIO; - pos.y = -(pos.y * Settings.RATIO); + var zoom = this.container.scale.x; + pos.x = pos.x * Settings.RATIO * zoom; + pos.y = -(pos.y * Settings.RATIO) * zoom; pos.x -= this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4; pos.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4; @@ -120,13 +123,30 @@ function (Parent, DomController, PIXI, Settings) { }; PixiView.prototype.setCameraPosition = function (x, y) { - this.container.position.x = x + Settings.STAGE_WIDTH / 2; - this.container.position.y = y + Settings.STAGE_HEIGHT / 2; + if(!this.debugMode) { + this.container.position.x = x + Settings.STAGE_WIDTH / 2; + this.container.position.y = y + Settings.STAGE_HEIGHT / 2; + } }; PixiView.prototype.setCameraZoom = function (z) { //this.container.position.x = x; - //this.container.position.y = y; + //this.container.position.y = y; + this.container.scale.x = z; + this.container.scale.y = z; + + }; + + PixiView.prototype.onFullscreenChange = function(isFullScreen) { + Parent.prototype.onFullscreenChange.call(this, isFullScreen); + + if(isFullScreen) { + this.renderer.resize(window.innerWidth, window.innerHeight); + this.setCameraZoom(window.innerWidth / 600); + } else { + this.renderer.resize(600, 400); + this.setCameraZoom(1); + } }; return PixiView; diff --git a/app/Game/Core/Physics/Engine.js b/app/Game/Core/Physics/Engine.js index d9a920f..267ec85 100755 --- a/app/Game/Core/Physics/Engine.js +++ b/app/Game/Core/Physics/Engine.js @@ -11,6 +11,7 @@ function (Settings, Box2D, CollisionDetector) { new Box2D.Common.Math.b2Vec2(0, Settings.BOX2D_GRAVITY), Settings.BOX2D_ALLOW_SLEEP ); + this.world.SetWarmStarting(true); this.ground = null; this.lastStep = Date.now(); } diff --git a/app/Lib/Vendor/Screenfull.js b/app/Lib/Vendor/Screenfull.js new file mode 100644 index 0000000..ad4eb40 --- /dev/null +++ b/app/Lib/Vendor/Screenfull.js @@ -0,0 +1,3 @@ +define(["/screenfull.js"], function() { + return screenfull; +}); \ No newline at end of file diff --git a/package.json b/package.json index 4459b28..00dae83 100755 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "socket.io": ">= 0.9.6", "node-static": ">= 0.6.0", "requirejs": "= 2.0.4", - "node-fork": ">= 0.4.2" + "node-fork": ">= 0.4.2", + "screenfull": ">= 1.0.4" }, "devDependencies": {}, "optionalDependencies": {}, diff --git a/server.js b/server.js index f8a664b..e0888bc 100755 --- a/server.js +++ b/server.js @@ -16,7 +16,7 @@ var port = process.argv[2] var options = { port: port, rootDirectory: './', - caching: false, + caching: 0, logLevel: process.argv[3] || 0 }; diff --git a/static/html/index.html b/static/html/index.html index 01b65ef..19e8c6f 100755 --- a/static/html/index.html +++ b/static/html/index.html @@ -10,7 +10,9 @@ display: table; width: 100%; height: 100%; - background: #000; + background: black; + color: white; + font-family: monospace; } #loading { @@ -29,15 +31,40 @@ } #canvasContainer { + /* text-align: center; display: table-cell; vertical-align: middle; + */ height: 100%; } canvas { - background: #333; - margin: 10px; + position: absolute; + top: 50%; + left: 50%; + margin-top: -200px; + margin-left: -300px; + } + + :-webkit-full-screen { + top: 0; + left: 0; + margin: 0; + padding: 0; + } + + #devtools { + position: absolute; + right: 0; + top: 0; + padding: 10px; + background: #222; + } + + #devtools p { + padding: 5px 0 0 0; + margin: 0; }