@basementuniverse/debug

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

Other components

• Camera
• Content Manager
• Debug
• Input Manager
• Scene Manager