These docs are for Phaser 2.4.8 Phaser 3 docs can be found on GitHub pages.
Phaser CE docs can be found on the Phaser CE Documentation site.

Constructor

Phaser.Utils. Debug

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 alpha of the Debug context, set before all debug information is rendered to it.

Default Value
  • 1
Source code: utils/Debug.js (Line 82)

currentX : number

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

Source code: utils/Debug.js (Line 70)

currentY : number

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

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. 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 code: utils/Debug.js (Line 742)

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 776)

<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 823)

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 805)

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 280)

destroy()

Destroy this object.

Source code: utils/Debug.js (Line 839)

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 575)

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 640)

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 428)

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 407)

<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 221)

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 536)

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 555)

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 326)

<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 code: utils/Debug.js (Line 138)

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 702)

reset()

Clears the Debug canvas.

Source code: utils/Debug.js (Line 157)

<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 code: utils/Debug.js (Line 119)

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 code: utils/Debug.js (Line 467)

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 249)

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 448)

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 510)

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 487)

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 386)

<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 176)

<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 209)

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 671)

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 307)