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 135
-
<static, constant> GEOM_CIRCLE : integer
-
Type:
- integer
- Source:
- src/utils/Debug.js line 147
-
<static, constant> GEOM_ELLIPSE : integer
-
Type:
- integer
- Source:
- src/utils/Debug.js line 165
-
<static, constant> GEOM_LINE : integer
-
Type:
- integer
- Source:
- src/utils/Debug.js line 159
-
<static, constant> GEOM_POINT : integer
-
Type:
- integer
- Source:
- src/utils/Debug.js line 153
-
<static, constant> GEOM_RECTANGLE : integer
-
Type:
- integer
- Source:
- src/utils/Debug.js line 141
-
bmd : Phaser.BitmapData
-
In WebGL mode this BitmapData contains a copy of the debug canvas.
Type:
- Source:
- src/utils/Debug.js line 38
-
canvas : HTMLCanvasElement
-
The canvas to which Debug calls draws.
Type:
- HTMLCanvasElement
- Source:
- src/utils/Debug.js line 43
-
columnWidth : number
-
The spacing between columns.
Type:
- number
- Default Value:
-
- 100
- Source:
- src/utils/Debug.js line 60
-
context : CanvasRenderingContext2D
-
The 2d context of the canvas.
Type:
- CanvasRenderingContext2D
- Source:
- src/utils/Debug.js line 48
-
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 103
-
<protected> currentColor : string
-
Type:
- string
- Source:
- src/utils/Debug.js line 85
-
currentX : number
-
The current X position the debug information will be rendered at.
Type:
- number
- Source:
- src/utils/Debug.js line 91
-
currentY : number
-
The current Y position the debug information will be rendered at.
Type:
- number
- Source:
- src/utils/Debug.js line 97
-
dirty : boolean
-
Does the canvas need re-rendering?
Type:
- boolean
- Source:
- src/utils/Debug.js line 109
-
font : string
-
The font that the debug information is rendered in.
Type:
- string
- Default Value:
-
- 14px monospace
- Source:
- src/utils/Debug.js line 54
-
game : Phaser.Game
-
A reference to the currently running Game.
Type:
- Source:
- src/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.Type:
- boolean
- Source:
- src/utils/Debug.js line 116
-
lineHeight : number
-
The line height between the debug text.
Type:
- number
- Default Value:
-
- 16
- Source:
- src/utils/Debug.js line 66
-
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 72
-
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 78
-
sprite : Phaser.Image
-
If debugging in WebGL mode, this is the Image displaying the debug BitmapData.
Type:
- Source:
- src/utils/Debug.js line 33
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 1100
-
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 1133
-
<protected> boot()
-
Internal method that boots the debug displayer.
- Source:
- src/utils/Debug.js line 169
-
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 1178
-
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 1161
-
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 457
-
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 485
-
destroy()
-
Destroy this object.
- Source:
- src/utils/Debug.js line 1414
-
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 1391
-
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 1193
-
gameInfo(x, y [, color])
-
Render game info (ID, renderer, paused, stepping).
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 319
-
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 919
-
inputHandler(handler, name, x, y, color)
-
Prints information about an input handler, e.g.
this.input.mouse
.Parameters:
Name Type Description handler
Phaser.Keyboard | Phaser.Mouse | Phaser.MouseWheel | Phaser.MSPointer | Phaser.PointerLock name
string x
number y
number color
string - Source:
- src/utils/Debug.js line 727
-
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 665
-
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 645
-
<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 292
-
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 882
-
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 1346
-
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 1297
-
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 1283
-
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 900
-
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 532
-
<protected> preUpdate()
-
Internal method that clears the canvas (if a Sprite) ready for a new debug session.
- Source:
- src/utils/Debug.js line 213
-
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 1061
-
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 1000
-
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 1225
-
reset()
-
Clears the Debug canvas.
- Source:
- src/utils/Debug.js line 231
-
<protected> resize()
-
Internal method that resizes the BitmapData and Canvas. Called by ScaleManager.onSizeChange only in WebGL mode.
- Source:
- src/utils/Debug.js line 198
-
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 814
-
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 1313
-
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 379
-
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 409
-
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 796
-
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 857
-
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 834
-
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 625
-
<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 249
-
state(x, y [, color])
-
Render game state info.
Icons show (+) pending, (>) loading, (*) created.
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 341
-
<protected> stop()
-
Internal method that stops the debug output.
- Source:
- src/utils/Debug.js line 281
-
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 1031
-
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 514