Phaser 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 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 with it 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.

  Source - utils/Debug.js, line 59

#### 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 87

#### currentX :number

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

  Source - utils/Debug.js, line 75

#### currentY :number

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

  Source - utils/Debug.js, line 81

#### dirty :boolean

  Does the canvas need re-rendering?

  Source - utils/Debug.js, line 92

#### 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

#### lineHeight :number

  The line height between the debug text.

  Source - utils/Debug.js, line 64

#### 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 69

#### sprite :Phaser.Image

  If debugging in WebGL mode we need this.

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

#### 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 781

#### <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 98

#### 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 828

#### 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 810

#### 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 285

#### destroy()

  Destroy this object.

  Source - utils/Debug.js, line 877

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

#### 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 580

#### 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 433

#### 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 412

#### <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 226

#### 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 541

#### 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 560

#### 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 331

#### <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 143

#### 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 707

#### reset()

  Clears the Debug canvas.

  Source - utils/Debug.js, line 162

#### <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 124

#### 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 472

#### 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 254

#### 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 453

#### 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 515

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

#### 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 391

#### <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 181

#### <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 214

#### 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 676

#### 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 312