@melonjs/debug-plugin 14.8.2 → 15.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -18
- package/build/counters.d.ts +6 -0
- package/build/counters.d.ts.map +1 -0
- package/build/debugPanel.d.ts +51 -0
- package/build/debugPanel.d.ts.map +1 -0
- package/build/graphs.d.ts +18 -0
- package/build/graphs.d.ts.map +1 -0
- package/{src/index.js → build/index.d.ts} +15 -46
- package/build/index.d.ts.map +1 -0
- package/build/index.js +724 -0
- package/build/index.js.map +7 -0
- package/build/patches.d.ts +8 -0
- package/build/patches.d.ts.map +1 -0
- package/build/styles.d.ts +8 -0
- package/build/styles.d.ts.map +1 -0
- package/debug-panel.png +0 -0
- package/package.json +64 -75
- package/dist/@melonjs/debug-plugin.d.ts +0 -96
- package/dist/@melonjs/debug-plugin.js +0 -741
- package/src/counters.js +0 -17
- package/src/debugPanel.js +0 -554
- package/src/font/PressStart2P.fnt +0 -100
- package/src/font/PressStart2P.ltr +0 -1
- package/src/font/PressStart2P.png +0 -0
package/src/counters.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
class Counters {
|
|
2
|
-
constructor() {
|
|
3
|
-
this.stats = [];
|
|
4
|
-
}
|
|
5
|
-
reset() {
|
|
6
|
-
Object.keys(this.stats).forEach((stat) => {
|
|
7
|
-
this.stats[stat] = 0;
|
|
8
|
-
});
|
|
9
|
-
}
|
|
10
|
-
inc(stat, value) {
|
|
11
|
-
this.stats[stat] += (value || 1);
|
|
12
|
-
}
|
|
13
|
-
get(stat) {
|
|
14
|
-
return this.stats[stat] || 0;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
export default Counters;
|
package/src/debugPanel.js
DELETED
|
@@ -1,554 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
video,
|
|
3
|
-
Renderable,
|
|
4
|
-
utils,
|
|
5
|
-
BitmapText,
|
|
6
|
-
Rect,
|
|
7
|
-
event,
|
|
8
|
-
plugin,
|
|
9
|
-
Entity,
|
|
10
|
-
Container,
|
|
11
|
-
Camera2d,
|
|
12
|
-
ImageLayer,
|
|
13
|
-
Text,
|
|
14
|
-
game,
|
|
15
|
-
input,
|
|
16
|
-
timer,
|
|
17
|
-
Math,
|
|
18
|
-
pool,
|
|
19
|
-
collision
|
|
20
|
-
} from "melonjs";
|
|
21
|
-
|
|
22
|
-
import Counters from "./counters";
|
|
23
|
-
import fontImageSource from "./font/PressStart2P.png";
|
|
24
|
-
import fontDataSource from "./font/PressStart2P.fnt";
|
|
25
|
-
|
|
26
|
-
const DEBUG_HEIGHT = 50;
|
|
27
|
-
|
|
28
|
-
export class DebugPanel extends Renderable {
|
|
29
|
-
constructor(debugToggle) {
|
|
30
|
-
// call the super constructor
|
|
31
|
-
super(0, 0, video.renderer.width, DEBUG_HEIGHT );
|
|
32
|
-
|
|
33
|
-
// enable collision and event detection
|
|
34
|
-
this.isKinematic = false;
|
|
35
|
-
|
|
36
|
-
// to hold the debug CheckBox
|
|
37
|
-
// zone and status
|
|
38
|
-
this.checkbox = {};
|
|
39
|
-
|
|
40
|
-
// Useful counters
|
|
41
|
-
this.counters = new Counters([
|
|
42
|
-
"shapes",
|
|
43
|
-
"sprites",
|
|
44
|
-
"velocity",
|
|
45
|
-
"bounds",
|
|
46
|
-
"children"
|
|
47
|
-
]);
|
|
48
|
-
|
|
49
|
-
// for z ordering
|
|
50
|
-
// make it ridiculously high
|
|
51
|
-
this.pos.z = Infinity;
|
|
52
|
-
|
|
53
|
-
// visibility flag
|
|
54
|
-
this.visible = false;
|
|
55
|
-
|
|
56
|
-
// frame update time in ms
|
|
57
|
-
this.frameUpdateTime = 0;
|
|
58
|
-
|
|
59
|
-
// frame draw time in ms
|
|
60
|
-
this.frameDrawTime = 0;
|
|
61
|
-
|
|
62
|
-
// set the object GUID value
|
|
63
|
-
this.GUID = "debug-" + utils.createGUID();
|
|
64
|
-
|
|
65
|
-
// set the object entity name
|
|
66
|
-
this.name = "debugPanel";
|
|
67
|
-
|
|
68
|
-
// the debug panel version
|
|
69
|
-
this.version = "__VERSION__";
|
|
70
|
-
|
|
71
|
-
// persistent
|
|
72
|
-
this.isPersistent = true;
|
|
73
|
-
|
|
74
|
-
// a floating object
|
|
75
|
-
this.floating = true;
|
|
76
|
-
|
|
77
|
-
// renderable
|
|
78
|
-
this.isRenderable = true;
|
|
79
|
-
|
|
80
|
-
// always update, even when not visible
|
|
81
|
-
this.alwaysUpdate = true;
|
|
82
|
-
|
|
83
|
-
// WebGL/Canvas compatibility
|
|
84
|
-
this.canvas = video.createCanvas(this.width, this.height, true);
|
|
85
|
-
|
|
86
|
-
// create a default font, with fixed char width
|
|
87
|
-
this.font_size = 10;
|
|
88
|
-
this.mod = 2;
|
|
89
|
-
if (this.width < 500) {
|
|
90
|
-
this.font_size = 7;
|
|
91
|
-
this.mod = this.mod * (this.font_size / 10);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
// create the bitmapfont
|
|
95
|
-
var fontImage = new Image();
|
|
96
|
-
fontImage.src = fontImageSource;
|
|
97
|
-
|
|
98
|
-
this.font = new BitmapText(0, 0, {
|
|
99
|
-
fontData: fontDataSource,
|
|
100
|
-
font: fontImage
|
|
101
|
-
});
|
|
102
|
-
this.font.name = "debugPanelFont";
|
|
103
|
-
|
|
104
|
-
// clickable areas
|
|
105
|
-
var hash = utils.getUriFragment();
|
|
106
|
-
var size = 10 * this.mod;
|
|
107
|
-
this.checkbox.renderHitBox = new Rect(250, 2, size, size);
|
|
108
|
-
this.checkbox.renderHitBox.selected = hash.hitbox || false;
|
|
109
|
-
this.checkbox.renderVelocity = new Rect(250, 17, size, size);
|
|
110
|
-
this.checkbox.renderVelocity.selected = hash.velocity || false;
|
|
111
|
-
this.checkbox.renderQuadTree = new Rect(410, 2, size, size);
|
|
112
|
-
this.checkbox.renderVelocity.selected = hash.quadtree || false;
|
|
113
|
-
|
|
114
|
-
// add some keyboard shortcuts
|
|
115
|
-
this.debugToggle = debugToggle;
|
|
116
|
-
|
|
117
|
-
// some internal string/length
|
|
118
|
-
this.help_str = "["+String.fromCharCode(32 + this.debugToggle)+"]show/hide";
|
|
119
|
-
this.help_str_len = this.font.measureText(this.help_str).width;
|
|
120
|
-
this.fps_str_len = this.font.measureText("00/00 fps").width;
|
|
121
|
-
this.memoryPositionX = 325 * this.mod;
|
|
122
|
-
|
|
123
|
-
// resize the panel if the browser is resized
|
|
124
|
-
event.on(event.CANVAS_ONRESIZE, (w) => {
|
|
125
|
-
this.resize(w, DEBUG_HEIGHT);
|
|
126
|
-
});
|
|
127
|
-
|
|
128
|
-
// few variables to keep track of time
|
|
129
|
-
this.frameUpdateStartTime = 0;
|
|
130
|
-
this.frameDrawStartTime = 0;
|
|
131
|
-
this.frameUpdateTime = 0;
|
|
132
|
-
this.frameDrawTime = 0;
|
|
133
|
-
|
|
134
|
-
event.on(event.GAME_BEFORE_UPDATE, (time) => {
|
|
135
|
-
this.frameUpdateStartTime = time;
|
|
136
|
-
});
|
|
137
|
-
event.on(event.GAME_AFTER_UPDATE, (time) => {
|
|
138
|
-
this.frameUpdateTime = time - this.frameUpdateStartTime;
|
|
139
|
-
});
|
|
140
|
-
|
|
141
|
-
event.on(event.GAME_BEFORE_DRAW, (time) => {
|
|
142
|
-
this.frameDrawStartTime = time;
|
|
143
|
-
this.counters.reset();
|
|
144
|
-
});
|
|
145
|
-
event.on(event.GAME_AFTER_DRAW, (time) => {
|
|
146
|
-
this.frameDrawTime = time - this.frameDrawStartTime;
|
|
147
|
-
});
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
this.anchorPoint.set(0, 0);
|
|
151
|
-
|
|
152
|
-
//patch patch patch !
|
|
153
|
-
this.patchSystemFn();
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* patch system fn to draw debug information
|
|
158
|
-
*/
|
|
159
|
-
patchSystemFn() {
|
|
160
|
-
var _this = this;
|
|
161
|
-
|
|
162
|
-
// patch renderable.js
|
|
163
|
-
plugin.patch(Renderable, "postDraw", function (renderer) {
|
|
164
|
-
|
|
165
|
-
// call the original Renderable.postDraw function
|
|
166
|
-
this._patched.apply(this, arguments);
|
|
167
|
-
|
|
168
|
-
// increment the sprites counter
|
|
169
|
-
if (typeof this.image !== "undefined") {
|
|
170
|
-
_this.counters.inc("sprites");
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
// increment the bound counter
|
|
174
|
-
_this.counters.inc("bounds");
|
|
175
|
-
|
|
176
|
-
// increment the children counter
|
|
177
|
-
if (this instanceof Container) {
|
|
178
|
-
_this.counters.inc("children");
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
// don't do anything else if the panel is hidden
|
|
182
|
-
if (_this.visible) {
|
|
183
|
-
|
|
184
|
-
// omit following object as they are patched later through different methods
|
|
185
|
-
// XXX TODO: make this patched method more generic at Renderable level
|
|
186
|
-
if (!(this instanceof Entity) && !(this.ancestor instanceof Entity) && !(this instanceof Text) &&
|
|
187
|
-
!(this instanceof BitmapText) && !(this instanceof Camera2d)
|
|
188
|
-
&& !(this instanceof ImageLayer)) {
|
|
189
|
-
|
|
190
|
-
// draw the renderable bounding box
|
|
191
|
-
if (_this.checkbox.renderHitBox.selected && this.getBounds().isFinite()) {
|
|
192
|
-
|
|
193
|
-
if (typeof this.ancestor !== "undefined") {
|
|
194
|
-
renderer.save();
|
|
195
|
-
if (!this.floating) {
|
|
196
|
-
var absolutePosition = this.ancestor.getAbsolutePosition();
|
|
197
|
-
renderer.translate(
|
|
198
|
-
-absolutePosition.x,
|
|
199
|
-
-absolutePosition.y
|
|
200
|
-
);
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
var bounds = this.getBounds();
|
|
205
|
-
|
|
206
|
-
renderer.setColor("green");
|
|
207
|
-
renderer.stroke(bounds);
|
|
208
|
-
|
|
209
|
-
// the sprite mask if defined
|
|
210
|
-
if (typeof this.mask !== "undefined") {
|
|
211
|
-
renderer.setColor("orange");
|
|
212
|
-
renderer.stroke(this.mask);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
if (typeof this.body !== "undefined") {
|
|
216
|
-
renderer.translate(bounds.x, bounds.y);
|
|
217
|
-
|
|
218
|
-
renderer.setColor("orange");
|
|
219
|
-
renderer.stroke(this.body.getBounds());
|
|
220
|
-
|
|
221
|
-
// draw all defined shapes
|
|
222
|
-
renderer.setColor("red");
|
|
223
|
-
for (var i = this.body.shapes.length, shape; i--, (shape = this.body.shapes[i]);) {
|
|
224
|
-
renderer.stroke(shape);
|
|
225
|
-
_this.counters.inc("shapes");
|
|
226
|
-
}
|
|
227
|
-
renderer.translate(-bounds.x, -bounds.y);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
if (typeof this.ancestor !== "undefined") {
|
|
231
|
-
renderer.restore();
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
});
|
|
237
|
-
|
|
238
|
-
plugin.patch(BitmapText, "draw", function (renderer) {
|
|
239
|
-
// call the original Sprite.draw function
|
|
240
|
-
this._patched.apply(this, arguments);
|
|
241
|
-
|
|
242
|
-
// draw the font rectangle
|
|
243
|
-
if (_this.visible && _this.checkbox.renderHitBox.selected && this.name !== "debugPanelFont") {
|
|
244
|
-
var bounds = this.getBounds();
|
|
245
|
-
|
|
246
|
-
if (typeof this.ancestor !== "undefined") {
|
|
247
|
-
var ax = this.anchorPoint.x * bounds.width,
|
|
248
|
-
ay = this.anchorPoint.y * bounds.height;
|
|
249
|
-
// translate back as the bounds position
|
|
250
|
-
// is already adjusted to the anchor Point
|
|
251
|
-
renderer.save();
|
|
252
|
-
renderer.translate(ax, ay);
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
renderer.setColor("green");
|
|
256
|
-
renderer.stroke(bounds);
|
|
257
|
-
|
|
258
|
-
if (typeof this.ancestor !== "undefined") {
|
|
259
|
-
renderer.restore();
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
});
|
|
263
|
-
|
|
264
|
-
// patch text.js
|
|
265
|
-
plugin.patch(Text, "draw", function (renderer) {
|
|
266
|
-
// call the original Text.draw function
|
|
267
|
-
this._patched.apply(this, arguments);
|
|
268
|
-
|
|
269
|
-
if (_this.visible && _this.checkbox.renderHitBox.selected) {
|
|
270
|
-
var bounds = this.getBounds();
|
|
271
|
-
|
|
272
|
-
if (typeof this.ancestor !== "undefined") {
|
|
273
|
-
renderer.save();
|
|
274
|
-
|
|
275
|
-
// if this object of this renderable parent is not the root container
|
|
276
|
-
if (!this.root && !this.ancestor.root && this.ancestor.isFloating) {
|
|
277
|
-
var absolutePosition = this.ancestor.getAbsolutePosition();
|
|
278
|
-
renderer.translate(
|
|
279
|
-
-absolutePosition.x,
|
|
280
|
-
-absolutePosition.y
|
|
281
|
-
);
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
renderer.setColor("green");
|
|
286
|
-
renderer.stroke(bounds);
|
|
287
|
-
|
|
288
|
-
if (typeof this.ancestor !== "undefined") {
|
|
289
|
-
renderer.restore();
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
});
|
|
293
|
-
|
|
294
|
-
// patch entities.js
|
|
295
|
-
plugin.patch(Entity, "postDraw", function (renderer) {
|
|
296
|
-
// don't do anything else if the panel is hidden
|
|
297
|
-
if (_this.visible) {
|
|
298
|
-
|
|
299
|
-
// check if debug mode is enabled
|
|
300
|
-
if (_this.checkbox.renderHitBox.selected) {
|
|
301
|
-
|
|
302
|
-
renderer.save();
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
if (typeof this.ancestor !== "undefined") {
|
|
306
|
-
// if this object of this renderable parent is not the root container
|
|
307
|
-
if (!this.floating) {
|
|
308
|
-
var absolutePosition = this.ancestor.getAbsolutePosition();
|
|
309
|
-
renderer.translate(
|
|
310
|
-
-absolutePosition.x,
|
|
311
|
-
-absolutePosition.y
|
|
312
|
-
);
|
|
313
|
-
}
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
if (this.renderable instanceof Renderable) {
|
|
317
|
-
var rbounds = this.renderable.getBounds();
|
|
318
|
-
var rx = -rbounds.x - this.anchorPoint.x * rbounds.width,
|
|
319
|
-
ry = -rbounds.y - this.anchorPoint.y * rbounds.height;
|
|
320
|
-
|
|
321
|
-
renderer.setColor("green");
|
|
322
|
-
renderer.translate(rx, ry);
|
|
323
|
-
renderer.stroke(rbounds);
|
|
324
|
-
renderer.translate(-rx, -ry);
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
renderer.translate(
|
|
328
|
-
this.body.getBounds().x,
|
|
329
|
-
this.body.getBounds().y
|
|
330
|
-
);
|
|
331
|
-
|
|
332
|
-
renderer.translate(
|
|
333
|
-
-this.anchorPoint.x * this.body.getBounds().width,
|
|
334
|
-
-this.anchorPoint.y * this.body.getBounds().height
|
|
335
|
-
);
|
|
336
|
-
|
|
337
|
-
// draw the bounding rect shape
|
|
338
|
-
renderer.setColor("orange");
|
|
339
|
-
renderer.stroke(this.body.getBounds());
|
|
340
|
-
|
|
341
|
-
// draw all defined shapes
|
|
342
|
-
renderer.setColor("red");
|
|
343
|
-
for (var i = this.body.shapes.length, shape; i--, (shape = this.body.shapes[i]);) {
|
|
344
|
-
renderer.stroke(shape);
|
|
345
|
-
_this.counters.inc("shapes");
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
renderer.restore();
|
|
349
|
-
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
if (_this.checkbox.renderVelocity.selected && (this.body.vel.x || this.body.vel.y)) {
|
|
353
|
-
var bounds = this.body.getBounds();
|
|
354
|
-
var hWidth = bounds.width / 2;
|
|
355
|
-
var hHeight = bounds.height / 2;
|
|
356
|
-
|
|
357
|
-
renderer.save();
|
|
358
|
-
renderer.setLineWidth(1);
|
|
359
|
-
|
|
360
|
-
renderer.setColor("blue");
|
|
361
|
-
renderer.translate(0, -hHeight);
|
|
362
|
-
renderer.strokeLine(0, 0, ~~(this.body.vel.x * hWidth), ~~(this.body.vel.y * hHeight));
|
|
363
|
-
_this.counters.inc("velocity");
|
|
364
|
-
|
|
365
|
-
renderer.restore();
|
|
366
|
-
}
|
|
367
|
-
}
|
|
368
|
-
// call the original Entity.postDraw function
|
|
369
|
-
this._patched.apply(this, arguments);
|
|
370
|
-
});
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
/**
|
|
374
|
-
* show the debug panel
|
|
375
|
-
*/
|
|
376
|
-
show() {
|
|
377
|
-
if (!this.visible) {
|
|
378
|
-
// add the debug panel to the game world
|
|
379
|
-
game.world.addChild(this, Infinity);
|
|
380
|
-
// register a mouse event for the checkboxes
|
|
381
|
-
input.registerPointerEvent("pointerdown", this, this.onClick.bind(this));
|
|
382
|
-
// mark it as visible
|
|
383
|
-
this.visible = true;
|
|
384
|
-
// force repaint
|
|
385
|
-
game.repaint();
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
/**
|
|
390
|
-
* hide the debug panel
|
|
391
|
-
*/
|
|
392
|
-
hide() {
|
|
393
|
-
if (this.visible) {
|
|
394
|
-
// release the mouse event for the checkboxes
|
|
395
|
-
input.releasePointerEvent("pointerdown", this);
|
|
396
|
-
// remove the debug panel from the game world
|
|
397
|
-
game.world.removeChild(this, true);
|
|
398
|
-
// mark it as invisible
|
|
399
|
-
this.visible = false;
|
|
400
|
-
// force repaint
|
|
401
|
-
game.repaint();
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
update() {
|
|
406
|
-
// update the FPS counter
|
|
407
|
-
timer.countFPS();
|
|
408
|
-
|
|
409
|
-
return this.visible;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
onClick(e) {
|
|
413
|
-
// check the clickable areas
|
|
414
|
-
if (this.checkbox.renderHitBox.contains(e.gameX, e.gameY)) {
|
|
415
|
-
this.checkbox.renderHitBox.selected = !this.checkbox.renderHitBox.selected;
|
|
416
|
-
} else if (this.checkbox.renderVelocity.contains(e.gameX, e.gameY)) {
|
|
417
|
-
// does nothing for now, since velocity is
|
|
418
|
-
// rendered together with hitboxes (is a global debug flag required?)
|
|
419
|
-
this.checkbox.renderVelocity.selected = !this.checkbox.renderVelocity.selected;
|
|
420
|
-
} else if (this.checkbox.renderQuadTree.contains(e.gameX, e.gameY)) {
|
|
421
|
-
this.checkbox.renderQuadTree.selected = !this.checkbox.renderQuadTree.selected;
|
|
422
|
-
}
|
|
423
|
-
// force repaint
|
|
424
|
-
game.repaint();
|
|
425
|
-
}
|
|
426
|
-
|
|
427
|
-
drawQuadTreeNode(renderer, node) {
|
|
428
|
-
var bounds = node.bounds;
|
|
429
|
-
|
|
430
|
-
// draw the current bounds
|
|
431
|
-
if (node.nodes.length === 0) {
|
|
432
|
-
// cap the alpha value to 0.4 maximum
|
|
433
|
-
var _alpha = (node.objects.length * 0.4) / collision.maxChildren;
|
|
434
|
-
if (_alpha > 0.0) {
|
|
435
|
-
renderer.save();
|
|
436
|
-
renderer.setColor("rgba(255,0,0," + _alpha + ")");
|
|
437
|
-
renderer.fillRect(bounds.left, bounds.top, bounds.width, bounds.height);
|
|
438
|
-
renderer.restore();
|
|
439
|
-
}
|
|
440
|
-
} else {
|
|
441
|
-
//has subnodes? drawQuadtree them!
|
|
442
|
-
for (var i = 0; i < node.nodes.length; i++) {
|
|
443
|
-
this.drawQuadTreeNode(renderer, node.nodes[i]);
|
|
444
|
-
}
|
|
445
|
-
}
|
|
446
|
-
}
|
|
447
|
-
|
|
448
|
-
drawQuadTree(renderer) {
|
|
449
|
-
var x = game.viewport.pos.x;
|
|
450
|
-
var y = game.viewport.pos.y;
|
|
451
|
-
|
|
452
|
-
renderer.translate(-x, -y);
|
|
453
|
-
|
|
454
|
-
this.drawQuadTreeNode(renderer, game.world.broadphase);
|
|
455
|
-
|
|
456
|
-
renderer.translate(x, y);
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
/** @private */
|
|
460
|
-
drawMemoryGraph(renderer, endX) {
|
|
461
|
-
if (window && window.performance && window.performance.memory) {
|
|
462
|
-
var usedHeap = Math.round(window.performance.memory.usedJSHeapSize / 1048576, 2);
|
|
463
|
-
var totalHeap = Math.round(window.performance.memory.totalJSHeapSize / 1048576, 2);
|
|
464
|
-
var maxLen = ~~(endX - this.memoryPositionX - 5);
|
|
465
|
-
var len = maxLen * (usedHeap / totalHeap);
|
|
466
|
-
|
|
467
|
-
renderer.setColor("#0065AD");
|
|
468
|
-
renderer.fillRect(this.memoryPositionX, 0, maxLen, 20);
|
|
469
|
-
renderer.setColor("#3AA4F0");
|
|
470
|
-
renderer.fillRect(this.memoryPositionX + 1, 1, len - 1, 17);
|
|
471
|
-
|
|
472
|
-
this.font.draw(renderer, "Heap : " + usedHeap + "/" + totalHeap + " MB", this.memoryPositionX + 5, 2 * this.mod);
|
|
473
|
-
} else {
|
|
474
|
-
// Heap Memory information not available
|
|
475
|
-
this.font.draw(renderer, "Heap : ??/?? MB", this.memoryPositionX, 2 * this.mod);
|
|
476
|
-
}
|
|
477
|
-
this.font.draw(renderer, "Pool : " + pool.getInstanceCount(), this.memoryPositionX, 10 * this.mod);
|
|
478
|
-
}
|
|
479
|
-
|
|
480
|
-
draw(renderer) {
|
|
481
|
-
renderer.save();
|
|
482
|
-
|
|
483
|
-
// draw the QuadTree (before the panel)
|
|
484
|
-
if (this.checkbox.renderQuadTree.selected === true) {
|
|
485
|
-
this.drawQuadTree(renderer);
|
|
486
|
-
}
|
|
487
|
-
|
|
488
|
-
// draw the panel
|
|
489
|
-
renderer.setGlobalAlpha(0.5);
|
|
490
|
-
renderer.setColor("black");
|
|
491
|
-
renderer.fillRect(
|
|
492
|
-
this.left, this.top,
|
|
493
|
-
this.width, this.height
|
|
494
|
-
);
|
|
495
|
-
renderer.setGlobalAlpha(1.0);
|
|
496
|
-
renderer.setColor("white");
|
|
497
|
-
|
|
498
|
-
this.font.textAlign = "left";
|
|
499
|
-
|
|
500
|
-
this.font.draw(renderer, "#objects : " + game.world.children.length, 5 * this.mod, 2 * this.mod);
|
|
501
|
-
this.font.draw(renderer, "#draws : " + game.world.drawCount, 5 * this.mod, 10 * this.mod);
|
|
502
|
-
|
|
503
|
-
// debug checkboxes
|
|
504
|
-
this.font.draw(renderer, "?hitbox [" + (this.checkbox.renderHitBox.selected ? "x" : " ") + "]", 75 * this.mod, 2 * this.mod);
|
|
505
|
-
this.font.draw(renderer, "?velocity [" + (this.checkbox.renderVelocity.selected ? "x" : " ") + "]", 75 * this.mod, 10 * this.mod);
|
|
506
|
-
|
|
507
|
-
this.font.draw(renderer, "?QuadTree [" + (this.checkbox.renderQuadTree.selected ? "x" : " ") + "]", 150 * this.mod, 2 * this.mod);
|
|
508
|
-
|
|
509
|
-
// draw the update duration
|
|
510
|
-
this.font.draw(renderer, "Update : " + this.frameUpdateTime.toFixed(2) + " ms", 225 * this.mod, 2 * this.mod);
|
|
511
|
-
// draw the draw duration
|
|
512
|
-
this.font.draw(renderer, "Draw : " + this.frameDrawTime.toFixed(2) + " ms", 225 * this.mod, 10 * this.mod);
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
// Draw color code hints (not supported with bitmapfont)
|
|
516
|
-
//this.font.fillStyle.copy("red");
|
|
517
|
-
this.font.draw(renderer, "Shapes : " + this.counters.get("shapes"), 5 * this.mod, 17 * this.mod);
|
|
518
|
-
|
|
519
|
-
//this.font.fillStyle.copy("green");
|
|
520
|
-
this.font.draw(renderer, "Sprites : " + this.counters.get("sprites"), 75 * this.mod, 17 * this.mod);
|
|
521
|
-
|
|
522
|
-
//this.font.fillStyle.copy("blue");
|
|
523
|
-
this.font.draw(renderer, "Velocity : " + this.counters.get("velocity"), 150 * this.mod, 17 * this.mod);
|
|
524
|
-
|
|
525
|
-
//this.font.fillStyle.copy("orange");
|
|
526
|
-
this.font.draw(renderer, "Bounds : " + this.counters.get("bounds"), 225 * this.mod, 17 * this.mod);
|
|
527
|
-
|
|
528
|
-
//this.font.fillStyle.copy("purple");
|
|
529
|
-
this.font.draw(renderer, "Children : " + this.counters.get("children"), 325 * this.mod, 17 * this.mod);
|
|
530
|
-
|
|
531
|
-
// Reset font style
|
|
532
|
-
//this.font.setFont("courier", this.font_size, "white");
|
|
533
|
-
|
|
534
|
-
// draw the memory heap usage
|
|
535
|
-
var endX = this.width - 5;
|
|
536
|
-
this.drawMemoryGraph(renderer, endX - this.help_str_len);
|
|
537
|
-
|
|
538
|
-
this.font.textAlign = "right";
|
|
539
|
-
|
|
540
|
-
// some help string
|
|
541
|
-
this.font.draw(renderer, this.help_str, endX, 17 * this.mod);
|
|
542
|
-
|
|
543
|
-
//fps counter
|
|
544
|
-
var fps_str = timer.fps + "/" + timer.maxfps + " fps";
|
|
545
|
-
this.font.draw(renderer, fps_str, endX, 2 * this.mod);
|
|
546
|
-
|
|
547
|
-
renderer.restore();
|
|
548
|
-
}
|
|
549
|
-
|
|
550
|
-
onDestroyEvent() {
|
|
551
|
-
// hide the panel
|
|
552
|
-
this.hide();
|
|
553
|
-
}
|
|
554
|
-
}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
info face=PressStart2P size=10 bold=0 italic=0 charset= unicode= stretchH=100 smooth=1 aa=1 padding=1,1,1,1 spacing=0,0 outline=0
|
|
2
|
-
common lineHeight=10 base=10 scaleW=128 scaleH=128 pages=1 packed=0
|
|
3
|
-
page id=0 file="PressStart2P.png"
|
|
4
|
-
chars count=95
|
|
5
|
-
char id=32 x=1 y=1 width=0 height=0 xoffset=0 yoffset=10 xadvance=10 page=0 chnl=15
|
|
6
|
-
char id=33 x=1 y=2 width=5 height=10 xoffset=3 yoffset=0 xadvance=10 page=0 chnl=15
|
|
7
|
-
char id=34 x=1 y=13 width=8 height=5 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
8
|
-
char id=35 x=7 y=1 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
9
|
-
char id=36 x=1 y=19 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
10
|
-
char id=37 x=1 y=30 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
11
|
-
char id=38 x=1 y=41 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
12
|
-
char id=39 x=10 y=12 width=4 height=5 xoffset=3 yoffset=0 xadvance=10 page=0 chnl=15
|
|
13
|
-
char id=40 x=1 y=52 width=6 height=10 xoffset=3 yoffset=0 xadvance=10 page=0 chnl=15
|
|
14
|
-
char id=41 x=1 y=63 width=6 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
15
|
-
char id=42 x=1 y=74 width=10 height=8 xoffset=0 yoffset=1 xadvance=10 page=0 chnl=15
|
|
16
|
-
char id=43 x=8 y=52 width=9 height=8 xoffset=1 yoffset=1 xadvance=10 page=0 chnl=15
|
|
17
|
-
char id=44 x=8 y=61 width=5 height=5 xoffset=1 yoffset=6 xadvance=10 page=0 chnl=15
|
|
18
|
-
char id=45 x=8 y=67 width=9 height=2 xoffset=1 yoffset=4 xadvance=10 page=0 chnl=15
|
|
19
|
-
char id=46 x=14 y=61 width=4 height=4 xoffset=3 yoffset=6 xadvance=10 page=0 chnl=15
|
|
20
|
-
char id=47 x=12 y=18 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
21
|
-
char id=48 x=18 y=1 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
22
|
-
char id=49 x=12 y=29 width=9 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
23
|
-
char id=50 x=12 y=40 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
24
|
-
char id=51 x=22 y=29 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
25
|
-
char id=52 x=23 y=12 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
26
|
-
char id=53 x=29 y=1 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
27
|
-
char id=54 x=1 y=83 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
28
|
-
char id=55 x=1 y=94 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
29
|
-
char id=56 x=1 y=105 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
30
|
-
char id=57 x=1 y=116 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
31
|
-
char id=58 x=18 y=51 width=4 height=8 xoffset=3 yoffset=1 xadvance=10 page=0 chnl=15
|
|
32
|
-
char id=59 x=12 y=70 width=5 height=9 xoffset=1 yoffset=1 xadvance=10 page=0 chnl=15
|
|
33
|
-
char id=60 x=12 y=80 width=8 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
34
|
-
char id=61 x=23 y=23 width=10 height=5 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
35
|
-
char id=62 x=18 y=66 width=8 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
36
|
-
char id=63 x=23 y=40 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
37
|
-
char id=64 x=33 y=29 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
38
|
-
char id=65 x=23 y=51 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
39
|
-
char id=66 x=34 y=12 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
40
|
-
char id=67 x=40 y=1 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
41
|
-
char id=68 x=12 y=91 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
42
|
-
char id=69 x=21 y=77 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
43
|
-
char id=70 x=27 y=62 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
44
|
-
char id=71 x=34 y=40 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
45
|
-
char id=72 x=34 y=51 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
46
|
-
char id=73 x=44 y=23 width=9 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
47
|
-
char id=74 x=45 y=12 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
48
|
-
char id=75 x=51 y=1 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
49
|
-
char id=76 x=12 y=102 width=9 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
50
|
-
char id=77 x=12 y=113 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
51
|
-
char id=78 x=22 y=102 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
52
|
-
char id=79 x=23 y=88 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
53
|
-
char id=80 x=32 y=73 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
54
|
-
char id=81 x=38 y=62 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
55
|
-
char id=82 x=23 y=113 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
56
|
-
char id=83 x=33 y=99 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
57
|
-
char id=84 x=34 y=84 width=9 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
58
|
-
char id=85 x=43 y=73 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
59
|
-
char id=86 x=34 y=110 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
60
|
-
char id=87 x=44 y=84 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
61
|
-
char id=88 x=44 y=95 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
62
|
-
char id=89 x=45 y=106 width=9 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
63
|
-
char id=90 x=45 y=117 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
64
|
-
char id=91 x=45 y=34 width=6 height=10 xoffset=3 yoffset=0 xadvance=10 page=0 chnl=15
|
|
65
|
-
char id=92 x=45 y=45 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
66
|
-
char id=93 x=52 y=34 width=6 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
67
|
-
char id=94 x=34 y=23 width=8 height=4 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
68
|
-
char id=95 x=34 y=121 width=10 height=2 xoffset=0 yoffset=9 xadvance=10 page=0 chnl=15
|
|
69
|
-
char id=96 x=15 y=12 width=4 height=4 xoffset=4 yoffset=0 xadvance=10 page=0 chnl=15
|
|
70
|
-
char id=97 x=54 y=23 width=10 height=7 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
71
|
-
char id=98 x=56 y=12 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
72
|
-
char id=99 x=62 y=1 width=10 height=7 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
73
|
-
char id=100 x=49 y=56 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
74
|
-
char id=101 x=56 y=45 width=10 height=8 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
75
|
-
char id=102 x=59 y=31 width=9 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
76
|
-
char id=103 x=54 y=67 width=10 height=9 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
77
|
-
char id=104 x=60 y=54 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
78
|
-
char id=105 x=67 y=42 width=9 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
79
|
-
char id=106 x=67 y=9 width=8 height=11 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
80
|
-
char id=107 x=69 y=21 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15
|
|
81
|
-
char id=108 x=76 y=1 width=9 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
82
|
-
char id=109 x=76 y=12 width=10 height=8 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
83
|
-
char id=110 x=69 y=32 width=10 height=8 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
84
|
-
char id=111 x=86 y=1 width=10 height=8 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
85
|
-
char id=112 x=97 y=1 width=10 height=9 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
86
|
-
char id=113 x=108 y=1 width=10 height=9 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
87
|
-
char id=114 x=87 y=10 width=9 height=8 xoffset=1 yoffset=3 xadvance=10 page=0 chnl=15
|
|
88
|
-
char id=115 x=97 y=11 width=10 height=7 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
89
|
-
char id=116 x=108 y=11 width=9 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
90
|
-
char id=117 x=87 y=19 width=10 height=7 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
91
|
-
char id=118 x=98 y=19 width=9 height=8 xoffset=1 yoffset=3 xadvance=10 page=0 chnl=15
|
|
92
|
-
char id=119 x=80 y=27 width=10 height=7 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
93
|
-
char id=120 x=108 y=22 width=10 height=8 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
94
|
-
char id=121 x=91 y=28 width=10 height=9 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
95
|
-
char id=122 x=80 y=35 width=10 height=7 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
96
|
-
char id=123 x=118 y=11 width=6 height=10 xoffset=3 yoffset=0 xadvance=10 page=0 chnl=15
|
|
97
|
-
char id=124 x=102 y=28 width=4 height=10 xoffset=4 yoffset=0 xadvance=10 page=0 chnl=15
|
|
98
|
-
char id=125 x=119 y=22 width=6 height=10 xoffset=1 yoffset=0 xadvance=10 page=0 chnl=15
|
|
99
|
-
char id=126 x=91 y=38 width=10 height=5 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|
|
100
|
-
char id=32 x=0 y=0 width=0 height=0 xoffset=0 yoffset=3 xadvance=10 page=0 chnl=15
|