Phaser.Utils.Debug

new Debug(game)

A collection of methods for displaying debug information about game objects.

If your game is running in Canvas mode, then you should invoke all of the Debug methods from your games render function. This is because they are drawn directly onto the game canvas itself, so if you call any debug methods outside of render they are likely to be overwritten by the game itself.

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 withit well) and disable it for production!

Parameters:

Name

Type

Description

game

Phaser.Game

A reference to the currently running game.

Source - utils/Debug.js, line 23

Members

bmd:Phaser.BitmapData

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

Source - utils/Debug.js, line 38

canvas:HTMLCanvasElement

The canvas to which Debug calls draws.

Source - utils/Debug.js, line 43

columnWidth:number

The spacing between columns.

Default Value: - 100

Source - utils/Debug.js, line 60

context:CanvasRenderingContext2D

The 2d context of the canvas.

Source - utils/Debug.js, line 48

currentAlpha:number

The alpha of the Debug context, set before all debug information is rendered to it.

Default Value: - 1

Source - utils/Debug.js, line 96

currentX:number

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

Source - utils/Debug.js, line 84

currentY:number

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

Source - utils/Debug.js, line 90

dirty:boolean

Does the canvas need re-rendering?

Source - utils/Debug.js, line 102

font:string

The font that the debug information is rendered in.

Default Value: - 14px Courier

Source - utils/Debug.js, line 54

game:Phaser.Game

A reference to the currently running Game.

Source - utils/Debug.js, line 28

<readonly>isDisabled:boolean

If enableDebug: false is passed to Phaser.Game or if Phaser is built without the Debug class, this will be true.

Source - utils/Debug.js, line 109

lineHeight:number

The line height between the debug text.

Default Value: - 16

Source - utils/Debug.js, line 66

lineWidth:number

The width of the stroke on lines and shapes. A positive number.

Default Value: - 1

Source - utils/Debug.js, line 72

renderShadow:boolean

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

Default Value: - true

Source - utils/Debug.js, line 78

sprite:Phaser.Image

If debugging in WebGL mode, this is the Image displaying the debug BitmapData.

Source - utils/Debug.js, line 33

<static> AStar(astar-, x, y, color)→ {void}

Debug method to draw the last calculated path by AStar

Parameters:

Name

Type

Description

astar-

Phaser.Plugin.AStar

The AStar plugin that you want to debug.

x

number

X position on camera for debug display.

y

number

Y position on camera for debug display.

color

string

Color to stroke the path line.

Returns:

void-

Source - out/plugins/AStar/AStar.js, line 571

body(sprite, color, filled)

Render a Sprites Physics body if it has one set. The body is rendered as a filled or stroked rectangle. This only works for Arcade Physics, Ninja Physics (AABB and Circle only) and Box2D Physics bodies. To display a P2 Physics body you should enable debug mode on the body when creating it.

Parameters:

Name

Type

Argument

Default

Description

sprite

Phaser.Sprite

The Sprite who's body will be rendered.

color

string

<optional>

'rgba(0,255,0,0.4)'

Color of the debug rectangle to be rendered. The format is a CSS color string such as '#ff0000' or 'rgba(255,0,0,0.5)'.

filled

boolean

<optional>

true

Render the body as a filled rectangle (true) or a stroked rectangle (false)

Source - utils/Debug.js, line 816

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 - utils/Debug.js, line 850

<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 - utils/Debug.js, line 127

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 - utils/Debug.js, line 897

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 - utils/Debug.js, line 879

camera(camera, color, filled)

Marks the follow target and deadzone.

Parameters:

Name

Type

Argument

Default

Description

camera

Phaser.Camera

The Phaser.Camera to show the debug information for.

color

string

<optional>

Color of the debug shapes to be rendered (format is css color string).

filled

boolean

<optional>

true

Render the shapes filled (default, true) or stroked (false).

Source - utils/Debug.js, line 317

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 - utils/Debug.js, line 346

destroy()

Destroy this object.

Source - utils/Debug.js, line 991

displayList(displayObject)

Call this function from the Dev Tools console.

It will scan the display list and output all of the Objects it finds, and their renderOrderIDs.

Note Requires a browser that supports console.group and console.groupEnd (such as Chrome)

Parameters:

Name

Type

Argument

Description

displayObject

Object

<optional>

The displayObject level display object to start from. Defaults to the World.

Source - utils/Debug.js, line 913

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 - utils/Debug.js, line 648

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 - utils/Debug.js, line 501

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 - utils/Debug.js, line 480

<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 - utils/Debug.js, line 258

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 - utils/Debug.js, line 609

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 - utils/Debug.js, line 628

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 - utils/Debug.js, line 399

<internal>preUpdate()

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

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

Source - utils/Debug.js, line 175

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 - utils/Debug.js, line 776

rectangle(object, color, filled)

Renders a Rectangle.

Parameters:

Name

Type

Argument

Default

Description

object

Phaser.Rectangle | object

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 filled (default, true) or a stroked (false)

Source - utils/Debug.js, line 713

renderer(x,y, color)

Prints a description of the renderer and render session.

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.

Source - utils/Debug.js, line 946

reset()

Clears the Debug canvas.

Source - utils/Debug.js, line 194

<internal>resize(scaleManager, width, height)

Internal method that resizes the BitmapData and Canvas. Called by ScaleManager.onSizeChange only in WebGL mode.

Parameters:

Name

Type

Description

scaleManager

Phaser.ScaleManager

The Phaser ScaleManager.

width

number

The new width of the game.

height

number

The new height of the game.

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

Source - utils/Debug.js, line 156

ropeSegments(rope, color, filled)

Renders the Rope's segments. Note: This is really expensive as it has to calculate new segments every time 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 - utils/Debug.js, line 540

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 - utils/Debug.js, line 286

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 - utils/Debug.js, line 521

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 - utils/Debug.js, line 583

spriteInfo(sprite, x, y, color)

Render debug infos (including name, bounds info, position and some otherproperties) 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 - utils/Debug.js, line 560

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 - utils/Debug.js, line 459

<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 - utils/Debug.js, line 213

<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 - utils/Debug.js, line 246

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 - utils/Debug.js, line 745

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 - utils/Debug.js, line 380