cleanup debug canvas #36

app/Game/Client/GameController.js

@@ -51,10 +51,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Nc, reque
 
         Parent.prototype.update.call(this);
 
-        DomController.statsBegin();
-
         this.animationRequestId = requestAnimFrame(this.update.bind(this));
-
         this.physicsEngine.update();
         
         if(this.me) {
@@ -67,8 +64,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Nc, reque
         }
 
         this.view.render();
-
+        DomController.fpsStep();
-        DomController.statsEnd();
     }
 
     GameController.prototype.mePositionStateUpdate = function() {   

app/Game/Client/Physics/Engine.js

@@ -4,10 +4,11 @@ define([
     "Game/Client/View/DomController",
     "Lib/Vendor/Box2D",
     "Lib/Utilities/NotificationCenter",
-    "Game/Client/View/Pixi/DebugDraw"
+    "Game/Client/View/Pixi/DebugDraw",
+    "Game/Client/View/Pixi/Layers/Debug"
 ],
 
-function (Parent, Settings, DomController, Box2D, Nc, DebugDraw) {
+function (Parent, Settings, DomController, Box2D, Nc, DebugDraw, DebugLayer) {
 
 	"use strict";
 
@@ -31,12 +32,10 @@ function (Parent, Settings, DomController, Box2D, Nc, DebugDraw) {
 
     Engine.prototype.setupDebugDraw = function () {
 
-        var debugSprite = DomController.getDebugCanvas().getContext("2d");
-
         // set debug draw
         this.debugDraw = new DebugDraw();
 
-        this.debugDraw.SetSprite(debugSprite);
+        this.debugDraw.SetSprite(DebugLayer.graphics);
         this.debugDraw.SetDrawScale(Settings.RATIO);
         this.debugDraw.SetFillAlpha(0.5);
         this.debugDraw.SetLineThickness(1.0);

app/Game/Client/View/DomController.js

@@ -13,7 +13,6 @@ function (Settings, Nc, Stats, Screenfull, Graph, PointerLockManager) {
 
     function DomController() {
         this.canvas = document.getElementById("canvas");
-        this.debugCanvas = null;
         this.stats = null;
         this.ping = null;
         this.nickContainer = null;
@@ -89,7 +88,6 @@ function (Settings, Nc, Stats, Screenfull, Graph, PointerLockManager) {
         checkbox.type = "checkbox";
         checkbox.onclick = function(e) {
             Nc.trigger(Nc.ns.client.view.debugMode.toggle, e.target.checked);
-            //self.getDebugCanvas().style.display = e.target.checked ? "" : "none";
         }
         label.appendChild(checkbox);
         label.appendChild(document.createTextNode("Debug"));
@@ -122,21 +120,8 @@ function (Settings, Nc, Stats, Screenfull, Graph, PointerLockManager) {
         this.nickContainer.innerHTML = nick
     }
 
-    DomController.prototype.statsBegin = function() {
-        /*
-        if(this.stats) {
-            this.stats.begin();
-        }
-        */
-    };
 
-    DomController.prototype.statsEnd = function() {
+    DomController.prototype.fpsStep = function() {
-
-        /*
-        if(this.stats) {
-            this.stats.end();
-        }
-        */
         this.fpsGraph.step();
     };
 
@@ -162,20 +147,6 @@ function (Settings, Nc, Stats, Screenfull, Graph, PointerLockManager) {
         Nc.trigger(Nc.ns.client.view.display.change, Screenfull.isFullscreen);
     }
 
-    DomController.prototype.getDebugCanvas = function () {
-
-        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);
-            this.debugCanvas.style.display = "none";
-        }
-
-        return this.debugCanvas;
-    }
-
     DomController.prototype.setConnected = function(connected) {
         if(connected) {
             document.body.style.backgroundColor = '';

app/Game/Client/View/Pixi/DebugDraw.js

@@ -11,21 +11,7 @@ function (Box2D, Debug) {
  
     function DebugDraw() {
         Parent.call(this);
-
-
         this.m_drawScale = 1;
-
-          this.m_sprite = {
-             graphics: {
-                clear: function () {
-                    Debug.graphics.clear();
-                    Debug.graphics.lineStyle(1, 0x00ff00 , 0.8);
-
-                   //__this.m_ctx.clearRect(0, 0, __this.m_ctx.canvas.width, __this.m_ctx.canvas.height)
-                }
-             }
-          };
-
     }
 
     DebugDraw.prototype = Object.create(Parent.prototype);
@@ -33,18 +19,27 @@ function (Box2D, Debug) {
     DebugDraw.prototype.setColor = function(color) {
         this.m_ctx.debugColor = color.color;
         this.m_ctx.debugFillAlpha = this.m_fillAlpha;
-        Debug.graphics.lineStyle(1, this.m_ctx.debugColor, this.m_alpha);
+        this.m_ctx.lineStyle(1, this.m_ctx.debugColor, this.m_alpha);
     };
 
     DebugDraw.prototype.SetSprite = function(sprite) {
-        this.m_ctx = Debug.graphics;
+        this.m_ctx = sprite;
+
+        this.m_sprite = {
+             graphics: {
+                clear: function () {
+                    sprite.clear();
+                    sprite.lineStyle(1, 0xffffff, 0.8);
+                }
+             }
+        };
 
         this.m_ctx.beginPath = function() {
-            Debug.graphics.beginFill(this.debugColor, this.debugFillAlpha);
+            this.beginFill(this.debugColor, this.debugFillAlpha);
         };
 
         this.m_ctx.closePath = function() {
-            Debug.graphics.endFill();
+            this.endFill();
         };
 
         this.m_ctx.fill = function() {
@@ -52,11 +47,11 @@ function (Box2D, Debug) {
         };
 
         this.m_ctx.stroke = function() {
-            //console.log('customStroke');
+            // do nothing
         };
 
         this.m_ctx.arc = function(x, y, radius, startingAngle, endingAngle, counterClockwise) {
-            Debug.graphics.drawCircle(x, y, radius);
+            this.drawCircle(x, y, radius);
         }
 
     };