{"id":15061042,"url":"https://github.com/samme/phaser-plugin-inspector","last_synced_at":"2025-04-10T06:12:09.057Z","repository":{"id":57322877,"uuid":"405169605","full_name":"samme/phaser-plugin-inspector","owner":"samme","description":"View and change Phaser 3 game properties","archived":false,"fork":false,"pushed_at":"2024-04-25T18:46:13.000Z","size":3236,"stargazers_count":40,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-25T19:53:32.747Z","etag":null,"topics":["phaser","phaser-plugin","phaser3","phaser3-plugin","tweakpane"],"latest_commit_sha":null,"homepage":"https://codepen.io/collection/LPeVMY?grid_type=list","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":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2021-09-10T17:58:20.000Z","updated_at":"2024-08-20T20:46:08.294Z","dependencies_parsed_at":"2024-04-13T02:27:36.468Z","dependency_job_id":"07aac392-4f00-4c01-bf1a-b3f586de82ea","html_url":"https://github.com/samme/phaser-plugin-inspector","commit_stats":{"total_commits":118,"total_committers":1,"mean_commits":118.0,"dds":0.0,"last_synced_commit":"9583bdfd613d6a1d8e2a070b14173429ba027ca1"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samme%2Fphaser-plugin-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samme%2Fphaser-plugin-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samme%2Fphaser-plugin-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samme%2Fphaser-plugin-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samme","download_url":"https://codeload.github.com/samme/phaser-plugin-inspector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166925,"owners_count":21058481,"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","tweakpane"],"created_at":"2024-09-24T23:08:31.912Z","updated_at":"2025-04-10T06:12:09.036Z","avatar_url":"https://github.com/samme.png","language":"JavaScript","readme":"Phaser 3 Inspector Plugin 🧐\n=========================\n\nView and change game properties, with [Tweakpane](https://github.com/cocopon/tweakpane).\n\nDemos\n-----\n\n- [First Phaser 3 game](https://codepen.io/samme/pen/YzxbMBV?editors=0010) — simple game, helper functions\n- [All the demos](https://codepen.io/collection/LPeVMY)\n\nYou can also paste the [Quick load](#quick-load) snippet into any of the [labs examples](https://labs.phaser.io).\n\nInstall\n-------\n\nThe plugins add controls for the game and scene systems. If you don't need these, you can skip this step and use the [helper functions](#helper-functions) only.\n\n### Browser / UMD\n\n[First Phaser 3 game](https://codepen.io/samme/pen/YzxbMBV?editors=0010) shows this setup.\n\nInclude Phaser, [Tweakpane](https://cdn.jsdelivr.net/npm/tweakpane/), and [the plugin UMD script](https://cdn.jsdelivr.net/npm/phaser-plugin-inspector/) in this order. You can download the scripts or use the CDN links.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/phaser@3.87.0/dist/phaser.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/tweakpane@3.1.10/dist/tweakpane.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/phaser-plugin-inspector@2.6.0/dist/phaser-plugin-inspector.umd.js\"\u003e\u003c/script\u003e\n```\n\nIf this is the only plugin you're using then you can use the \"default\" configuration:\n\n```js\n/* global PhaserPluginInspector */\n\nnew Phaser.Game({\n  plugins: PhaserPluginInspector.DefaultPluginsConfig\n});\n```\n\nOr you can configure the plugins individually:\n\n```js\n/* global PhaserPluginInspector */\n\nconst { InspectorGlobalPlugin, InspectorScenePlugin } = PhaserPluginInspector;\n\nnew Phaser.Game({\n  plugins: {\n    global: [{ key: 'InspectorGlobalPlugin', plugin: InspectorGlobalPlugin, mapping: 'inspectorGame' }],\n    scene: [{ key: 'InspectorScenePlugin', plugin: InspectorScenePlugin, mapping: 'inspectorScene' }]\n  }\n});\n```\n\nYou can use any mapping, or `{ start: true }` for no mapping. If you don't want to add any controls, you don't need any mapping.\n\nThe helper functions are on the same namespace:\n\n```js\n/* global PhaserPluginInspector */\n\nconst { AddGameObject } = PhaserPluginInspector\n```\n\n### Module\n\n```sh\nnpm install phaser-plugin-inspector tweakpane\n```\n\nThis package has an ES module (`phaser-plugin-inspector.esm.js`, marked as `module`) and a CommonJS-compatible UMD module(`phaser-plugin-inspector.umd.js`, marked as `browser`). You should use the ES module, but some bundlers may pick the UMD module by default. Configure your bundler to use the `module` field, or add an alias to the ES module file, or import the ES module file directly.\n\nIf this is the only plugin you're using then you can use the \"default\" configuration:\n\n```js\nimport { DefaultPluginsConfig } from 'phaser-plugin-inspector';\n\nnew Phaser.Game({\n  plugins: DefaultPluginsConfig\n});\n```\n\nOr you can configure the plugins individually:\n\n```js\nimport { InspectorGlobalPlugin, InspectorScenePlugin } from 'phaser-plugin-inspector';\n\nnew Phaser.Game({\n  plugins: {\n    global: [{ key: 'InspectorGlobalPlugin', plugin: InspectorGlobalPlugin, mapping: 'inspectorGame' }],\n    scene: [{ key: 'InspectorScenePlugin', plugin: InspectorScenePlugin, mapping: 'inspectorScene' }]\n  }\n});\n```\n\nYou can import the helper functions as well:\n\n```js\nimport { AddGameObject } from 'phaser-plugin-inspector';\n```\n\n### Quick load\n\n```js\nfunction preload() {\n  this.load.scripts('inspector', [\n    'https://cdn.jsdelivr.net/npm/tweakpane@3.1.10/dist/tweakpane.js',\n    'https://cdn.jsdelivr.net/npm/phaser-plugin-inspector@2.6.0/dist/phaser-plugin-inspector.umd.js',\n  ]);\n  this.load.once('complete', () =\u003e {\n    PhaserPluginInspector.Install(this.plugins);\n  });\n}\n```\n\n### Load from console\n\nGiven a `game` variable:\n\n```js\nconst scene = game.scene.getScenes(true)[0];\n\nscene.load.scripts('inspector', [\n  'https://cdn.jsdelivr.net/npm/tweakpane@3.1.10/dist/tweakpane.js',\n  'https://cdn.jsdelivr.net/npm/phaser-plugin-inspector@2.6.0/dist/phaser-plugin-inspector.umd.js',\n]);\nscene.load.once('complete', () =\u003e {\n  PhaserPluginInspector.Install(game.plugins);\n}).start();\n```\n\nUse\n---\n\nAll of the “Print” buttons call `console.info()` or `console.table()`.\n\nBeware that Tweakpane inputs (checkboxes, sliders, etc.) do not update their values automatically; use the pane's **Refresh** button.\n\nTweakpane monitors are updated automatically 5 times per second. For more precise work you may want to pause a scene or its systems.\n\nYou can inspect game objects using the **Display List: Inspect** and **Update List: Inspect** buttons in each scene. The new folder is added to the end of the inspector pane. Look in the console to confirm.\n\nTo step one frame at a time, use **Game → Loop → Sleep**, **Game → Step** (repeat), **Game → Loop → Wake**.\n\nHelper functions\n----------------\n\nThese create a set of controls for common Phaser objects.\n\nYou can use these functions with or without the plugins.\n\nThe `pane` argument is the Tweakpane pane or a folder in it. The `options` argument is options for the folder.\n\nEach function creates a [folder](https://cocopon.github.io/tweakpane/ui-components.html#folder) and returns it.\n\nIf you've installed the plugins, then within a scene context (`this`)\n\n- `this.inspectorGame.pane` or `this.inspectorScene.pane` is the main pane\n- `this.inspectorGame.folder` is the “Game” folder\n- `this.inspectorScene.folder` is the current scene's folder\n\nSee the [First Phaser 3 game](https://codepen.io/samme/pen/YzxbMBV?editors=0010) demo for this setup.\n\nIf you're not using the plugins, then you should create a pane yourself:\n\n```js\nconst pane = new Tweakpane.Pane();\n```\n\nSome of these folders need to be disposed manually if you destroy the target object or stop the scene it belongs to. Use\n\n```js\nfolder.dispose();\n```\n\n### AddActive(items, pane, options?) → folder\n\nAdds a set of \"active\" toggles for any objects with an `active` property, identified by `name`.\n\n### AddAlpha(items, pane, options?) → folder\n\nAdds a set of \"alpha\" sliders for any objects with an `alpha` property, identified by `name`.\n\n### AddAnimationState(animationState, pane, options?) → folder\n\nAdds a folder for a sprite's animation state, e.g.,\n\n    AddAnimationState(sprite.anims, pane);\n\n### AddArcadeBody(body, pane, options?) → folder\n\nAdds a folder for a game object's Arcade Physics body, e.g.,\n\n    AddArcadeBody(sprite.body, pane);\n\n### AddCamera(camera, pane) → folder\n\nAdds a folder for a camera, e.g.,\n\n    AddCamera(this.cameras.main, pane);\n\n### AddChain(chain, pane, options?) → folder\n\nAdds a folder for a [tween chain](https://docs.phaser.io/api-documentation/class/tweens-tweenchain).\n\nDispose this folder if you remove the tween chain.\n\n### AddFXComponent(component, pane, options?) → folder\n\nAdds a folder for a game object's [FX component](https://docs.phaser.io/api-documentation/class/gameobjects-components-fx), e.g.,\n\n    AddFXComponent(sprite.preFX, pane);\n\nNote that Post FX controllers are always [enabled](https://docs.phaser.io/api-documentation/class/gameobjects-components-fx#enabled).\n\n### AddFXController(controller, pane, options?) → folder\n\nAdds a folder for a game object's [FX controller](https://docs.phaser.io/api-documentation/class/fx-controller), e.g.,\n\n    const barrelEffect = sprite.preFX.addBarrel();\n\n    AddFXController(barrelEffect, pane);\n\nNote that Post FX controllers are always [active](https://docs.phaser.io/api-documentation/class/fx-controller#active).\n\n### AddGameObject(obj, pane, options?) → folder\n\nAdds a folder for a game object (except group).\n\n### AddGroup(group, pane, options?) → folder\n\nAdds a folder for a group.\n\n### AddInput(interactiveObject, pane, options?) → folder\n\nAdds a folder for a game object's [interactive object](https://docs.phaser.io/api-documentation/typedef/types-input#interactiveobject), e.g.,\n\n    AddInput(sprite.input, pane);\n\n### AddKey(key, pane, options?) → folder\n\nAdds a folder for a [keyboard key object](https://docs.phaser.io/api-documentation/class/input-keyboard-key).\n\nDispose this folder if you remove the key.\n\n### AddKeys(keys, pane, options?) → folder\n\nAdds a folder for an object map of [keyboard key objects](https://docs.phaser.io/api-documentation/class/input-keyboard-key), such as that returned by [addKeys()](https://docs.phaser.io/api-documentation/class/input-keyboard-keyboardplugin#addkeys).\n\nDispose this folder if you remove those keys.\n\n### AddLight(light, pane, options?) → folder\n\nAdds a folder for a [light](https://docs.phaser.io/api-documentation/class/gameobjects-light) (not point light).\n\n### AddParticleEmitter(emitter, pane, options?) → folder\n\nAdds a folder for a [particle emitter](https://docs.phaser.io/api-documentation/class/gameobjects-particles-particleemitter).\n\n### AddScenes(scene, pane, options?) → folder\n\nAdds a set of \"visible\" toggles for the scenes, e.g.,\n\n    AddScenes(this.scene.manager.getScenes(false), pane);\n\n### AddSound(sound, pane, options?) → folder\n\nAdds a folder for a [sound](https://docs.phaser.io/api-documentation/class/sound-basesound).\n\n### AddTimeline(timeline, pane, options?) → folder\n\nAdds a folder for a [timeline](https://docs.phaser.io/api-documentation/class/time-timeline).\n\n### AddTimerEvent(timerEvent, pane, options?) → folder\n\nAdds a folder for a [timer event](https://docs.phaser.io/api-documentation/class/time-timerevent).\n\nDispose this folder if you remove the timer event.\n\n### AddTween(tween, pane, options?) → folder\n\nAdds a folder for a [tween](https://docs.phaser.io/api-documentation/class/tweens-tween).\n\n### AddVideo(video, pane, options?) → folder\n\nAdds a folder for a [Video game object](https://docs.phaser.io/api-documentation/class/gameobjects-video).\n\n### AddVisible(items, pane, options?) → folder\n\nAdds a set of \"visible\" toggles for any objects with an `visible` property, identified by `name`.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamme%2Fphaser-plugin-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamme%2Fphaser-plugin-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamme%2Fphaser-plugin-inspector/lists"}