Phaser Class: Debug

new Debug(game)

A collection of methods for displaying debug information about game objects. Phaser.Debug requires a CANVAS game type in order to render, so if you've got your game set to use Phaser.AUTO then swap it for Phaser.CANVAS to ensure WebGL doesn't kick in, then the Debug functions will all display.

Parameters:

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

Source:

utils/Debug.js, line 15

Members

columnWidth

Properties:

Name	Type	Description
`columnWidth`	number	The spacing between columns.

Source:

utils/Debug.js, line 36

context

Properties:

Name	Type	Description
`context`	Context	The canvas context on which to render the debug information.

Source:

utils/Debug.js, line 25

currentAlpha

Properties:

Name	Type	Description
`currentAlpha`	number	The current alpha the debug information will be rendered at.

Default Value:

Source:

utils/Debug.js, line 64

currentX

Properties:

Name	Type	Description
`currentX`	Context	The current X position the debug information will be rendered at.

Default Value:

Source:

utils/Debug.js, line 52

currentY

Properties:

Name	Type	Description
`currentY`	number	The current Y position the debug information will be rendered at.

Default Value:

Source:

utils/Debug.js, line 58

font

Properties:

Name	Type	Description
`font`	string	The font that the debug information is rendered in.

Default Value:

'14px Courier'

Source:

utils/Debug.js, line 31

game

Properties:

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

Source:

utils/Debug.js, line 20

lineHeight

Properties:

Name	Type	Description
`lineHeight`	number	The line height between the debug text.

Source:

utils/Debug.js, line 41

renderShadow

Properties:

Name	Type	Description
`renderShadow`	boolean	Should the text be rendered with a slight shadow? Makes it easier to read on different types of background.

Source:

utils/Debug.js, line 46

Methods

line(text, x, y)

Internal method that outputs a single line of text.

Parameters:

Name	Type	Argument	Description
`text`	string		The line of text to draw.
`x`	number	<optional>	The X value the debug info will start from.
`y`	number	<optional>	The Y value the debug info will start from.

Source:

utils/Debug.js, line 116

renderBodyInfo(sprite, x, y, color)

Render Sprite Body Physics Data as text.

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:

utils/Debug.js, line 634

renderCameraInfo(camera, x, y, color)

Render camera information including dimensions and location.

Parameters:

Name	Type	Argument	Default	Description
`camera`	Phaser.Camera			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:

utils/Debug.js, line 214

renderCircle(circle, color)

Renders a Circle.

Parameters:

Name	Type	Argument	Description
`circle`	Phaser.Circle		The Circle to render.
`color`	string	<optional>	Color of the debug info to be rendered (format is css color string).

Source:

utils/Debug.js, line 582

renderInputInfo(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:

utils/Debug.js, line 327

renderLine(line, color)

Renders a Line object in the given color.

Parameters:

Name	Type	Argument	Default	Description
`line`	Phaser.Line			The Line to render.
`color`	string	<optional>	'rgb(255,255,255)'	color of the debug info to be rendered. (format is css color string).

Source:

utils/Debug.js, line 428

renderLineInfo(line, x, y, color)

Renders Line information in the given color.

Parameters:

Name	Type	Argument	Default	Description
`line`	Phaser.Line			The Line to render.
`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:

utils/Debug.js, line 454

renderPhysicsBody(body, color)

Parameters:

Name	Type	Argument	Default	Description
`body`	Phaser.Physics.Body			The Phaser.Physics.Body instance to render all shapes from.
`color`	string	<optional>	'rgb(255,255,255)'	The color the polygon is stroked in.

Source:

utils/Debug.js, line 665

renderPixel(x, y, color)

Renders a single pixel.

Parameters:

Name	Type	Argument	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>	Color of the debug info to be rendered (format is css color string).

Source:

utils/Debug.js, line 502

renderPoint(point, color)

Renders a Point object.

Parameters:

Name	Type	Argument	Description
`point`	Phaser.Point		The Point to render.
`color`	string	<optional>	Color of the debug info to be rendered (format is css color string).

Source:

utils/Debug.js, line 525

renderPointer(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			Description.
`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:

utils/Debug.js, line 240

renderPointInfo(sprite, x, y, color)

Renders Point coordinates in the given color.

Parameters:

Name	Type	Argument	Default	Description
`sprite`	Phaser.Point			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:

utils/Debug.js, line 479

renderRectangle(rect, color, filled)

Renders a Rectangle.

Parameters:

Name	Type	Argument	Default	Description
`rect`	Phaser.Rectangle			The Rectangle to render.
`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:

utils/Debug.js, line 547

renderShapeCircle(x, y, bodyAngle, shape, offset, angle)

Renders a p2.Circle shape. Do not call this directly - instead use Debug.renderPhysicsBody.

Parameters:

Name	Type	Description
`x`	number	The x coordinate of the Shape to translate to.
`y`	number	The y coordinate of the Shape to translate to.
`bodyAngle`	number	The angle of the Body to rotate to.
`shape`	p2.Shape	The shape to render.
`offset`	array	The shape offset vector.
`angle`	number	The shape angle.

Source:

utils/Debug.js, line 810

renderShapeConvex(x, y, bodyAngle, shape, offset, angle)

Renders a convex shape. Do not call this directly - instead use Debug.renderPhysicsBody.

Parameters:

Name	Type	Description
`x`	number	The x coordinate of the Shape to translate to.
`y`	number	The y coordinate of the Shape to translate to.
`bodyAngle`	number	The angle of the Body to rotate to.
`shape`	p2.Shape	The shape to render.
`offset`	array	The shape offset vector.
`angle`	number	The shape angle.

Source:

utils/Debug.js, line 775

renderShapeLine(x, y, bodyAngle, shape, offset, angle)

Renders a p2.Line shape. Do not call this directly - instead use Debug.renderPhysicsBody.

Parameters:

Name	Type	Description
`x`	number	The x coordinate of the Shape to translate to.
`y`	number	The y coordinate of the Shape to translate to.
`bodyAngle`	number	The angle of the Body to rotate to.
`shape`	p2.Shape	The shape to render.
`offset`	array	The shape offset vector.
`angle`	number	The shape angle.

Source:

utils/Debug.js, line 749

renderShapeRectangle(x, y, bodyAngle, shape, offset, angle)

Renders a p2.Rectangle shape. Do not call this directly - instead use Debug.renderPhysicsBody.

Parameters:

Name	Type	Description
`x`	number	The x coordinate of the Shape to translate to.
`y`	number	The y coordinate of the Shape to translate to.
`bodyAngle`	number	The angle of the Body to rotate to.
`shape`	p2.Shape	The shape to render.
`offset`	array	The shape offset vector.
`angle`	number	The shape angle.

Source:

utils/Debug.js, line 714

renderSoundInfo(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:

utils/Debug.js, line 177

renderSpriteBounds(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			Description.
`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:

utils/Debug.js, line 353

renderSpriteCoords(line, x, y, color)

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

Parameters:

Name	Type	Argument	Default	Description
`line`	Phaser.Sprite			The sprite to inspect.
`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:

utils/Debug.js, line 396

renderSpriteInfo(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			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:

utils/Debug.js, line 368

renderSpriteInputInfo(sprite, x, y, color)

Render Sprite Input Debug 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:

utils/Debug.js, line 300

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

Render 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		The font of text to draw.

Source:

utils/Debug.js, line 607

splitline(text)

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

Parameters:

Name	Type	Description
`text`	string	The text to render. You can have as many columns of text as you want, just pass them as additional parameters.

Source:

utils/Debug.js, line 145

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.

Source:

utils/Debug.js, line 70

stop()

Internal method that stops the debug output.

Source:

utils/Debug.js, line 105