Game Component: Debug
A component for rendering debug output on a canvas.
How to use
Initialise debug before use:
import Debug from '@basementuniverse/debug';
Debug.initialise();Render the debug output:
class Game {
// ...
public draw(context: CanvasRenderingContext2D) {
// Draw everything else...
Debug.draw(context);
}
}Show a value in a corner of the screen:
Debug.value('FPS', game.fps);Show a marker somewhere on the screen:
Debug.marker('player', player.name, player.position);Options
const options = { ... };
Debug.initialise(options);| Option | Type | Default | Description |
|---|---|---|---|
margin |
number |
10 |
Edge of screen margin |
padding |
number |
4 |
Padding between debug text and background |
font |
string |
10pt Lucida Console, monospace |
The font to use |
lineHeight |
number |
12 |
The height of a line of text |
foregroundColour |
string |
#fff |
The colour of the text |
backgroundColour |
string |
#333 |
The colour of the background |
defaultValue |
DebugValue |
(see below) | Default options for values |
defaultMarker |
DebugMarker |
(see below) | Default options for markers |
Value options
const options = { ... };
Debug.value('FPS', game.fps, options);| Option | Type | Default | Description |
|---|---|---|---|
align |
`'left' | 'right'` | 'left' |
showLabel |
boolean |
true |
Show the label |
padding |
number |
4 |
Padding between debug text and background |
font |
string |
10pt Lucida Console, monospace |
The font to use |
foregroundColour |
string |
#fff |
The colour of the text |
backgroundColour |
string |
#333 |
The colour of the background |
Marker options
const options = { ... };
Debug.marker('player', player.name, player.position, options);| Option | Type | Default | Description |
|---|---|---|---|
showLabel |
boolean |
true |
Show the label |
showValue |
boolean |
true |
Show the value |
showMarker |
boolean |
true |
Show a marker icon |
markerSize |
number |
6 |
The size of the marker icon in px |
markerStyle |
`'x' | '+' | '.'` |
markerColour |
string |
#ccc |
The colour of the marker icon |
space |
`'world' | 'screen'` | 'world' |
padding |
number |
4 |
Padding between debug text and background |
font |
string |
10pt Lucida Console, monospace |
The font to use |
labelOffset |
vec |
{ x: 10, y: 10 } |
The offset of the label from the marker |
foregroundColour |
string |
#fff |
The colour of the text |
backgroundColour |
string |
#333 |
The colour of the background |