Phaser.Utils.Debug - 2.2.2

new Debug(game)

A collection of methods for displaying debug information about game objects. If your game is running in WebGL then Debug will create a Sprite that is placed at the top of the Stage display list and bind a canvas texture to it, which must be uploaded every frame. Be advised: this is very expensive, especially in browsers like Firefox. So please only enable Debug in WebGL mode if you really need it (or your desktop can cope with it well) and disable it for production! If your game is using a Canvas renderer then the debug information is literally drawn on the top of the active game canvas and no Sprite is used.

Parameters

Name	Type	Description
`game`	Phaser.Game	A reference to the currently running game.

Source code: utils/Debug.js, line 18

Public Properties

bmd : Phaser.BitmapData

In WebGL mode this BitmapData contains a copy of the debug canvas.

Source code: utils/Debug.js, line 33

canvas :HTMLCanvasElement

The canvas to which Debug calls draws.

Source code: utils/Debug.js, line 38

columnWidth : number

The spacing between columns.

Source code: utils/Debug.js, line 54

context :CanvasRenderingContext2D

The 2d context of the canvas.

Source code: utils/Debug.js, line 43

currentAlpha : number

The current alpha the debug information will be rendered at.

Default Value

Source code: utils/Debug.js, line 82

currentX : number

The current X position the debug information will be rendered at.

Default Value

Source code: utils/Debug.js, line 70

currentY : number

The current Y position the debug information will be rendered at.

Default Value

Source code: utils/Debug.js, line 76

dirty : boolean

Does the canvas need re-rendering?

Source code: utils/Debug.js, line 87

font : string

The font that the debug information is rendered in.

Default Value

'14px Courier'

Source code: utils/Debug.js, line 49

game : Phaser.Game

A reference to the currently running Game.

Source code: utils/Debug.js, line 23

lineHeight : number

The line height between the debug text.

Source code: utils/Debug.js, line 59

renderShadow : boolean

Should the text be rendered with a slight shadow? Makes it easier to read on different types of background.

Source code: utils/Debug.js, line 64

sprite : Phaser.Image

If debugging in WebGL mode we need this.

Source code: utils/Debug.js, line 28

Public Methods

body(sprite, color, filled)

Render a Sprites Physics body if it has one set. Note this only works for Arcade and Ninja (AABB, circle only) Physics. To display a P2 body you should enable debug mode on the body when creating it.

Parameters

Name	Type	Argument	Default	Description
`sprite`	Phaser.Sprite			The sprite whos body will be rendered.
`color`	string	<optional>	'rgba(0,255,0,0.4)'	color of the debug info to be rendered. (format is css color string).
`filled`	boolean	<optional>	true	Render the objected as a filled (default, true) or a stroked (false)

Source code: utils/Debug.js, line 717

bodyInfo(sprite, x, y, color)

Render a Sprites Physic Body information.

Parameters

Name	Type	Argument	Default	Description
`sprite`	Phaser.Sprite			The sprite to be rendered.
`x`	number			X position of the debug info to be rendered.
`y`	number			Y position of the debug info to be rendered.
`color`	string	<optional>	'rgb(255,255,255)'	color of the debug info to be rendered. (format is css color string).

Source code: utils/Debug.js, line 751

<internal> boot()

Internal method that boots the debug displayer.

Internal:

This member is internal (protected) and may be modified or removed in the future.

Source code: utils/Debug.js, line 93

box2dBody(sprite, color)

Renders 'debug draw' data for the given Box2D body. This uses the standard debug drawing feature of Box2D, so colors will be decided by the Box2D engine.

Parameters

Name	Type	Argument	Default	Description
`sprite`	Phaser.Sprite			The sprite whos body will be rendered.
`color`	string	<optional>	'rgb(0,255,0)'	color of the debug info to be rendered. (format is css color string).

Source code: utils/Debug.js, line 798

box2dWorld()

Renders 'debug draw' data for the Box2D world if it exists. This uses the standard debug drawing feature of Box2D, so colors will be decided by the Box2D engine.

Source code: utils/Debug.js, line 780

cameraInfo(camera, x, y, color)

Render camera information including dimensions and location.

Parameters

Name	Type	Argument	Default	Description
`camera`	Phaser.Camera			The Phaser.Camera to show the debug information for.
`x`	number			X position of the debug info to be rendered.
`y`	number			Y position of the debug info to be rendered.
`color`	string	<optional>	'rgb(255,255,255)'	color of the debug info to be rendered. (format is css color string).

Source code: utils/Debug.js, line 260

geom(object, color, filled, forceType)

Renders a Phaser geometry object including Rectangle, Circle, Point or Line.

Parameters

Name	Type	Argument	Default	Description
`object`	Phaser.Rectangle \| Phaser.Circle \| Phaser.Point \| Phaser.Line			The geometry object to render.
`color`	string	<optional>		Color of the debug info to be rendered (format is css color string).
`filled`	boolean	<optional>	true	Render the objected as a filled (default, true) or a stroked (false)
`forceType`	number	<optional>	0	Force rendering of a specific type. If 0 no type will be forced, otherwise 1 = Rectangle, 2 = Circle, 3 = Point and 4 = Line.

Source code: utils/Debug.js, line 550

geom(object, color, filled)

Renders a Rectangle.

Parameters

Name	Type	Argument	Default	Description
`object`	Phaser.Rectangle \| object			The geometry object to render.
`color`	string	<optional>		Color of the debug info to be rendered (format is css color string).
`filled`	boolean	<optional>	true	Render the objected as a filled (default, true) or a stroked (false)

Source code: utils/Debug.js, line 615

inputInfo(x, y, color)

Render debug information about the Input object.

Parameters

Name	Type	Argument	Default	Description
`x`	number			X position of the debug info to be rendered.
`y`	number			Y position of the debug info to be rendered.
`color`	string	<optional>	'rgb(255,255,255)'	color of the debug info to be rendered. (format is css color string).

Source code: utils/Debug.js, line 408

key(key, x, y, color)

Renders Phaser.Key object information.

Parameters

Name	Type	Argument	Default	Description
`key`	Phaser.Key			The Key to render the information for.
`x`	number			X position of the debug info to be rendered.
`y`	number			Y position of the debug info to be rendered.
`color`	string	<optional>	'rgb(255,255,255)'	color of the debug info to be rendered. (format is css color string).

Source code: utils/Debug.js, line 387

<internal> line()

Internal method that outputs a single line of text split over as many columns as needed, one per parameter.

Internal:

This member is internal (protected) and may be modified or removed in the future.

Source code: utils/Debug.js, line 201

lineInfo(line, x, y, color)

Renders Line information in the given color.

Parameters

Name	Type	Argument	Default	Description
`line`	Phaser.Line			The Line to display the data for.
`x`	number			X position of the debug info to be rendered.
`y`	number			Y position of the debug info to be rendered.
`color`	string	<optional>	'rgb(255,255,255)'	color of the debug info to be rendered. (format is css color string).

Source code: utils/Debug.js, line 511

pixel(x, y, color, size)

Renders a single pixel at the given size.

Parameters

Name	Type	Argument	Default	Description
`x`	number			X position of the pixel to be rendered.
`y`	number			Y position of the pixel to be rendered.
`color`	string	<optional>		Color of the pixel (format is css color string).
`size`	number	<optional>	2	The 'size' to render the pixel at.

Source code: utils/Debug.js, line 530

pointer(pointer, hideIfUp, downColor, upColor, color)

Renders the Pointer.circle object onto the stage in green if down or red if up along with debug text.

Parameters

Name	Type	Argument	Default	Description
`pointer`	Phaser.Pointer			The Pointer you wish to display.
`hideIfUp`	boolean	<optional>	false	Doesn't render the circle if the pointer is up.
`downColor`	string	<optional>	'rgba(0,255,0,0.5)'	The color the circle is rendered in if down.
`upColor`	string	<optional>	'rgba(255,0,0,0.5)'	The color the circle is rendered in if up (and hideIfUp is false).
`color`	string	<optional>	'rgb(255,255,255)'	color of the debug info to be rendered. (format is css color string).

Source code: utils/Debug.js, line 306

preUpdate()

Internal method that clears the canvas (if a Sprite) ready for a new debug session.

Source code: utils/Debug.js, line 117

quadTree(quadtree, color)

Visually renders a QuadTree to the display.

Parameters

Name	Type	Description
`quadtree`	Phaser.QuadTree	The quadtree to render.
`color`	string	The color of the lines in the quadtree.

Source code: utils/Debug.js, line 677

reset()

Clears the Debug canvas.

Source code: utils/Debug.js, line 135

ropeSegments(rope, color, filled)

Renders the Rope's segments. Note: This is really expensive as it has to calculate new segments everytime you call it

Parameters

Name	Type	Argument	Default	Description
`rope`	Phaser.Rope			The rope to display the segments of.
`color`	string	<optional>		Color of the debug info to be rendered (format is css color string).
`filled`	boolean	<optional>	true	Render the rectangle as a fillRect (default, true) or a strokeRect (false)

Source code: utils/Debug.js, line 446

soundInfo(sound, x, y, color)

Render Sound information, including decoded state, duration, volume and more.

Parameters

Name	Type	Argument	Default	Description
`sound`	Phaser.Sound			The sound object to debug.
`x`	number			X position of the debug info to be rendered.
`y`	number			Y position of the debug info to be rendered.
`color`	string	<optional>	'rgb(255,255,255)'	color of the debug info to be rendered. (format is css color string).

Source code: utils/Debug.js, line 229

spriteBounds(sprite, color, filled)

Renders the Sprites bounds. Note: This is really expensive as it has to calculate the bounds every time you call it!

Parameters

Name	Type	Argument	Default	Description
`sprite`	Phaser.Sprite \| Phaser.Image			The sprite to display the bounds of.
`color`	string	<optional>		Color of the debug info to be rendered (format is css color string).
`filled`	boolean	<optional>	true	Render the rectangle as a fillRect (default, true) or a strokeRect (false)

Source code: utils/Debug.js, line 428

spriteCoords(sprite, x, y, color)

Renders the sprite coordinates in local, positional and world space.

Parameters

Name	Type	Argument	Default	Description
`sprite`	Phaser.Sprite \| Phaser.Image			The sprite to display the coordinates for.
`x`	number			X position of the debug info to be rendered.
`y`	number			Y position of the debug info to be rendered.
`color`	string	<optional>	'rgb(255,255,255)'	color of the debug info to be rendered. (format is css color string).

Source code: utils/Debug.js, line 485

spriteInfo(sprite, x, y, color)

Render debug infos (including name, bounds info, position and some other properties) about the Sprite.

Parameters

Name	Type	Argument	Default	Description
`sprite`	Phaser.Sprite			The Sprite to display the information of.
`x`	number			X position of the debug info to be rendered.
`y`	number			Y position of the debug info to be rendered.
`color`	string	<optional>	'rgb(255,255,255)'	color of the debug info to be rendered. (format is css color string).

Source code: utils/Debug.js, line 462

spriteInputInfo(sprite, x, y, color)

Render Sprite Input Debug information.

Parameters

Name	Type	Argument	Default	Description
`sprite`	Phaser.Sprite \| Phaser.Image			The sprite to display the input data for.
`x`	number			X position of the debug info to be rendered.
`y`	number			Y position of the debug info to be rendered.
`color`	string	<optional>	'rgb(255,255,255)'	color of the debug info to be rendered. (format is css color string).

Source code: utils/Debug.js, line 366

<internal> start(x, y, color, columnWidth)

Internal method that resets and starts the debug output values.

Parameters

Name	Type	Argument	Default	Description
`x`	number	<optional>	0	The X value the debug info will start from.
`y`	number	<optional>	0	The Y value the debug info will start from.
`color`	string	<optional>	'rgb(255,255,255)'	The color the debug text will drawn in.
`columnWidth`	number	<optional>	0	The spacing between columns.

Internal:

This member is internal (protected) and may be modified or removed in the future.

Source code: utils/Debug.js, line 154

<internal> stop()

Internal method that stops the debug output.

Internal:

This member is internal (protected) and may be modified or removed in the future.

Source code: utils/Debug.js, line 188

text(text, x, y, color, font)

Render a string of text.

Parameters

Name	Type	Argument	Description
`text`	string		The line of text to draw.
`x`	number		X position of the debug info to be rendered.
`y`	number		Y position of the debug info to be rendered.
`color`	string	<optional>	Color of the debug info to be rendered (format is css color string).
`font`	string	<optional>	The font of text to draw.

Source code: utils/Debug.js, line 646

timer(timer, x, y, color)

Render Timer information.

Parameters

Name	Type	Argument	Default	Description
`timer`	Phaser.Timer			The Phaser.Timer to show the debug information for.
`x`	number			X position of the debug info to be rendered.
`y`	number			Y position of the debug info to be rendered.
`color`	string	<optional>	'rgb(255,255,255)'	color of the debug info to be rendered. (format is css color string).

Source code: utils/Debug.js, line 287

Navigation

Constructor

new Debug(game)

Parameters

Public Properties

bmd : Phaser.BitmapData

canvas :HTMLCanvasElement

columnWidth : number

context :CanvasRenderingContext2D

currentAlpha : number

currentX : number

currentY : number

dirty : boolean

font : string

game : Phaser.Game

lineHeight : number

renderShadow : boolean

sprite : Phaser.Image

Public Methods

body(sprite, color, filled)

Parameters

bodyInfo(sprite, x, y, color)

Parameters

<internal> boot()

box2dBody(sprite, color)

Parameters

box2dWorld()

cameraInfo(camera, x, y, color)

Parameters

geom(object, color, filled, forceType)

Parameters

geom(object, color, filled)

Parameters

inputInfo(x, y, color)

Parameters

key(key, x, y, color)

Parameters

<internal> line()

lineInfo(line, x, y, color)

Parameters

pixel(x, y, color, size)

Parameters

pointer(pointer, hideIfUp, downColor, upColor, color)

Parameters

preUpdate()

quadTree(quadtree, color)

Parameters

reset()

ropeSegments(rope, color, filled)

Parameters

soundInfo(sound, x, y, color)

Parameters

spriteBounds(sprite, color, filled)

Parameters

spriteCoords(sprite, x, y, color)

Parameters

spriteInfo(sprite, x, y, color)

Parameters

spriteInputInfo(sprite, x, y, color)

Parameters

<internal> start(x, y, color, columnWidth)

Parameters

<internal> stop()

text(text, x, y, color, font)

Parameters

timer(timer, x, y, color)

Parameters