Class: Debug

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 game's 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 with it well) and disable it for production!

Parameters:
Name Type Description
game Phaser.Game

A reference to the currently running game.

Source:
src/utils/Debug.js line 23

Members

<static, constant> GEOM_AUTO : integer

Type:
  • integer
Source:
src/utils/Debug.js line 137

<static, constant> GEOM_CIRCLE : integer

Type:
  • integer
Source:
src/utils/Debug.js line 149

<static, constant> GEOM_ELLIPSE : integer

Type:
  • integer
Source:
src/utils/Debug.js line 167

<static, constant> GEOM_LINE : integer

Type:
  • integer
Source:
src/utils/Debug.js line 161

<static, constant> GEOM_POINT : integer

Type:
  • integer
Source:
src/utils/Debug.js line 155

<static, constant> GEOM_RECTANGLE : integer

Type:
  • integer
Source:
src/utils/Debug.js line 143

bmd : Phaser.BitmapData

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

Type:
Source:
src/utils/Debug.js line 39

canvas : HTMLCanvasElement

The canvas to which Debug calls draws.

Type:
  • HTMLCanvasElement
Source:
src/utils/Debug.js line 44

columnWidth : number

The spacing between columns.

Type:
  • number
Default Value:
  • 100
Source:
src/utils/Debug.js line 61

context : CanvasRenderingContext2D

The 2d context of the canvas.

Type:
  • CanvasRenderingContext2D
Source:
src/utils/Debug.js line 49

currentAlpha : number

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

Type:
  • number
Default Value:
  • 1
Source:
src/utils/Debug.js line 104

<protected> currentColor : string

The color last set by start or text.

Type:
  • string
Source:
src/utils/Debug.js line 86

currentX : number

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

Type:
  • number
Source:
src/utils/Debug.js line 92

currentY : number

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

Type:
  • number
Source:
src/utils/Debug.js line 98

dirty : boolean

Does the canvas need re-rendering?

Type:
  • boolean
Source:
src/utils/Debug.js line 110

font : string

The font that the debug information is rendered in.

Type:
  • string
Default Value:
  • 14px monospace
Source:
src/utils/Debug.js line 55

game : Phaser.Game

A reference to the currently running Game.

Type:
Source:
src/utils/Debug.js line 29

<readonly> isDisabled : boolean

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

Type:
  • boolean
Source:
src/utils/Debug.js line 117

lineHeight : number

The line height between the debug text.

Type:
  • number
Default Value:
  • 16
Source:
src/utils/Debug.js line 67

lineWidth : number

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

Type:
  • number
Default Value:
  • 1
Source:
src/utils/Debug.js line 73

renderShadow : boolean

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

Type:
  • boolean
Default Value:
  • true
Source:
src/utils/Debug.js line 79

sprite : Phaser.Image

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

Type:
Source:
src/utils/Debug.js line 34

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:
src/utils/Debug.js line 1026

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:
src/utils/Debug.js line 1061

<protected> boot()

Internal method that boots the debug displayer.

Source:
src/utils/Debug.js line 171

box2dBody(body [, 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
body Phaser.Physics.Box2D.Body

The body to be rendered.

color string <optional>
'rgb(0,255,0)'

Color of the rendering (format is css color string).

Source:
src/utils/Debug.js line 1110

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:
src/utils/Debug.js line 1091

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

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:
src/utils/Debug.js line 429

destroy()

Destroy this object.

Source:
src/utils/Debug.js line 1361

device(x, y [, color])

Shows device capabilities: Pointer Events, Touch Events, Web Audio, WebGL.

Parameters:
Name Type Argument Description
x number
y number
color string <optional>
Source:
src/utils/Debug.js line 1337

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:
src/utils/Debug.js line 1127

geom(object [, color] [, filled] [, forceType])

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

Parameters:
Name Type Argument Default Description
object Phaser.Rectangle | Phaser.Circle | Phaser.Ellipse | 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>
Phaser.Utils.Debug.GEOM_AUTO

Force rendering of a specific type: (0) GEOM_AUTO, 1 GEOM_RECTANGLE, (2) GEOM_CIRCLE, (3) GEOM_POINT, (4) GEOM_LINE, (5) GEOM_ELLIPSE.

Source:
src/utils/Debug.js line 837

inputInfo(x, y [, color] [, showDetails])

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

showDetails boolean <optional>
true

Also describe input sources and pointers.

Source:
src/utils/Debug.js line 617

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:
src/utils/Debug.js line 595

<protected> line()

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

Source:
src/utils/Debug.js line 305

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:
src/utils/Debug.js line 796

loader(loader, x, y [, color])

Prints the progress of a Phaser.Loader.

Typically you would call this within a State#loadRender callback and pass game.load (Phaser.Game#load).

You can enable Phaser.Loader#resetLocked to temporarily hold the loader in its 'complete' state. Just remember to disable it before restarting the loader (such as when changing states).

Parameters:
Name Type Argument Default Description
loader Phaser.Loader

The loader. Usually game.load (Phaser.Game#load).

x number

The X value the debug info will start from.

y number

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:
src/utils/Debug.js line 1290

phaser(x, y [, color])

Prints Phaser version, rendering mode, and device audio support.

Parameters:
Name Type Argument Default Description
x number

The X value the debug info will start from.

y number

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:
src/utils/Debug.js line 1237

physicsGroup(group [, color] [, filled] [, checkExists])

Render each physics body in a group.

Parameters:
Name Type Argument Default Description
group Phaser.Group

A group containing physics-enabled sprites.

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

checkExists boolean <optional>
false

Render only children with exists=true.

Source:
src/utils/Debug.js line 1221

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 width and height of the rendered pixel.

Source:
src/utils/Debug.js line 816

pointer(pointer [, hideIfUp] [, downColor] [, upColor] [, color] [, inactiveColor])

Renders the Pointer.circle object onto the stage in green if down or yellow 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 the Pointer is down.

upColor string <optional>
'rgba(255,255,0,0.5)'

The color the circle is rendered in if the Pointer is 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).

inactiveColor string <optional>
'rgb(255,0,0,0.5)'

The color the circle is rendered in if the Pointer is inactive.

Source:
src/utils/Debug.js line 479

<protected> preUpdate()

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

Source:
src/utils/Debug.js line 218

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:
src/utils/Debug.js line 985

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:
src/utils/Debug.js line 920

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:
src/utils/Debug.js line 1161

reset()

Clears the Debug canvas.

Source:
src/utils/Debug.js line 238

<protected> resize()

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

Source:
src/utils/Debug.js line 201

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:
src/utils/Debug.js line 722

scale(x, y [, color])

Prints game/canvas dimensions and game scale settings.

Parameters:
Name Type Argument Default Description
x number

The X value the debug info will start from.

y number

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:
src/utils/Debug.js line 1255

sound(x, y [, color])

Render Sound Manager information, including volume, mute, audio mode, and locked status.

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:
src/utils/Debug.js line 334

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:
src/utils/Debug.js line 366

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:
src/utils/Debug.js line 702

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:
src/utils/Debug.js line 769

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:
src/utils/Debug.js line 744

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:
src/utils/Debug.js line 573

<protected> 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:
src/utils/Debug.js line 258

<protected> stop()

Internal method that stops the debug output.

Source:
src/utils/Debug.js line 292

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:
src/utils/Debug.js line 953

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

phaser-ce@2.11.0 is on GitHub and NPM

Documentation generated by JSDoc 3.5.4 on 2018-06-26 using Tomorrow.