diff --git a/app/Game/Client/Physics/Engine.js b/app/Game/Client/Physics/Engine.js index bcf587d..ba4c85b 100755 --- a/app/Game/Client/Physics/Engine.js +++ b/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); diff --git a/app/Game/Client/View/DomController.js b/app/Game/Client/View/DomController.js index 35f48b5..7700223 100755 --- a/app/Game/Client/View/DomController.js +++ b/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; diff --git a/app/Game/Client/View/Pixi/DebugDraw.js b/app/Game/Client/View/Pixi/DebugDraw.js new file mode 100644 index 0000000..19872ef --- /dev/null +++ b/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; + +}); \ No newline at end of file diff --git a/app/Game/Client/View/Pixi/Layer.js b/app/Game/Client/View/Pixi/Layer.js index 5daa51d..d7ee866 100644 --- a/app/Game/Client/View/Pixi/Layer.js +++ b/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; diff --git a/app/Game/Client/View/Pixi/Layers/Debug.js b/app/Game/Client/View/Pixi/Layers/Debug.js new file mode 100644 index 0000000..011b103 --- /dev/null +++ b/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(); +}); \ No newline at end of file diff --git a/app/Game/Client/View/Pixi/View.js b/app/Game/Client/View/Pixi/View.js index 310026a..68403c3 100755 --- a/app/Game/Client/View/Pixi/View.js +++ b/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(); } diff --git a/app/Game/Config/Settings.js b/app/Game/Config/Settings.js index 747e8c2..983c7b1 100755 --- a/app/Game/Config/Settings.js +++ b/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,