# phaser-plugin-debug-draw

> Simple debug display for Phaser 3

Latest version **7.1.0** (published 2023-02-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install phaser-plugin-debug-draw
pnpm add phaser-plugin-debug-draw
yarn add phaser-plugin-debug-draw
bun add phaser-plugin-debug-draw
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.1.0 |
| Published | 2023-02-01 |
| First published | 2018-11-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 37 |
| Author | samme |
| Maintainers | samme |
| Keywords | phaser-plugin, phaser3-plugin |

## Links

- npm: https://www.npmjs.com/package/phaser-plugin-debug-draw
- Repository: https://github.com/samme/phaser-plugin-debug-draw
- Homepage: https://github.com/samme/phaser-plugin-debug-draw#readme
- Issues: https://github.com/samme/phaser-plugin-debug-draw/issues
- npm.io page: https://npm.io/package/phaser-plugin-debug-draw

## Recent versions

- 7.1.0 (latest) — 2023-02-01
- 7.0.0 — 2021-05-27
- 6.0.1 — 2021-01-28
- 6.0.0 — 2021-01-27
- 5.0.1 — 2021-01-26
- 5.0.0 — 2020-11-08
- 4.7.1 — 2020-11-08
- 4.7.0 — 2020-04-30
- 4.6.0 — 2020-02-05
- 4.5.0 — 2020-01-30
- 4.4.0 — 2020-01-22
- 4.3.0 — 2020-01-10
- 4.2.0 — 2020-01-07
- 4.1.0 — 2020-01-07
- 4.0.0 — 2019-11-26
- … 14 more at https://npm.io/package/phaser-plugin-debug-draw/versions

## README

![Preview](./preview.png)

Phaser 3 Debug Draw Plugin
==========================

See [demos](https://codepen.io/collection/GomapQ), [screenshots](https://phaser.discourse.group/t/debug-draw-plugin-phaser-3/4480).

It shows:

- Game Objects with origin, bounds, rotation, input
- Bitmap Masks
- Input pointers
- Camera bounds, deadzone, and follow target
- Lights

It doesn't show:

- Game Objects in Containers
- Blitter Bobs
- Particle Emitters

Install
-------

The current version of the plugin requires Phaser v3.53.0 or later.

It should also work with Phaser's v3.60.0-beta series, but you'll need to use npm's `--force` to install despite the version conflict.

### Browser / UMD

Download and add the [plugin UMD script](dist/phaser-plugin-debug-draw.umd.js):

```html
<script src='path/to/phaser.js'></script>
<script src='path/to/phaser-plugin-debug-draw.umd.js'></script>
```

Or use the CDN scripts:

```html
<script src='https://cdn.jsdelivr.net/npm/phaser@3.55.2'></script>
<script src='https://cdn.jsdelivr.net/npm/phaser-plugin-debug-draw@7.1.0'></script>
```

Then add to your game config:

```js
/* global PhaserDebugDrawPlugin */
new Phaser.Game({
  plugins: {
    scene: [
      { key: 'DebugDrawPlugin', plugin: PhaserDebugDrawPlugin, mapping: 'debugDraw' }
    ]
  }
});
```

### Module

```js
import DebugDrawPlugin from 'phaser-plugin-debug-draw';

new Phaser.Game({
  plugins: {
    scene: [
      { key: 'DebugDrawPlugin', plugin: DebugDrawPlugin, mapping: 'debugDraw' }
    ]
  }
});
```

### Quick Load

```js
function preload () {
  this.load.scenePlugin(
    'PhaserDebugDrawPlugin',
    'https://cdn.jsdelivr.net/npm/phaser-plugin-debug-draw@7.1.0',
    'debugDraw',
    'debugDraw'
  );
}
```

### Load from Console

Given a global variable `game`:

```js
game.scene
  .getScenes(true)[0]
  .load
  .scenePlugin(
    'PhaserDebugDrawPlugin',
    'https://cdn.jsdelivr.net/npm/phaser-plugin-debug-draw@7.1.0',
    'debugDraw',
    'debugDraw'
  )
  .start();
```

Options
-------

Set properties on the plugin instance, e.g.,

```js
// In scene `init()` or `create()`:
this.debugDraw.showPointers = false;
```

See `console.log(this.debugDraw)` for all the options.

Position & Bounds
-----------------

It draws a dot on the Game Object's `x`, `y`.

If the Game Object has an origin, it also draws a rectangle from the origin with dimensions (`displayWidth`, `displayWidth`) or (`height`, `width`).

Mesh & Rope
-----------

```js
// In scene `create()`:
mesh.setDebug(this.debugDraw.graphic);
rope.setDebug(this.debugDraw.graphic);
```

---
_Source: https://npm.io/package/phaser-plugin-debug-draw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._