added new debug draw

app/Game/Client/Physics/Engine.js

@@ -3,10 +3,11 @@ define([
     "Game/Config/Settings",
     "Game/Client/View/DomController",
     "Lib/Vendor/Box2D",
-    "Lib/Utilities/NotificationCenter"
+    "Lib/Utilities/NotificationCenter",
+    "Game/Client/View/Pixi/DebugDraw"
 ],
 
-function (Parent, Settings, DomController, Box2D, Nc) {
+function (Parent, Settings, DomController, Box2D, Nc, DebugDraw) {
 
 	"use strict";
 
@@ -33,7 +34,7 @@ function (Parent, Settings, DomController, Box2D, Nc) {
         var debugSprite = DomController.getDebugCanvas().getContext("2d");
 
         // set debug draw
-        this.debugDraw = new Box2D.Dynamics.b2DebugDraw();
+        this.debugDraw = new DebugDraw();
 
         this.debugDraw.SetSprite(debugSprite);
         this.debugDraw.SetDrawScale(Settings.RATIO);

app/Game/Client/View/DomController.js

@@ -89,7 +89,7 @@ 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";
+            //self.getDebugCanvas().style.display = e.target.checked ? "" : "none";
         }
         label.appendChild(checkbox);
         label.appendChild(document.createTextNode("Debug"));
@@ -170,6 +170,7 @@ function (Settings, Nc, Stats, Screenfull, Graph, PointerLockManager) {
             canvas.height = Settings.STAGE_HEIGHT;
             this.debugCanvas = canvas;
             this.getCanvasContainer().appendChild(canvas);
+            this.debugCanvas.style.display = "none";
         }
 
         return this.debugCanvas;

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

@@ -0,0 +1,140 @@
+define([
+    "Lib/Vendor/Box2D",
+    "Game/Client/View/Pixi/Layers/Debug"
+],
+ 
+function (Box2D, Debug) {
+
+    "use strict";
+
+    var Parent = Box2D.Dynamics.b2DebugDraw;
+ 
+    function DebugDraw() {
+        Parent.call(this);
+
+
+        this.m_drawScale = 1;
+
+          this.m_sprite = {
+             graphics: {
+                clear: function () {
+                    Debug.graphics.clear();
+                    Debug.graphics.lineStyle ( 1, 0x00ff00 , .8 )
+
+                   //__this.m_ctx.clearRect(0, 0, __this.m_ctx.canvas.width, __this.m_ctx.canvas.height)
+                }
+             }
+          };
+
+    }
+
+    DebugDraw.prototype = Object.create(Parent.prototype);
+
+    DebugDraw.prototype.SetSprite = function (sprite) {
+        this.m_ctx = Debug.graphics;
+
+        this.m_ctx.beginPath = function(){
+            Debug.graphics.beginFill(0x00ff00, 0.2);
+        };
+        this.m_ctx.closePath = function(){
+            Debug.graphics.endFill();
+        };
+        this.m_ctx.fill = function(){
+            this.endFill();
+        };
+        this.m_ctx.stroke = function(){
+            //console.log('customStroke');
+        };
+
+    };
+
+    DebugDraw.prototype.DrawPolygon = function (vertices, vertexCount, color) {
+        if (!vertexCount) return;
+        var s = this.m_ctx;
+        var drawScale = this.m_drawScale;
+        s.beginPath();
+        s.strokeStyle = this._color(color.color, this.m_alpha);
+        s.moveTo(vertices[0].x * drawScale, vertices[0].y * drawScale);
+        for (var i = 1; i < vertexCount; i++) {
+           s.lineTo(vertices[i].x * drawScale, vertices[i].y * drawScale);
+        }
+        s.lineTo(vertices[0].x * drawScale, vertices[0].y * drawScale);
+        s.closePath();
+        s.stroke();
+    };
+
+    DebugDraw.prototype.DrawSolidPolygon = function (vertices, vertexCount, color) {
+        if (!vertexCount) return;
+        var s = this.m_ctx;
+        var drawScale = this.m_drawScale;
+        s.beginPath();
+        s.strokeStyle = this._color(color.color, this.m_alpha);
+        s.fillStyle = this._color(color.color, this.m_fillAlpha);
+        s.moveTo(vertices[0].x * drawScale, vertices[0].y * drawScale);
+        for (var i = 1; i < vertexCount; i++) {
+           s.lineTo(vertices[i].x * drawScale, vertices[i].y * drawScale);
+        }
+        s.lineTo(vertices[0].x * drawScale, vertices[0].y * drawScale);
+        s.closePath();
+        s.fill();
+        s.stroke();
+    };
+
+    DebugDraw.prototype.DrawCircle = function (center, radius, color) {
+        if (!radius) return;
+        var s = this.m_ctx;
+        var drawScale = this.m_drawScale;
+        s.beginPath();
+        s.strokeStyle = this._color(color.color, this.m_alpha);
+        s.arc(center.x * drawScale, center.y * drawScale, radius * drawScale, 0, Math.PI * 2, true);
+        s.closePath();
+        s.stroke();
+    };
+
+    DebugDraw.prototype.DrawSolidCircle = function (center, radius, axis, color) {
+        if (!radius) return;
+        var s = this.m_ctx,
+           drawScale = this.m_drawScale,
+           cx = center.x * drawScale,
+           cy = center.y * drawScale;
+        s.moveTo(0, 0);
+        s.beginPath();
+        s.strokeStyle = this._color(color.color, this.m_alpha);
+        s.fillStyle = this._color(color.color, this.m_fillAlpha);
+        s.arc(cx, cy, radius * drawScale, 0, Math.PI * 2, true);
+        s.moveTo(cx, cy);
+        s.lineTo((center.x + axis.x * radius) * drawScale, (center.y + axis.y * radius) * drawScale);
+        s.closePath();
+        s.fill();
+        s.stroke();
+    };
+
+    DebugDraw.prototype.DrawSegment = function (p1, p2, color) {
+        var s = this.m_ctx,
+           drawScale = this.m_drawScale;
+        s.strokeStyle = this._color(color.color, this.m_alpha);
+        s.beginPath();
+        s.moveTo(p1.x * drawScale, p1.y * drawScale);
+        s.lineTo(p2.x * drawScale, p2.y * drawScale);
+        s.closePath();
+        s.stroke();
+    };
+
+    DebugDraw.prototype.DrawTransform = function (xf) {
+        var s = this.m_ctx,
+           drawScale = this.m_drawScale;
+        s.beginPath();
+        s.strokeStyle = this._color(0xff0000, this.m_alpha);
+        s.moveTo(xf.position.x * drawScale, xf.position.y * drawScale);
+        s.lineTo((xf.position.x + this.m_xformScale * xf.R.col1.x) * drawScale, (xf.position.y + this.m_xformScale * xf.R.col1.y) * drawScale);
+
+        s.strokeStyle = this._color(0xff00, this.m_alpha);
+        s.moveTo(xf.position.x * drawScale, xf.position.y * drawScale);
+        s.lineTo((xf.position.x + this.m_xformScale * xf.R.col2.x) * drawScale, (xf.position.y + this.m_xformScale * xf.R.col2.y) * drawScale);
+        s.closePath();
+        s.stroke();
+    };
+
+    return DebugDraw;
+ 
+});

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

@@ -43,6 +43,7 @@ function (Parent, PIXI, ColorRangeReplaceFilter, Settings, ColorConverter) {
                 case "ghost": y++;
                 case "item": y++;
                 case "tile": y++;
+                case "debug": y++;
                 case "spawn": y=y;
             }
 
@@ -268,6 +269,7 @@ function (Parent, PIXI, ColorRangeReplaceFilter, Settings, ColorConverter) {
                 || this.name == "tile" 
                 || this.name == "item"
                 || this.name == "ghost"
+                || this.name == "debug"
                 || this.name == "swiper") {
                 this.container.x = this.position.current.x;
                 this.container.y = this.position.current.y;

app/Game/Client/View/Pixi/Layers/Debug.js

@@ -0,0 +1,33 @@
+define([
+	"Game/Client/View/Pixi/Layer",
+	"Lib/Vendor/Pixi",
+   "Game/Config/Settings",
+
+],
+ 
+function (Parent, PIXI, Settings) {
+
+	"use strict";
+ 
+    function Debug() {
+    	Parent.call(this, "Debug", 0);
+
+
+      this.graphics = new PIXI.Graphics();
+      this.container.addChild(this.graphics);
+    }
+
+    Debug.prototype = Object.create(Parent.prototype);
+
+    Debug.prototype.render = function(centerPosition, zoom) {
+
+         Parent.prototype.render.call(this, centerPosition, zoom);
+      
+
+
+         this.container.x -= 300 * zoom;
+         this.container.y -= 200 * zoom;
+     }    
+    
+    return new Debug();
+});

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

@@ -9,10 +9,11 @@ define([
     "Game/Client/View/LayerManager",
     "Game/Client/View/Pixi/Layers/Ghost",
     "Game/Client/View/Pixi/Layers/Swiper",
-    "Game/Client/PointerLockManager"
+    "Game/Client/PointerLockManager",
+    "Game/Client/View/Pixi/Layers/Debug"
 ], 
 
-function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, LayerManager, Ghost, Swiper, PointerLockManager) {
+function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, LayerManager, Ghost, Swiper, PointerLockManager, Debug) {
 
 	"use strict";
 
@@ -83,6 +84,9 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
         this.swiperLayer = new Swiper();
         this.layerManager.insert(this.swiperLayer, false);
 
+        this.debugLayer = Debug;
+        this.layerManager.insert(this.debugLayer, false);
+
         this.render();
     }
 

app/Game/Config/Settings.js

@@ -31,7 +31,7 @@ define(function() {
         CAMERA_GLIDE: 12, // % of the way per frame
         VIEW_CONTROLLER: 0 ? 'Three' : 'Pixi',
         ARROW_GLIDE: 30, // % of the way per frame     
-        SHOW_LAYER_INFO: false,
+        SHOW_LAYER_INFO: true,
 
         // GAME PLAY 
         WALK_SPEED: 4,