From 2fc606768b89bc913cedf036153e8b1a2a8bdca2 Mon Sep 17 00:00:00 2001 From: obiot Date: Wed, 26 Dec 2012 15:27:19 +0800 Subject: [PATCH] Ticket #108 : Converted me.debug.Panel into an official plugin --- plugins/debug/debugPanel.js | 263 ++++++++++++++++++++++++++++++++++++ src/debug/debug.js | 245 +-------------------------------- 2 files changed, 264 insertions(+), 244 deletions(-) create mode 100644 plugins/debug/debugPanel.js diff --git a/plugins/debug/debugPanel.js b/plugins/debug/debugPanel.js new file mode 100644 index 0000000000..5aa738d373 --- /dev/null +++ b/plugins/debug/debugPanel.js @@ -0,0 +1,263 @@ +/* + * MelonJS Game Engine + * Copyright (C) 2012, Olivier BIOT + * http://www.melonjs.org + * + * a simple debug panel plugin + * usage : me.plugin.register(debugPanel, "debug"); + * + * you can then use me.plugin.debug.show() or me.plugin.debug.hide() + * to show or hide the panel, or press respectively the "S" and "H" keys. + * + * note : + * Heap Memory information is available under Chrome when using + * the "--enable-memory-info" parameter to launch Chrome + */ + +(function($) { + + /** + * @class + * @public + * @extends me.plugin.Base + * @memberOf me + * @constructor + */ + debugPanel = me.plugin.Base.extend( + /** @scope me.debug.Panel.prototype */ + { + + // Object "Game Unique Identifier" + GUID : null, + + // to hold the debug options + // clickable rect area + area : {}, + + // panel position and size + rect : null, + + // for z ordering + // make it ridiculously high + z : Infinity, + + // visibility flag + visible : false, + + // minimum melonJS version expected + version : "0.9.5", + + /** @private */ + init : function() { + // call the parent constructor + this.parent(); + + this.rect = new me.Rect(new me.Vector2d(0, 0), me.video.getWidth(), 35); + + // set the object GUID value + this.GUID = "debug-" + me.utils.createGUID(); + + // set the object entity name + this.name = "me.debugPanel"; + + // persistent + this.isPersistent = true; + // a floating object + this.floating = true; + + // create a default font, with fixed char width + this.font = new me.Font('courier', 10, 'white'); + + // clickable areas + this.area.renderHitBox = new me.Rect(new me.Vector2d(160,5),15,15); + this.area.renderVelocity = new me.Rect(new me.Vector2d(165,25),15,15); + + this.area.renderDirty = new me.Rect(new me.Vector2d(270,5),15,15); + this.area.renderCollisionMap = new me.Rect(new me.Vector2d(270,25),15,15); + + // some internal string/length + this.help_str = "(s)how/(h)ide"; + this.help_str_len = this.font.measureText(me.video.getSystemContext(), this.help_str).width; + this.fps_str_len = this.font.measureText(me.video.getSystemContext(), "00/00 fps").width; + + // enable the FPS counter + me.debug.displayFPS = true; + + // bind the "S" and "H" keys + me.input.bindKey(me.input.KEY.S, "show"); + me.input.bindKey(me.input.KEY.H, "hide"); + + // memory heap sample points + this.samples = []; + + // make it visible + this.show(); + }, + + /** + * show the debug panel + */ + show : function() { + if (!this.visible) { + // add the panel to the object pool if required + if (!me.game.getEntityByName("me.debugPanel")[0]) { + me.game.add(this, this.z); + me.game.sort(); + } + // register a mouse event for the checkboxes + me.input.registerMouseEvent('mousedown', this.rect, this.onClick.bind(this)); + // make it visible + this.visible = true; + // force repaint + me.game.repaint(); + } + }, + + /** + * hide the debug panel + */ + hide : function() { + if (this.visible) { + // release the mouse event for the checkboxes + me.input.releaseMouseEvent('mousedown', this.rect); + // make it visible + this.visible = false; + // force repaint + me.game.repaint(); + } + }, + + + /** @private */ + update : function() { + if (me.input.isKeyPressed('show')) { + this.show(); + } + else if (me.input.isKeyPressed('hide')) { + this.hide(); + } + return true; + }, + + /** + * @private + */ + getRect : function() { + return this.rect; + }, + + /** @private */ + onClick : function() { + // check the clickable areas + if (this.area.renderHitBox.containsPoint(me.input.mouse.pos)) { + me.debug.renderHitBox = !me.debug.renderHitBox; + } else if (this.area.renderDirty.containsPoint(me.input.mouse.pos)) { + me.debug.renderDirty = !me.debug.renderDirty; + } else if (this.area.renderCollisionMap.containsPoint(me.input.mouse.pos)) { + me.debug.renderCollisionMap = !me.debug.renderCollisionMap; + /* + // not working with dynamic rendering since + // collision layer does not have allocated renderers + var layer = me.game.currentLevel.getLayerByName("collision"); + if (layer && me.debug.renderCollisionMap === false) { + layer.visible = true; + me.game.add(layer); + me.debug.renderCollisionMap = true; + me.game.sort(); + } else if (layer) { + layer.visible = false; + me.game.remove(layer); + me.debug.renderCollisionMap = false; + } + */ + } else if (this.area.renderVelocity.containsPoint(me.input.mouse.pos)) { + // does nothing for now, since velocity is + // rendered together with hitboxes (is a global debug flag required?) + me.debug.renderVelocity = !me.debug.renderVelocity; + } + // force repaint + me.game.repaint(); + }, + + /** @private */ + drawMemoryGraph : function (context, startX, endX) { + if (window.performance && window.performance.memory) { + var usedHeap = Number.prototype.round(window.performance.memory.usedJSHeapSize/1048576, 2); + var totalHeap = Number.prototype.round(window.performance.memory.totalJSHeapSize/1048576, 2); + + var len = endX - startX; + + // remove the first item + this.samples.shift(); + // add a new sample (25 is the height of the graph) + this.samples[len] = (usedHeap / totalHeap) * 25; + + // draw the graph + for (var x = len;x--;) { + var where = endX - (len - x); + context.beginPath(); + context.strokeStyle = "lightgreen"; + context.moveTo(where, 30); + context.lineTo(where, 30 - (this.samples[x] || 0)); + context.stroke(); + } + // display the current value + this.font.draw(context, usedHeap + '/' + totalHeap + ' MB', startX, 5); + } else { + // Heap Memory information not available + this.font.draw(context, "??/?? MB", startX, 5); + } + }, + + /** @private */ + draw : function(context) { + context.save(); + + // draw the panel + context.globalAlpha = 0.5; + context.fillStyle = "black"; + context.fillRect(this.rect.left, this.rect.top, + this.rect.width, this.rect.height); + context.globalAlpha = 1.0; + + // # entities / draw + this.font.draw(context, "#objects : " + me.game.getObjectCount(), 5, 5); + this.font.draw(context, "#draws : " + me.game.getDrawCount(), 5, 20); + + // debug checkboxes + this.font.draw(context, "?hitbox ["+ (me.debug.renderHitBox?"x":" ") +"]", 100, 5); + this.font.draw(context, "?velocity ["+ (me.debug.renderVelocity?"x":" ") +"]", 100, 20); + + this.font.draw(context, "?dirtyRect ["+ (me.debug.renderDirty?"x":" ") +"]", 200, 5); + this.font.draw(context, "?col. layer ["+ (me.debug.renderCollisionMap?"x":" ") +"]", 200, 20); + + // draw the memory heap usage + this.drawMemoryGraph(context, 300, this.rect.width - this.help_str_len - 15); + + // some help string + this.font.draw(context, this.help_str, this.rect.width - this.help_str_len - 5, 20); + + //fps counter + var fps_str = "" + me.timer.fps + "/" + me.sys.fps + " fps"; + this.font.draw(context, fps_str, this.rect.width - this.fps_str_len - 5, 5); + + context.restore(); + + }, + + /** @private */ + onDestroyEvent : function() { + // hide the panel + this.hide(); + // unbind "S" & "H" + me.input.unbindKey(me.input.KEY.S); + me.input.unbindKey(me.input.KEY.H); + } + + + }); + + /*---------------------------------------------------------*/ + // END END END + /*---------------------------------------------------------*/ +})(window); diff --git a/src/debug/debug.js b/src/debug/debug.js index 0a9ca3263e..ebd9966152 100644 --- a/src/debug/debug.js +++ b/src/debug/debug.js @@ -52,254 +52,11 @@ * @type {Boolean} * @memberOf me.debug */ - renderVelocity : false, + renderVelocity : false - /** - * show the debug Panel
- * Heap Memory information is available using Chrome when using the "--enable-memory-info" parameter
- * @public - * @function - */ - showPanel : function () { - var panel = me.game.getEntityByName("me.debugPanel")[0]; - // create a new one if required - if (!panel) { - var panel = new me.debug.Panel(); - me.game.add(panel); - me.game.sort(); - } else { - panel.show(); - } - // make sure at least the FPS - // counter is enabled - me.debug.displayFPS = true; - } }; - /** - * @class - * @protected - * @extends me.Rect - * @memberOf me - * @constructor - */ - me.debug.Panel = me.Rect.extend( - /** @scope me.debug.Panel.prototype */ - { - - // Object "Game Unique Identifier" - GUID : null, - - // to hold the debug options - // clickable rect area - area : {}, - - // for z ordering - // make it ridiculously high - z : Infinity, - - // visibility flag - visible : false, - - /** @private */ - init : function() { - // call the parent constructor - this.parent(new me.Vector2d(0, 0), me.video.getWidth(), 35); - - // set the object GUID value - this.GUID = me.utils.createGUID(); - - // set the object entity name - this.name = "me.debugPanel"; - - // peristent - this.isPersistent = true; - // a floating object - this.floating = true; - - // create a default font, with fixed char width - this.font = new me.Font('courier', 10, 'white'); - - // clickable areas - this.area.renderHitBox = new me.Rect(new me.Vector2d(160,5),15,15); - this.area.renderVelocity = new me.Rect(new me.Vector2d(165,25),15,15); - - this.area.renderDirty = new me.Rect(new me.Vector2d(270,5),15,15); - this.area.renderCollisionMap = new me.Rect(new me.Vector2d(270,25),15,15); - - // some internal string/length - this.help_str = "(s)how/(h)ide"; - this.help_str_len = this.font.measureText(me.video.getSystemContext(), this.help_str).width; - this.fps_str_len = this.font.measureText(me.video.getSystemContext(), "00/00 fps").width; - - // bind the "S" and "H" keys - me.input.bindKey(me.input.KEY.S, "show"); - me.input.bindKey(me.input.KEY.H, "hide"); - - // memory heap sample points - this.samples = []; - - // make it visible - this.show(); - }, - - /** @private */ - show : function() { - if (!this.visible) { - this.pos.y = 0; - // register a mouse event for the checkboxes - me.input.registerMouseEvent('mousedown', this, this.onClick.bind(this)); - // make it visible - this.visible = true; - // force repaint - me.game.repaint(); - } - }, - - /** @private */ - hide : function() { - if (this.visible) { - // hide it outside of the visible area - this.pos.y = -this.height; - // release the mouse event for the checkboxes - me.input.releaseMouseEvent('mousedown', this); - // make it visible - this.visible = false; - // force repaint - me.game.repaint(); - } - }, - - - /** @private */ - update : function() { - - if (me.input.isKeyPressed('show')) - { - this.show(); - } - else if (me.input.isKeyPressed('hide')) - { - this.hide(); - } - - return true; - }, - - /** @private */ - onClick : function() { - // check the clickable areas - if (this.area.renderHitBox.containsPoint(me.input.mouse.pos)) { - me.debug.renderHitBox = !me.debug.renderHitBox; - } else if (this.area.renderDirty.containsPoint(me.input.mouse.pos)) { - me.debug.renderDirty = !me.debug.renderDirty; - } else if (this.area.renderCollisionMap.containsPoint(me.input.mouse.pos)) { - me.debug.renderCollisionMap = !me.debug.renderCollisionMap; - /* - // not working with dynamic rendering since - // collision layer does not have allocated renderers - var layer = me.game.currentLevel.getLayerByName("collision"); - if (layer && me.debug.renderCollisionMap === false) { - layer.visible = true; - me.game.add(layer); - me.debug.renderCollisionMap = true; - me.game.sort(); - } else if (layer) { - layer.visible = false; - me.game.remove(layer); - me.debug.renderCollisionMap = false; - } - */ - } else if (this.area.renderVelocity.containsPoint(me.input.mouse.pos)) { - // does nothing for now, since velocity is - // rendered together with hitboxes (is a global debug flag required?) - me.debug.renderVelocity = !me.debug.renderVelocity; - } - // force repaint - me.game.repaint(); - }, - - /** @private */ - drawMemoryGraph : function (context, startX, endX) { - if (window.performance && window.performance.memory) { - var usedHeap = Number.prototype.round(window.performance.memory.usedJSHeapSize/1048576, 2); - var totalHeap = Number.prototype.round(window.performance.memory.totalJSHeapSize/1048576, 2); - - var len = endX - startX; - - // remove the first item - this.samples.shift(); - // add a new sample (25 is the height of the graph) - this.samples[len] = (usedHeap / totalHeap) * 25; - - // draw rhe graph - for (var x = len;x--;) { - var where = endX - (len - x); - context.beginPath(); - context.strokeStyle = "lightgreen"; - context.moveTo(where, 30); - context.lineTo(where, 30 - (this.samples[x] || 0)); - context.stroke(); - } - // display the current value - this.font.draw(context, usedHeap + '/' + totalHeap + ' MB', startX, 5); - } else { - // Heap Memory information not available - this.font.draw(context, "??/?? MB", startX, 5); - } - }, - - /** @private */ - draw : function(context) { - - context.save(); - - // draw the panel - context.globalAlpha = 0.5; - context.fillStyle = "black"; - context.fillRect(this.left, this.top, - this.width, this.height); - - context.globalAlpha = 1.0; - - // # entities / draw - this.font.draw(context, "#objects : " + me.game.getObjectCount(), 5, 5); - this.font.draw(context, "#draws : " + me.game.getDrawCount(), 5, 20); - - // debug checkboxes - this.font.draw(context, "?hitbox ["+ (me.debug.renderHitBox?"x":" ") +"]", 100, 5); - this.font.draw(context, "?velocity ["+ (me.debug.renderVelocity?"x":" ") +"]", 100, 20); - - this.font.draw(context, "?dirtyRect ["+ (me.debug.renderDirty?"x":" ") +"]", 200, 5); - this.font.draw(context, "?col. layer ["+ (me.debug.renderCollisionMap?"x":" ") +"]", 200, 20); - - // draw the memory heap usage - this.drawMemoryGraph(context, 300, this.width - this.help_str_len - 15); - - // some help string - this.font.draw(context, this.help_str, this.width - this.help_str_len - 5, 20); - - //fps counter - var fps_str = "" + me.timer.fps + "/" + me.sys.fps + " fps"; - this.font.draw(context, fps_str, this.width - this.fps_str_len - 5, 5); - - context.restore(); - - }, - - /** @private */ - onDestroyEvent : function() { - // hide the panel - this.hide(); - // unbind "S" & "H" - me.input.unbindKey(me.input.KEY.S); - me.input.unbindKey(me.input.KEY.H); - } - - - }); - /*---------------------------------------------------------*/ // END END END /*---------------------------------------------------------*/