{"id":21652493,"url":"https://github.com/samme/phaser-plugin-debug-draw","last_synced_at":"2025-04-11T20:40:48.089Z","repository":{"id":42221248,"uuid":"157467204","full_name":"samme/phaser-plugin-debug-draw","owner":"samme","description":"Debug display for Phaser 3","archived":false,"fork":false,"pushed_at":"2024-02-15T16:46:25.000Z","size":1477,"stargazers_count":36,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T16:45:36.240Z","etag":null,"topics":["phaser","phaser-plugin","phaser3","phaser3-plugin"],"latest_commit_sha":null,"homepage":"https://codepen.io/collection/GomapQ","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samme.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-11-14T00:44:46.000Z","updated_at":"2024-10-11T10:14:22.000Z","dependencies_parsed_at":"2024-02-15T17:49:17.674Z","dependency_job_id":null,"html_url":"https://github.com/samme/phaser-plugin-debug-draw","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samme%2Fphaser-plugin-debug-draw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samme%2Fphaser-plugin-debug-draw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samme%2Fphaser-plugin-debug-draw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samme%2Fphaser-plugin-debug-draw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samme","download_url":"https://codeload.github.com/samme/phaser-plugin-debug-draw/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248478678,"owners_count":21110747,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["phaser","phaser-plugin","phaser3","phaser3-plugin"],"created_at":"2024-11-25T07:55:30.750Z","updated_at":"2025-04-11T20:40:48.053Z","avatar_url":"https://github.com/samme.png","language":"JavaScript","readme":"![Preview](./preview.png)\n\nPhaser 3 Debug Draw Plugin\n==========================\n\nSee [demos](https://codepen.io/collection/GomapQ), [screenshots](https://phaser.discourse.group/t/debug-draw-plugin-phaser-3/4480).\n\nIt shows:\n\n- Game Objects with origin, bounds, rotation, input\n- Bitmap Masks\n- Input pointers\n- Camera bounds, deadzone, and follow target\n- Lights\n\nIt doesn't show:\n\n- Game Objects in Containers\n- Blitter Bobs\n- Particle Emitters\n\nInstall\n-------\n\nThe current version of the plugin requires Phaser v3.53.0 or later. It should work with Phaser v3.80.0-beta.2 as well, but if you're installing the plugin with npm you'll need to use `--force`.\n\n### Browser / UMD\n\nDownload and add the [plugin UMD script](dist/phaser-plugin-debug-draw.umd.js):\n\n```html\n\u003cscript src='path/to/phaser.js'\u003e\u003c/script\u003e\n\u003cscript src='path/to/phaser-plugin-debug-draw.umd.js'\u003e\u003c/script\u003e\n```\n\nOr use the CDN scripts:\n\n```html\n\u003cscript src='https://cdn.jsdelivr.net/npm/phaser@3.70.0'\u003e\u003c/script\u003e\n\u003cscript src='https://cdn.jsdelivr.net/npm/phaser-plugin-debug-draw@7.1.0'\u003e\u003c/script\u003e\n```\n\nThen add to your game config:\n\n```js\n/* global PhaserDebugDrawPlugin */\n\nnew Phaser.Game({\n  plugins: {\n    scene: [\n      { key: 'DebugDrawPlugin', plugin: PhaserDebugDrawPlugin, mapping: 'debugDraw' }\n    ]\n  }\n});\n```\n\nOr if you would rather activate the plugin per scene:\n\n```js\n/* global PhaserDebugDrawPlugin */\n\nnew Phaser.Game({\n  plugins: {\n    scene: [{ key: 'DebugDrawPlugin', plugin: PhaserDebugDrawPlugin }]\n  },\n  scene: [\n    new Phaser.Scene({\n      key: 'debugDrawScene',\n      plugins: [\n        ...Phaser.Plugins.DefaultPlugins.DefaultScene,\n        'DebugDrawPlugin'\n      ]\n    }),\n    new Phaser.Scene({\n      key: 'noDebugDrawScene'\n    })\n  ]\n});\n```\n\n### Module\n\n```js\nimport DebugDrawPlugin from 'phaser-plugin-debug-draw';\n\nnew Phaser.Game({\n  plugins: {\n    scene: [\n      { key: 'DebugDrawPlugin', plugin: DebugDrawPlugin, mapping: 'debugDraw' }\n    ]\n  }\n});\n```\n\n### Quick Load\n\nAdd to your first scene:\n\n```js\nfunction preload () {\n  this.load.scenePlugin(\n    'PhaserDebugDrawPlugin',\n    'https://cdn.jsdelivr.net/npm/phaser-plugin-debug-draw@7.1.0',\n    'debugDraw',\n    'debugDraw'\n  );\n}\n```\n\n### Load from Console\n\nGiven a global variable `game`:\n\n```js\ngame.scene\n  .getScenes(true)[0]\n  .load\n  .scenePlugin(\n    'PhaserDebugDrawPlugin',\n    'https://cdn.jsdelivr.net/npm/phaser-plugin-debug-draw@7.1.0',\n    'debugDraw',\n    'debugDraw'\n  )\n  .start();\n```\n\nOptions\n-------\n\nSet properties on the plugin instance, e.g.,\n\n```js\n// In scene `init()` or `create()`:\nthis.debugDraw.showPointers = false;\n```\n\nSee `console.log(this.debugDraw)` for all the options.\n\nPosition \u0026 Bounds\n-----------------\n\nIt draws a dot on the Game Object's `x`, `y`.\n\nIf the Game Object has an origin, it also draws a rectangle from the origin with dimensions (`displayWidth`, `displayWidth`) or (`height`, `width`).\n\nMesh \u0026 Rope\n-----------\n\n```js\n// In scene `create()`:\nmesh.setDebug(this.debugDraw.graphic);\nrope.setDebug(this.debugDraw.graphic);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamme%2Fphaser-plugin-debug-draw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamme%2Fphaser-plugin-debug-draw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamme%2Fphaser-plugin-debug-draw/lists"}