{"id":19902973,"url":"https://github.com/jhavrick/phaser3-phorge","last_synced_at":"2026-04-20T04:04:50.550Z","repository":{"id":205875452,"uuid":"147235850","full_name":"JHAvrick/phaser3-phorge","owner":"JHAvrick","description":"A layout/scene building plugin for use with Phaser 3.","archived":false,"fork":false,"pushed_at":"2020-02-23T22:56:51.000Z","size":3029,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-07T22:57:38.595Z","etag":null,"topics":["javascript","layout","phaser","phaser3","scenebuilder"],"latest_commit_sha":null,"homepage":null,"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/JHAvrick.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}},"created_at":"2018-09-03T17:40:36.000Z","updated_at":"2024-05-29T12:51:31.000Z","dependencies_parsed_at":"2023-11-07T03:47:19.686Z","dependency_job_id":null,"html_url":"https://github.com/JHAvrick/phaser3-phorge","commit_stats":null,"previous_names":["jhavrick/phaser3-phorge"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JHAvrick/phaser3-phorge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHAvrick%2Fphaser3-phorge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHAvrick%2Fphaser3-phorge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHAvrick%2Fphaser3-phorge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHAvrick%2Fphaser3-phorge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JHAvrick","download_url":"https://codeload.github.com/JHAvrick/phaser3-phorge/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHAvrick%2Fphaser3-phorge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272233058,"owners_count":24896729,"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","status":"online","status_checked_at":"2025-08-26T02:00:07.904Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["javascript","layout","phaser","phaser3","scenebuilder"],"created_at":"2024-11-12T20:20:36.539Z","updated_at":"2026-04-20T04:04:50.520Z","avatar_url":"https://github.com/JHAvrick.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# phaser3-phorge\nA layout/scene building plugin for [Phaser 3](https://photonstorm.github.io/phaser3-docs/index.html). This plugin takes a user-defined config and creates the objects denoted therein. The plugin also includes a number of subsystems for manipulating the layout build. \u003cb\u003eDocumentation is a work in progress.\u003c/b\u003e\n\n - [Features](#features) \u003cbr/\u003e\n - [Install](#install) \u003cbr/\u003e\n - [Usage](#usage)\n - [Schema](#schema)\n - [API](#api)\n    - [LayerManager](#layermanager)\n    - [ResizeManager](#resizemanager)\n    - Objects\n    - Groups\n - [Examples](#examples)\n\n\u003ca\u003e\u003ca name=\"features\" /\u003e\n## Features\n  - Seperate layout from game logic\n  - Define object position as a ratio of scene size (i.e. '25%', '50%')\n  - Seperate objects into and manipulate depth layers\n  - Create and populate groups from config\n  - A simple resize manager to adjust certain position/size attributes on scene resize\n  - Default values for most objects in the [Phaser.GameObject](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.html) namespace\n  \n\u003ca\u003e\u003ca name=\"install\" /\u003e\n## Install\n`npm install phaser3-phorge`\n\n\u003ca\u003e\u003ca name=\"usage\" /\u003e\n## Usage \n\n### Setup the Plugin\n```javascript\nimport Phaser from 'phaser';\nimport PhorgePlugin from 'phaser3-phorge';\n\nconst gameConfig = {\n    type: Phaser.WEBGL,\n    parent: 'game-container',\n    width: 400,\n    height: 600,\n    scene: [\n        Preload,\n        DemoScene\n    ],\n    plugins: {\n        scene: [\n            { \n                key: 'phorge', \n                mapping: 'phorge',\n                plugin: PhorgePlugin\n            }\n        ]\n    },\n};\n\nconst game = new Phaser.Game(gameConfig);\n```\n\n### Build the Layout\n```javascript\nclass Main extends Phaser.Scene {\n    constructor() { super({key: 'Main'}); }\n  \n    create(){\n        this.phorge.build(Layout);\n    }\n}\n\n```\n\u003ca\u003e\u003ca name=\"schema\" /\u003e  \n## Config Schema\n\n`layers` - An array of strings, representing the layers in ascending order. \u003cbr/\u003e\n`groups` - An array of strings, each denoting an instance of [Phaser.GameObjects.Group](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Group.html). \u003cbr/\u003e\n`anims` - An array of animation configs, see [here](https://photonstorm.github.io/phaser3-docs/Phaser.Animations.Animation.html) for more info about what properties an animation config can contain. \u003cbr/\u003e\n`objects` - An array of object configs, with the properties: \u003cbr/\u003e\n  + `key` - (Required) The key by which this object can be retrieved from the plugin. Also used to map the object to the scene if `mapToScene` is true in the build config (as it is by default).\n  + `class` - (Required) The class to instantiate this object. \n    - For many objects in the Phaser.GameObjects namespace, a string (case insensitive) can be used to resolve the class. This will work for any of the following: `BitmapText`, `DynamicBitmapText`, `Graphics`, `Image`, `RenderTexture`, `Sprite`, `Sprite3d`, `Text`, `TileSprite`, `Zone`.\n  + `params` - (Optional) An array with params to pass the instantiated object. \n    - If you need to pass the parent scene, you can use `'{scene}'` as a placeholder and it will be resolved at runtime.\n  + `layer` - (Optional) A string corresponding to one of your layers. Defaults to the first layer.\n  + `group` - (Optional) A string correspnding to one of your groups.\n  + `props` - (Optional) An object containing key/value pairs for each property to assign after this object's creation. \n    - Any property can be set here, not only those which are already owned by the object\n    - Property chains (i.e. `prop.nextProp.whatever`) are valid\n    - For the properties `x`, `y`, `displayWidth`, and `displayHeight`, you can pass a string such as '50%' to set the value based on a percentage of the scene dimensions. \n + `resize` - (Optional) The plugins resize subsystem can manage the resizing of the following properties: `x`, `y`, `displayWidth`, and `displayHeight`.\n    - By default the ResizeManager will subscribe to the scene's `resize` event and resize any object w/ a `resize` property in it's config. This can be disabled by using `phorge.resizer.stop()`\n    - Use a ratio string such as `'50%'` to maintain a certain size relative to the scene dimensions.\n   \n\u003ca\u003e\u003ca name=\"api\" /\u003e\n## API\n \n\u003ca\u003e\u003ca name=\"layermanager\" /\u003e  \n### LayerManager\nThe LayerManager maintains a list of semantic layers by setting the [depth](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Components.html#.Depth) property of each layer's children. The LayerManager has many methods for manipulating/reordering layers, however it can also be ignored after the initial build if desired. (You can always call `restack()` to reset the depth of each layer's children.)\n\n* Methods\n    * [restack()](#LayerManager+restack)\n    * [addLayer(key, objects)](#LayerManager+addLayer) ⇒ \u003ccode\u003ePhaser.GameObjects.Group\u003c/code\u003e\n    * [removeLayer(layerKey, [destroyObjects])](#LayerManager+removeLayer) ⇒ \u003ccode\u003ePhaser.GameObjects.Group\u003c/code\u003e\n    * [getLayer(layerKey)](#LayerManager+getLayer) ⇒ \u003ccode\u003ePhaser.GameObjects.Group\u003c/code\u003e\n    * [merge(layerOneKey, layerTwoKey)](#LayerManager+merge)\n    * [swap(layerOne, layerTwo)](#LayerManager+swap)\n    * [bringUp(layerKey)](#LayerManager+bringUp)\n    * [bringDown(layerKey)](#LayerManager+bringDown)\n    * [toTop(layerKey)](#LayerManager+toTop)\n    * [toBack(layerKey)](#LayerManager+toBack)\n    * [addObject(layerKey, object)](#LayerManager+addObject)\n    * [removeObject(object)](#LayerManager+removeObject)\n    * [getObjLayerKey(object)](#LayerManager+getObjLayerKey) ⇒ \u003ccode\u003eString\u003c/code\u003e \\| \u003ccode\u003eBool\u003c/code\u003e\n    * [moveToLayer(object, newLayerKey)](#LayerManager+moveToLayer)\n\n\n\n\n\n\u003ca name=\"LayerManager+restack\"\u003e\u003c/a\u003e\n### layers.restack()\nReapplies the parent layers depth to each of the layer's children\n\n**Kind**: instance method of [\u003ccode\u003eLayerManager\u003c/code\u003e](#LayerManager)\n\u003ca name=\"LayerManager+addLayer\"\u003e\u003c/a\u003e\n\n### layers.addLayer(key, objects) ⇒ \u003ccode\u003ePhaser.GameObjects.Group\u003c/code\u003e\nAdd's a new layer to the top of the stack\n\n\n**Returns**: \u003ccode\u003ePhaser.GameObjects.Group\u003c/code\u003e - - The new layer\n\n| Param | Type | Description |\n| --- | --- | --- |\n| key | \u003ccode\u003eString\u003c/code\u003e | The layer key |\n| objects | \u003ccode\u003eArray.\u0026lt;Phaser.GameObjects.GameObject\u0026gt;\u003c/code\u003e | An array of objects that belong to this layer |\n\n\u003ca name=\"LayerManager+removeLayer\"\u003e\u003c/a\u003e\n### layers.removeLayer(layerKey, [destroyObjects]) ⇒ \u003ccode\u003ePhaser.GameObjects.Group\u003c/code\u003e\nthe LayerManager.Any objects in that layer will no longer be managed by\n\n\n**Returns**: \u003ccode\u003ePhaser.GameObjects.Group\u003c/code\u003e - - The removed layer\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| layerKey | \u003ccode\u003eString\u003c/code\u003e |  | The layer to remove |\n| [destroyObjects] | \u003ccode\u003eBool\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | Whether to call destroy() on  all objects in the group |\n\n\u003ca name=\"LayerManager+getLayer\"\u003e\u003c/a\u003e\n\n### layers.getLayer(layerKey) ⇒ \u003ccode\u003ePhaser.GameObjects.Group\u003c/code\u003e\nReturns the Phaser Group representing a given layer\n\n\n**Returns**: \u003ccode\u003ePhaser.GameObjects.Group\u003c/code\u003e - - The new layer\n\n| Param | Type | Description |\n| --- | --- | --- |\n| layerKey | \u003ccode\u003eString\u003c/code\u003e | The layer to get |\n\n\u003ca name=\"LayerManager+merge\"\u003e\u003c/a\u003e\n\n### layers.merge(layerOneKey, layerTwoKey)\nMerge two layers into one\n\n\n\n| Param | Type |\n| --- | --- |\n| layerOneKey | \u003ccode\u003eString\u003c/code\u003e |\n| layerTwoKey | \u003ccode\u003eString\u003c/code\u003e |\n\n\u003ca name=\"LayerManager+swap\"\u003e\u003c/a\u003e\n\n### layers.swap(layerOne, layerTwo)\nSwaps the depth order of two layers\n\n\n\n| Param | Type | Description |\n| --- | --- | --- |\n| layerOne | \u003ccode\u003eString\u003c/code\u003e | The key of the first layer |\n| layerTwo | \u003ccode\u003eString\u003c/code\u003e | The key of the second layer |\n\n\u003ca name=\"LayerManager+bringUp\"\u003e\u003c/a\u003e\n\n### layers.bringUp(layerKey)\nSwitch the order of the given layer with the layer directly above it.\n\n\n\n| Param | Type | Description |\n| --- | --- | --- |\n| layerKey | \u003ccode\u003eString\u003c/code\u003e | The key of the layer to bring up |\n\n\u003ca name=\"LayerManager+bringDown\"\u003e\u003c/a\u003e\n\n### layers.bringDown(layerKey)\nSwitch the order of the given layer with the layer directly below it.\n\n\n\n| Param | Type | Description |\n| --- | --- | --- |\n| layerKey | \u003ccode\u003eString\u003c/code\u003e | The key of the layer to bring up |\n\n\u003ca name=\"LayerManager+toTop\"\u003e\u003c/a\u003e\n\n### layers.toTop(layerKey)\nBrings a layer to the top of stack\n\n\n\n| Param | Type |\n| --- | --- |\n| layerKey | \u003ccode\u003eString\u003c/code\u003e |\n\n\u003ca name=\"LayerManager+toBack\"\u003e\u003c/a\u003e\n\n### layers.toBack(layerKey)\nSends a layer to the bottom of stack\n\n\n\n| Param | Type |\n| --- | --- |\n| layerKey | \u003ccode\u003eString\u003c/code\u003e |\n\n\u003ca name=\"LayerManager+addObject\"\u003e\u003c/a\u003e\n\n### layers.addObject(layerKey, object)\nAdds an object to the given layer\n\n\n\n| Param | Type | Description |\n| --- | --- | --- |\n| layerKey | \u003ccode\u003eString\u003c/code\u003e | The layer into which the object will be added |\n| object | \u003ccode\u003ePhaser.GameObjects.GameObject\u003c/code\u003e | An valid object in the Phaser.GameObjects namespace |\n\n\u003ca name=\"LayerManager+removeObject\"\u003e\u003c/a\u003e\n\n### layers.removeObject(object)\nRemoves an object from any layer in which it resides.\n\n| Param | Type | Description |\n| --- | --- | --- |\n| object | \u003ccode\u003ePhaser.GameObjects.GameObject\u003c/code\u003e | The object to remove |\n\n\u003ca name=\"LayerManager+getObjLayerKey\"\u003e\u003c/a\u003e\n\n### layers.getObjLayerKey(object) ⇒ \u003ccode\u003eString\u003c/code\u003e \\| \u003ccode\u003eBool\u003c/code\u003e\nReturns the key of the layer that the given object resides in\n\n\n**Returns**: \u003ccode\u003eString\u003c/code\u003e \\| \u003ccode\u003eBool\u003c/code\u003e - - The layer key, or `false` if the object resides in no layers\n\n| Param | Type | Description |\n| --- | --- | --- |\n| object | \u003ccode\u003eObject\u003c/code\u003e | The object for which to retrieve the layer key |\n\n\u003ca name=\"LayerManager+moveToLayer\"\u003e\u003c/a\u003e\n\n### layers.moveToLayer(object, newLayerKey)\nMove an object to a different layer\n\n\n\n| Param | Type | Description |\n| --- | --- | --- |\n| object | \u003ccode\u003eObject\u003c/code\u003e | The object to move |\n| newLayerKey | \u003ccode\u003eString\u003c/code\u003e | The destination layer key |\n\n\u003cbr/\u003e\n---\n\n\n\u003ca\u003e\u003ca name=\"resizemanager\" /\u003e  \n### ResizeManager\nThe ResizeManager can manage the resizing of certain game object properties when the scene trigger's a `resize` event. Currently the ResizeManager can manage the following properties: `x`, `y`, `displayWidth`, and `displayHeight`. In the future more complex behavior will be supported.\n\n**Properties**\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| [active] | \u003ccode\u003eBool\u003c/code\u003e | \u003ccode\u003etrue\u003c/code\u003e | Set to false to stop the ResizeManager completely |\n| [manageCameras] | \u003ccode\u003eBool\u003c/code\u003e | \u003ccode\u003etrue\u003c/code\u003e | Indicates whether the ResizeManager should also resize the camera when the scene resizes |\n\n\n* Methods:\n    * [manage(target, config)](#ResizeManager+manage)\n\n\n\n### resizeManager.manage(target, config)\nAdds an object for the ResizeManager to manage according to the given config. Properties passed as strings will resolved as a percentage of the scene's dimensions.\n\n| Param | Type | Description |\n| --- | --- | --- |\n| target | \u003ccode\u003ePhaser.GameObjects.GameObject\u003c/code\u003e | The target object to resize |\n| config | \u003ccode\u003eObject\u003c/code\u003e | The resize config w/ transform properties |\n| config.x | \u003ccode\u003eString\u003c/code\u003e \\| \u003ccode\u003eNumber\u003c/code\u003e | The x position of the target object |\n| config.y | \u003ccode\u003eString\u003c/code\u003e \\| \u003ccode\u003eNumber\u003c/code\u003e | The y position of the target object |\n| config.displayWidth | \u003ccode\u003eString\u003c/code\u003e \\| \u003ccode\u003eNumber\u003c/code\u003e | The object's display width |\n| config.displayHeight | \u003ccode\u003eString\u003c/code\u003e \\| \u003ccode\u003eNumber\u003c/code\u003e | The resize config w/ transform properties |\n\n\u003ca\u003e\u003ca name=\"examples\" /\u003e\n## Config Examples\n\nA simple layout with only two objects:\n```javascript\nconst SimpleLayout = {\n    layers: ['one', 'two', 'three'],\n    groups: ['one', 'two'],\n    objects: [\n        {\n            key: \"healthbar\",\n            layer: \"one\",\n            class: 'sprite',\n            params: ['{scene}', 0, 0, 'healthbar'],  //'{scene}' will resolve to the current scene\n            props: { anchorX: 0.5, anchorY: 0.5, x: '50%', y: '50%' }\n        },\n        {\n            key: \"mana\",\n            layer: \"two\",\n            clone:  'healthbar', //Use the settings from another config\n            params: [\"{SCENE}\", 0, 0, 'mana']\n        },\n    ]\n}\n\nexport default LayoutTwo;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhavrick%2Fphaser3-phorge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhavrick%2Fphaser3-phorge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhavrick%2Fphaser3-phorge/lists"}