mirror of
https://github.com/IllusionMan1212/adventures-of-kuroneko.git
synced 2026-10-24 02:12:36 +00:00
Initial commit
This commit is contained in:
IllusionMan1212
@@ -0,0 +1,148 @@
|
||||
.ig_debug {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
border-top: 2px solid #f57401;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
z-index: 1000;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.ig_debug_panel_menu {
|
||||
height: 28px;
|
||||
background: #222;
|
||||
background: -webkit-gradient(linear, left bottom, left top, color-stop(0,#000000), color-stop(1,#333));
|
||||
background: -moz-linear-gradient(center bottom, #000000 0%, #333 100%);
|
||||
background: -o-linear-gradient(#333, #000000);
|
||||
}
|
||||
|
||||
.ig_debug_panel_menu div {
|
||||
float: left;
|
||||
height: 22px;
|
||||
padding: 6px 8px 0 8px;
|
||||
border-right: 1px solid #333;
|
||||
}
|
||||
|
||||
.ig_debug_panel_menu .ig_debug_head {
|
||||
font-weight: bold;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.ig_debug_menu_item:hover {
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.ig_debug_menu_item.active, .ig_debug_menu_item.active:hover {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ig_debug_stats {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
float: right;
|
||||
color: #888;
|
||||
border-left: 1px solid #333;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ig_debug_stats span {
|
||||
width: 3em;
|
||||
display:inline-block;
|
||||
color: #fff !important;
|
||||
margin-right: 0.2em;
|
||||
margin-left: 0.3em;
|
||||
font-family: bitstream vera sans mono, courier new;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ig_debug_panel {
|
||||
height: 152px;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ig_debug_panel canvas {
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
|
||||
.ig_debug_panel .ig_debug_panel {
|
||||
padding: 8px;
|
||||
height: auto;
|
||||
float: left;
|
||||
background-color: #000;
|
||||
border-right: 2px solid #222;
|
||||
}
|
||||
|
||||
.ig_debug_option {
|
||||
padding: 2px 0 2px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ig_debug_option:first-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.ig_debug_option:hover {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.ig_debug_graph_mark {
|
||||
position: absolute;
|
||||
color: #888;
|
||||
left: 4px;
|
||||
font-size: 10px;
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
.ig_debug_legend {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.ig_debug_label_mark {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 4px;
|
||||
-webkit-transition: 0.1s linear;
|
||||
-moz-transition: 0.1s linear;
|
||||
}
|
||||
|
||||
.ig_debug_legend_color {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
margin-right: 4px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.ig_debug_legend_number {
|
||||
width: 3em;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
font-family: bitstream vera sans mono, courier new;
|
||||
color: #fff;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
|
||||
.ig_debug_map_container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid #888;
|
||||
}
|
||||
|
||||
.ig_debug_map_container canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ig_debug_map_screen {
|
||||
position: absolute;
|
||||
border: 1px solid #f0f;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
ig.module(
|
||||
'impact.debug.debug'
|
||||
)
|
||||
.requires(
|
||||
'impact.debug.entities-panel',
|
||||
'impact.debug.maps-panel',
|
||||
'impact.debug.graph-panel'
|
||||
)
|
||||
.defines(function(){ "use strict";
|
||||
|
||||
/* Empty module to require all debug panels */
|
||||
|
||||
});
|
||||
@@ -0,0 +1,129 @@
|
||||
ig.module(
|
||||
'impact.debug.entities-panel'
|
||||
)
|
||||
.requires(
|
||||
'impact.debug.menu',
|
||||
'impact.entity'
|
||||
)
|
||||
.defines(function(){ "use strict";
|
||||
|
||||
|
||||
ig.Entity.inject({
|
||||
colors: {
|
||||
names: '#fff',
|
||||
velocities: '#0f0',
|
||||
boxes: '#f00'
|
||||
},
|
||||
|
||||
draw: function() {
|
||||
this.parent();
|
||||
|
||||
// Collision Boxes
|
||||
if( ig.Entity._debugShowBoxes ) {
|
||||
ig.system.context.strokeStyle = this.colors.boxes;
|
||||
ig.system.context.lineWidth = 1.0;
|
||||
ig.system.context.strokeRect(
|
||||
ig.system.getDrawPos(this.pos.x.round() - ig.game.screen.x) - 0.5,
|
||||
ig.system.getDrawPos(this.pos.y.round() - ig.game.screen.y) - 0.5,
|
||||
this.size.x * ig.system.scale,
|
||||
this.size.y * ig.system.scale
|
||||
);
|
||||
}
|
||||
|
||||
// Velocities
|
||||
if( ig.Entity._debugShowVelocities ) {
|
||||
var x = this.pos.x + this.size.x/2;
|
||||
var y = this.pos.y + this.size.y/2;
|
||||
|
||||
this._debugDrawLine( this.colors.velocities, x, y, x + this.vel.x, y + this.vel.y );
|
||||
}
|
||||
|
||||
// Names & Targets
|
||||
if( ig.Entity._debugShowNames ) {
|
||||
if( this.name ) {
|
||||
ig.system.context.fillStyle = this.colors.names;
|
||||
ig.system.context.fillText(
|
||||
this.name,
|
||||
ig.system.getDrawPos(this.pos.x - ig.game.screen.x),
|
||||
ig.system.getDrawPos(this.pos.y - ig.game.screen.y)
|
||||
);
|
||||
}
|
||||
|
||||
if( typeof(this.target) == 'object' ) {
|
||||
for( var t in this.target ) {
|
||||
var ent = ig.game.getEntityByName( this.target[t] );
|
||||
if( ent ) {
|
||||
this._debugDrawLine( this.colors.names,
|
||||
this.pos.x + this.size.x/2, this.pos.y + this.size.y/2,
|
||||
ent.pos.x + ent.size.x/2, ent.pos.y + ent.size.y/2
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
_debugDrawLine: function( color, sx, sy, dx, dy ) {
|
||||
ig.system.context.strokeStyle = color;
|
||||
ig.system.context.lineWidth = 1.0;
|
||||
|
||||
ig.system.context.beginPath();
|
||||
ig.system.context.moveTo(
|
||||
ig.system.getDrawPos(sx - ig.game.screen.x),
|
||||
ig.system.getDrawPos(sy - ig.game.screen.y)
|
||||
);
|
||||
ig.system.context.lineTo(
|
||||
ig.system.getDrawPos(dx - ig.game.screen.x),
|
||||
ig.system.getDrawPos(dy - ig.game.screen.y)
|
||||
);
|
||||
ig.system.context.stroke();
|
||||
ig.system.context.closePath();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
ig.Entity._debugEnableChecks = true;
|
||||
ig.Entity._debugShowBoxes = false;
|
||||
ig.Entity._debugShowVelocities = false;
|
||||
ig.Entity._debugShowNames = false;
|
||||
|
||||
ig.Entity.oldCheckPair = ig.Entity.checkPair;
|
||||
ig.Entity.checkPair = function( a, b ) {
|
||||
if( !ig.Entity._debugEnableChecks ) {
|
||||
return;
|
||||
}
|
||||
ig.Entity.oldCheckPair( a, b );
|
||||
};
|
||||
|
||||
|
||||
ig.debug.addPanel({
|
||||
type: ig.DebugPanel,
|
||||
name: 'entities',
|
||||
label: 'Entities',
|
||||
options: [
|
||||
{
|
||||
name: 'Checks & Collisions',
|
||||
object: ig.Entity,
|
||||
property: '_debugEnableChecks'
|
||||
},
|
||||
{
|
||||
name: 'Show Collision Boxes',
|
||||
object: ig.Entity,
|
||||
property: '_debugShowBoxes'
|
||||
},
|
||||
{
|
||||
name: 'Show Velocities',
|
||||
object: ig.Entity,
|
||||
property: '_debugShowVelocities'
|
||||
},
|
||||
{
|
||||
name: 'Show Names & Targets',
|
||||
object: ig.Entity,
|
||||
property: '_debugShowNames'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
@@ -0,0 +1,198 @@
|
||||
ig.module(
|
||||
'impact.debug.graph-panel'
|
||||
)
|
||||
.requires(
|
||||
'impact.debug.menu',
|
||||
'impact.system',
|
||||
'impact.game',
|
||||
'impact.image'
|
||||
)
|
||||
.defines(function(){ "use strict";
|
||||
|
||||
|
||||
ig.Game.inject({
|
||||
draw: function() {
|
||||
ig.graph.beginClock('draw');
|
||||
this.parent();
|
||||
ig.graph.endClock('draw');
|
||||
},
|
||||
|
||||
|
||||
update: function() {
|
||||
ig.graph.beginClock('update');
|
||||
this.parent();
|
||||
ig.graph.endClock('update');
|
||||
},
|
||||
|
||||
|
||||
checkEntities: function() {
|
||||
ig.graph.beginClock('checks');
|
||||
this.parent();
|
||||
ig.graph.endClock('checks');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
ig.DebugGraphPanel = ig.DebugPanel.extend({
|
||||
clocks: {},
|
||||
marks: [],
|
||||
textY: 0,
|
||||
height: 128,
|
||||
ms: 64,
|
||||
timeBeforeRun: 0,
|
||||
|
||||
|
||||
init: function( name, label ) {
|
||||
this.parent( name, label );
|
||||
|
||||
this.mark16ms = (this.height - (this.height/this.ms) * 16).round();
|
||||
this.mark33ms = (this.height - (this.height/this.ms) * 33).round();
|
||||
this.msHeight = this.height/this.ms;
|
||||
|
||||
this.graph = ig.$new('canvas');
|
||||
this.graph.width = window.innerWidth;
|
||||
this.graph.height = this.height;
|
||||
this.container.appendChild( this.graph );
|
||||
this.ctx = this.graph.getContext('2d');
|
||||
|
||||
this.ctx.fillStyle = '#444';
|
||||
this.ctx.fillRect( 0, this.mark16ms, this.graph.width, 1 );
|
||||
this.ctx.fillRect( 0, this.mark33ms, this.graph.width, 1 );
|
||||
|
||||
this.addGraphMark( '16ms', this.mark16ms );
|
||||
this.addGraphMark( '33ms', this.mark33ms );
|
||||
|
||||
this.addClock( 'draw', 'Draw', '#13baff' );
|
||||
this.addClock( 'update', 'Entity Update', '#bb0fff' );
|
||||
this.addClock( 'checks', 'Entity Checks & Collisions', '#a2e908' );
|
||||
this.addClock( 'lag', 'System Lag', '#f26900' );
|
||||
|
||||
ig.mark = this.mark.bind(this);
|
||||
ig.graph = this;
|
||||
},
|
||||
|
||||
|
||||
addGraphMark: function( name, height ) {
|
||||
var span = ig.$new('span');
|
||||
span.className = 'ig_debug_graph_mark';
|
||||
span.textContent = name;
|
||||
span.style.top = height.round() + 'px';
|
||||
this.container.appendChild( span );
|
||||
},
|
||||
|
||||
|
||||
addClock: function( name, description, color ) {
|
||||
var mark = ig.$new('span');
|
||||
mark.className = 'ig_debug_legend_color';
|
||||
mark.style.backgroundColor = color;
|
||||
|
||||
var number = ig.$new('span');
|
||||
number.className = 'ig_debug_legend_number';
|
||||
number.appendChild( document.createTextNode('0') );
|
||||
|
||||
var legend = ig.$new('span');
|
||||
legend.className = 'ig_debug_legend';
|
||||
legend.appendChild( mark );
|
||||
legend.appendChild( document.createTextNode(description +' (') );
|
||||
legend.appendChild( number );
|
||||
legend.appendChild( document.createTextNode('ms)') );
|
||||
|
||||
this.container.appendChild( legend );
|
||||
|
||||
this.clocks[name] = {
|
||||
description: description,
|
||||
color: color,
|
||||
current: 0,
|
||||
start: Date.now(),
|
||||
avg: 0,
|
||||
html: number
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
beginClock: function( name, offset ) {
|
||||
this.clocks[name].start = Date.now() + (offset || 0);
|
||||
},
|
||||
|
||||
|
||||
endClock: function( name ) {
|
||||
var c = this.clocks[name];
|
||||
c.current = Math.round(Date.now() - c.start);
|
||||
c.avg = c.avg * 0.8 + c.current * 0.2;
|
||||
},
|
||||
|
||||
|
||||
mark: function( msg, color ) {
|
||||
if( this.active ) {
|
||||
this.marks.push( {msg:msg, color:(color||'#fff')} );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
beforeRun: function() {
|
||||
this.endClock('lag');
|
||||
this.timeBeforeRun = Date.now();
|
||||
},
|
||||
|
||||
|
||||
afterRun: function() {
|
||||
var frameTime = Date.now() - this.timeBeforeRun;
|
||||
var nextFrameDue = (1000/ig.system.fps) - frameTime;
|
||||
this.beginClock('lag', Math.max(nextFrameDue, 0));
|
||||
|
||||
|
||||
var x = this.graph.width-1;
|
||||
var y = this.height;
|
||||
|
||||
this.ctx.drawImage( this.graph, -1, 0 );
|
||||
|
||||
this.ctx.fillStyle = '#000';
|
||||
this.ctx.fillRect( x, 0, 1, this.height );
|
||||
|
||||
this.ctx.fillStyle = '#444';
|
||||
this.ctx.fillRect( x, this.mark16ms, 1, 1 );
|
||||
|
||||
this.ctx.fillStyle = '#444';
|
||||
this.ctx.fillRect( x, this.mark33ms, 1, 1 );
|
||||
|
||||
for( var ci in this.clocks ) {
|
||||
var c = this.clocks[ci];
|
||||
c.html.textContent = c.avg.toFixed(2);
|
||||
|
||||
if( c.color && c.current > 0 ) {
|
||||
this.ctx.fillStyle = c.color;
|
||||
var h = c.current * this.msHeight;
|
||||
y -= h;
|
||||
this.ctx.fillRect( x, y, 1, h );
|
||||
c.current = 0;
|
||||
}
|
||||
}
|
||||
|
||||
this.ctx.textAlign = 'right';
|
||||
this.ctx.textBaseline = 'top';
|
||||
this.ctx.globalAlpha = 0.5;
|
||||
|
||||
for( var i = 0; i < this.marks.length; i++ ) {
|
||||
var m = this.marks[i];
|
||||
this.ctx.fillStyle = m.color;
|
||||
this.ctx.fillRect( x, 0, 1, this.height );
|
||||
if( m.msg ) {
|
||||
this.ctx.fillText( m.msg, x-1, this.textY );
|
||||
this.textY = (this.textY+8)%32;
|
||||
}
|
||||
}
|
||||
this.ctx.globalAlpha = 1;
|
||||
this.marks = [];
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
ig.debug.addPanel({
|
||||
type: ig.DebugGraphPanel,
|
||||
name: 'graph',
|
||||
label: 'Performance'
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
@@ -0,0 +1,156 @@
|
||||
ig.module(
|
||||
'impact.debug.maps-panel'
|
||||
)
|
||||
.requires(
|
||||
'impact.debug.menu',
|
||||
'impact.game',
|
||||
'impact.background-map'
|
||||
)
|
||||
.defines(function(){ "use strict";
|
||||
|
||||
|
||||
ig.Game.inject({
|
||||
loadLevel: function( data ) {
|
||||
this.parent(data);
|
||||
ig.debug.panels.maps.load(this);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
ig.DebugMapsPanel = ig.DebugPanel.extend({
|
||||
maps: [],
|
||||
mapScreens: [],
|
||||
|
||||
|
||||
init: function( name, label ) {
|
||||
this.parent( name, label );
|
||||
this.load();
|
||||
},
|
||||
|
||||
|
||||
load: function( game ) {
|
||||
this.options = [];
|
||||
this.panels = [];
|
||||
|
||||
if( !game || !game.backgroundMaps.length ) {
|
||||
this.container.innerHTML = '<em>No Maps Loaded</em>';
|
||||
return;
|
||||
}
|
||||
|
||||
this.maps = game.backgroundMaps;
|
||||
this.mapScreens = [];
|
||||
this.container.innerHTML = '';
|
||||
|
||||
for( var m = 0; m < this.maps.length; m++ ) {
|
||||
var map = this.maps[m];
|
||||
|
||||
var subPanel = new ig.DebugPanel( m, 'Layer '+m );
|
||||
|
||||
var head = new ig.$new('strong');
|
||||
head.textContent = m +': ' + map.tiles.path;
|
||||
subPanel.container.appendChild( head );
|
||||
|
||||
subPanel.addOption( new ig.DebugOption('Enabled', map, 'enabled') );
|
||||
subPanel.addOption( new ig.DebugOption('Pre Rendered', map, 'preRender') );
|
||||
subPanel.addOption( new ig.DebugOption('Show Chunks', map, 'debugChunks') );
|
||||
|
||||
this.generateMiniMap( subPanel, map, m );
|
||||
this.addPanel( subPanel );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
generateMiniMap: function( panel, map, id ) {
|
||||
var s = ig.system.scale; // we'll need this a lot
|
||||
|
||||
// resize the tileset, so that one tile is 's' pixels wide and high
|
||||
var ts = ig.$new('canvas');
|
||||
var tsctx = ts.getContext('2d');
|
||||
|
||||
var w = map.tiles.width * s;
|
||||
var h = map.tiles.height * s;
|
||||
var ws = w / map.tilesize;
|
||||
var hs = h / map.tilesize;
|
||||
ts.width = ws;
|
||||
ts.height = hs;
|
||||
tsctx.drawImage( map.tiles.data, 0, 0, w, h, 0, 0, ws, hs );
|
||||
|
||||
// create the minimap canvas
|
||||
var mapCanvas = ig.$new('canvas');
|
||||
mapCanvas.width = map.width * s;
|
||||
mapCanvas.height = map.height * s;
|
||||
var ctx = mapCanvas.getContext('2d');
|
||||
|
||||
if( ig.game.clearColor ) {
|
||||
ctx.fillStyle = ig.game.clearColor;
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
}
|
||||
|
||||
// draw the map
|
||||
var tile = 0;
|
||||
for( var x = 0; x < map.width; x++ ) {
|
||||
for( var y = 0; y < map.height; y++ ) {
|
||||
if( (tile = map.data[y][x]) ) {
|
||||
ctx.drawImage(
|
||||
ts,
|
||||
Math.floor(((tile-1) * s) % ws),
|
||||
Math.floor((tile-1) * s / ws) * s,
|
||||
s, s,
|
||||
x * s, y * s,
|
||||
s, s
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var mapContainer = ig.$new('div');
|
||||
mapContainer.className = 'ig_debug_map_container';
|
||||
mapContainer.style.width = map.width * s + 'px';
|
||||
mapContainer.style.height = map.height * s + 'px';
|
||||
|
||||
var mapScreen = ig.$new('div');
|
||||
mapScreen.className = 'ig_debug_map_screen';
|
||||
mapScreen.style.width = ((ig.system.width / map.tilesize) * s - 2) + 'px';
|
||||
mapScreen.style.height = ((ig.system.height / map.tilesize) * s - 2) + 'px';
|
||||
this.mapScreens[id] = mapScreen;
|
||||
|
||||
mapContainer.appendChild( mapCanvas );
|
||||
mapContainer.appendChild( mapScreen );
|
||||
panel.container.appendChild( mapContainer );
|
||||
},
|
||||
|
||||
|
||||
afterRun: function() {
|
||||
// Update the screen position DIV for each mini-map
|
||||
var s = ig.system.scale;
|
||||
for( var m = 0; m < this.maps.length; m++ ) {
|
||||
var map = this.maps[m];
|
||||
var screen = this.mapScreens[m];
|
||||
|
||||
if( !map || !screen ) { // Quick sanity check
|
||||
continue;
|
||||
}
|
||||
|
||||
var x = map.scroll.x / map.tilesize;
|
||||
var y = map.scroll.y / map.tilesize;
|
||||
|
||||
if( map.repeat ) {
|
||||
x %= map.width;
|
||||
y %= map.height;
|
||||
}
|
||||
|
||||
screen.style.left = (x * s) + 'px';
|
||||
screen.style.top = (y * s) + 'px';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
ig.debug.addPanel({
|
||||
type: ig.DebugMapsPanel,
|
||||
name: 'maps',
|
||||
label: 'Background Maps'
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
@@ -0,0 +1,299 @@
|
||||
ig.module(
|
||||
'impact.debug.menu'
|
||||
)
|
||||
.requires(
|
||||
'dom.ready',
|
||||
'impact.system'
|
||||
)
|
||||
.defines(function(){ "use strict";
|
||||
|
||||
|
||||
ig.System.inject({
|
||||
run: function() {
|
||||
ig.debug.beforeRun();
|
||||
this.parent();
|
||||
ig.debug.afterRun();
|
||||
},
|
||||
|
||||
setGameNow: function( gameClass ) {
|
||||
this.parent( gameClass );
|
||||
ig.debug.ready();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
ig.Debug = ig.Class.extend({
|
||||
options: {},
|
||||
panels: {},
|
||||
numbers:{},
|
||||
container: null,
|
||||
panelMenu: null,
|
||||
activePanel: null,
|
||||
|
||||
debugTime: 0,
|
||||
debugTickAvg: 0.016,
|
||||
debugRealTime: Date.now(),
|
||||
|
||||
init: function() {
|
||||
// Inject the Stylesheet
|
||||
var style = ig.$new('link');
|
||||
style.rel = 'stylesheet';
|
||||
style.type = 'text/css';
|
||||
style.href = ig.prefix + 'lib/impact/debug/debug.css';
|
||||
ig.$('body')[0].appendChild( style );
|
||||
|
||||
// Create the Debug Container
|
||||
this.container = ig.$new('div');
|
||||
this.container.className ='ig_debug';
|
||||
ig.$('body')[0].appendChild( this.container );
|
||||
|
||||
// Create and add the Menu Container
|
||||
this.panelMenu = ig.$new('div');
|
||||
this.panelMenu.innerHTML = '<div class="ig_debug_head">Impact.Debug:</div>';
|
||||
this.panelMenu.className ='ig_debug_panel_menu';
|
||||
|
||||
this.container.appendChild( this.panelMenu );
|
||||
|
||||
// Create and add the Stats Container
|
||||
this.numberContainer = ig.$new('div');
|
||||
this.numberContainer.className ='ig_debug_stats';
|
||||
this.panelMenu.appendChild( this.numberContainer );
|
||||
|
||||
// Set ig.log(), ig.assert() and ig.show()
|
||||
if( window.console && window.console.log && window.console.assert ) {
|
||||
// Can't use .bind() on native functions in IE9 :/
|
||||
ig.log = console.log.bind ? console.log.bind(console) : console.log;
|
||||
ig.assert = console.assert.bind ? console.assert.bind(console) : console.assert;
|
||||
}
|
||||
ig.show = this.showNumber.bind(this);
|
||||
},
|
||||
|
||||
|
||||
addNumber: function( name, width ) {
|
||||
var number = ig.$new('span');
|
||||
this.numberContainer.appendChild( number );
|
||||
this.numberContainer.appendChild( document.createTextNode(name) );
|
||||
|
||||
this.numbers[name] = number;
|
||||
},
|
||||
|
||||
|
||||
showNumber: function( name, number, width ) {
|
||||
if( !this.numbers[name] ) {
|
||||
this.addNumber( name, width );
|
||||
}
|
||||
this.numbers[name].textContent = number;
|
||||
},
|
||||
|
||||
|
||||
addPanel: function( panelDef ) {
|
||||
// Create the panel and options
|
||||
var panel = new (panelDef.type)( panelDef.name, panelDef.label );
|
||||
if( panelDef.options ) {
|
||||
for( var i = 0; i < panelDef.options.length; i++ ) {
|
||||
var opt = panelDef.options[i];
|
||||
panel.addOption( new ig.DebugOption(opt.name, opt.object, opt.property) );
|
||||
}
|
||||
}
|
||||
|
||||
this.panels[ panel.name ] = panel;
|
||||
panel.container.style.display = 'none';
|
||||
this.container.appendChild( panel.container );
|
||||
|
||||
|
||||
// Create the menu item
|
||||
var menuItem = ig.$new('div');
|
||||
menuItem.className = 'ig_debug_menu_item';
|
||||
menuItem.textContent = panel.label;
|
||||
menuItem.addEventListener(
|
||||
'click',
|
||||
(function(ev){ this.togglePanel(panel); }).bind(this),
|
||||
false
|
||||
);
|
||||
panel.menuItem = menuItem;
|
||||
|
||||
// Insert menu item in alphabetical order into the menu
|
||||
var inserted = false;
|
||||
for( var i = 1; i < this.panelMenu.childNodes.length; i++ ) {
|
||||
var cn = this.panelMenu.childNodes[i];
|
||||
if( cn.textContent > panel.label ) {
|
||||
this.panelMenu.insertBefore( menuItem, cn );
|
||||
inserted = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if( !inserted ) {
|
||||
// Not inserted? Append at the end!
|
||||
this.panelMenu.appendChild( menuItem );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
showPanel: function( name ) {
|
||||
this.togglePanel( this.panels[name] );
|
||||
},
|
||||
|
||||
|
||||
togglePanel: function( panel ) {
|
||||
if( panel != this.activePanel && this.activePanel ) {
|
||||
this.activePanel.toggle( false );
|
||||
this.activePanel.menuItem.className = 'ig_debug_menu_item';
|
||||
this.activePanel = null;
|
||||
}
|
||||
|
||||
var dsp = panel.container.style.display;
|
||||
var active = (dsp != 'block');
|
||||
panel.toggle( active );
|
||||
panel.menuItem.className = 'ig_debug_menu_item' + (active ? ' active' : '');
|
||||
|
||||
if( active ) {
|
||||
this.activePanel = panel;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
ready: function() {
|
||||
for( var p in this.panels ) {
|
||||
this.panels[p].ready();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
beforeRun: function() {
|
||||
var timeBeforeRun = Date.now();
|
||||
this.debugTickAvg = this.debugTickAvg * 0.8 + (timeBeforeRun - this.debugRealTime) * 0.2;
|
||||
this.debugRealTime = timeBeforeRun;
|
||||
|
||||
if( this.activePanel ) {
|
||||
this.activePanel.beforeRun();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
afterRun: function() {
|
||||
var frameTime = Date.now() - this.debugRealTime;
|
||||
var nextFrameDue = (1000/ig.system.fps) - frameTime;
|
||||
|
||||
this.debugTime = this.debugTime * 0.8 + frameTime * 0.2;
|
||||
|
||||
|
||||
if( this.activePanel ) {
|
||||
this.activePanel.afterRun();
|
||||
}
|
||||
|
||||
this.showNumber( 'ms', this.debugTime.toFixed(2) );
|
||||
this.showNumber( 'fps', Math.round(1000/this.debugTickAvg) );
|
||||
this.showNumber( 'draws', ig.Image.drawCount );
|
||||
if( ig.game && ig.game.entities ) {
|
||||
this.showNumber( 'entities', ig.game.entities.length );
|
||||
}
|
||||
ig.Image.drawCount = 0;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
ig.DebugPanel = ig.Class.extend({
|
||||
active: false,
|
||||
container: null,
|
||||
options: [],
|
||||
panels: [],
|
||||
label: '',
|
||||
name: '',
|
||||
|
||||
|
||||
init: function( name, label ) {
|
||||
this.name = name;
|
||||
this.label = label;
|
||||
this.container = ig.$new('div');
|
||||
this.container.className = 'ig_debug_panel ' + this.name;
|
||||
},
|
||||
|
||||
|
||||
toggle: function( active ) {
|
||||
this.active = active;
|
||||
this.container.style.display = active ? 'block' : 'none';
|
||||
},
|
||||
|
||||
|
||||
addPanel: function( panel ) {
|
||||
this.panels.push( panel );
|
||||
this.container.appendChild( panel.container );
|
||||
},
|
||||
|
||||
|
||||
addOption: function( option ) {
|
||||
this.options.push( option );
|
||||
this.container.appendChild( option.container );
|
||||
},
|
||||
|
||||
|
||||
ready: function(){},
|
||||
beforeRun: function(){},
|
||||
afterRun: function(){}
|
||||
});
|
||||
|
||||
|
||||
|
||||
ig.DebugOption = ig.Class.extend({
|
||||
name: '',
|
||||
labelName: '',
|
||||
className: 'ig_debug_option',
|
||||
label: null,
|
||||
mark: null,
|
||||
container: null,
|
||||
active: false,
|
||||
|
||||
colors: {
|
||||
enabled: '#fff',
|
||||
disabled: '#444'
|
||||
},
|
||||
|
||||
|
||||
init: function( name, object, property ) {
|
||||
this.name = name;
|
||||
this.object = object;
|
||||
this.property = property;
|
||||
|
||||
this.active = this.object[this.property];
|
||||
|
||||
this.container = ig.$new('div');
|
||||
this.container.className = 'ig_debug_option';
|
||||
|
||||
this.label = ig.$new('span');
|
||||
this.label.className = 'ig_debug_label';
|
||||
this.label.textContent = this.name;
|
||||
|
||||
this.mark = ig.$new('span');
|
||||
this.mark.className = 'ig_debug_label_mark';
|
||||
|
||||
this.container.appendChild( this.mark );
|
||||
this.container.appendChild( this.label );
|
||||
this.container.addEventListener( 'click', this.click.bind(this), false );
|
||||
|
||||
this.setLabel();
|
||||
},
|
||||
|
||||
|
||||
setLabel: function() {
|
||||
this.mark.style.backgroundColor = this.active ? this.colors.enabled : this.colors.disabled;
|
||||
},
|
||||
|
||||
|
||||
click: function( ev ) {
|
||||
this.active = !this.active;
|
||||
this.object[this.property] = this.active;
|
||||
this.setLabel();
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Create the debug instance!
|
||||
ig.debug = new ig.Debug();
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user