jeena/chuck.js
1
0
Fork 0
mirror of https://github.com/logsol/chuck.js.git synced 2026-05-11 10:37:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

debug draw overlay, fullscreen

Browse source
This commit is contained in:
Jeena 2014-01-16 16:09:17 +01:00
parent 383eaa93bf
commit 4afc39081d
13 changed files with 247 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

28
app/Game/Client/GameController.js
View file

@ -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) {

13
app/Game/Client/Networker.js
View file

@ -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);
};

41
app/Game/Client/Physics/Engine.js
View file

@ -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;

135
app/Game/Client/View/DomController.js
View file

@ -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();
});

9
app/Game/Client/View/ViewManager.js
View file

@ -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;
}

31
app/Game/Client/View/Views/AbstractView.js
View file

@ -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;
});

34
app/Game/Client/View/Views/PixiView.js
View file

@ -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;