{"id":24894805,"url":"https://github.com/ziao/phaser3-interim-containers","last_synced_at":"2025-10-16T10:30:40.801Z","repository":{"id":57322901,"uuid":"121973643","full_name":"Ziao/phaser3-interim-containers","owner":"Ziao","description":"Basic Interim Containers for Phaser 3.0.0 and up, until Containers officially land.","archived":false,"fork":false,"pushed_at":"2018-08-05T14:42:06.000Z","size":17,"stargazers_count":6,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2023-09-20T07:31:31.520Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/phaser3-interim-containers","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/Ziao.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}},"created_at":"2018-02-18T17:29:54.000Z","updated_at":"2018-11-27T17:22:50.000Z","dependencies_parsed_at":"2022-09-10T18:22:15.910Z","dependency_job_id":null,"html_url":"https://github.com/Ziao/phaser3-interim-containers","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ziao%2Fphaser3-interim-containers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ziao%2Fphaser3-interim-containers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ziao%2Fphaser3-interim-containers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ziao%2Fphaser3-interim-containers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ziao","download_url":"https://codeload.github.com/Ziao/phaser3-interim-containers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236706752,"owners_count":19192045,"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":[],"created_at":"2025-02-01T19:14:40.809Z","updated_at":"2025-10-16T10:30:35.506Z","avatar_url":"https://github.com/Ziao.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"## WARNING: This project is now deprecated as official Containers are now a thing. See [this post](https://phaser.io/phaser3/devlog/120)\n\n# Interim Containers for Phaser 3\n\n### Basic containers for Phaser 3 until they officially land.\n\n[Phaser 3](https://github.com/photonstorm/phaser) has officially been released, but due to time constrains, some features have been left for now. One of the most important features that I am missing is Containers. They are similar to groups, but they allow you to manipulate them as if they were a sprite. For example, you can set their alpha, rotation, position, etc. Groups are mainly aimed at organizing your sprites, and do not have these features.\n\nThis repository will be marked as deprecated as soon as Phaser launches their version of Containers, which will no doubt be superior.\nCode was written in old-school javascript as much as possible, to avoid the need for transpiling.\n\n\n### Prerequisites\n\nInterim Containers expects the Phaser object to be available globally. This only works with Phaser 3.0.0 and up (tested up to 3.1.0).\n\n### Installing\n\nNPM\n\n```\nnpm install --save phaser3-interim-containers\n```\n\nYarn\n\n```\nyarn add phaser3-interim-containers\n```\n\nBower (you should move to yarn)\n\n```\nbower install phaser3-interim-containers\n```\n\nStoneage\n\n```\nSimply download the index.js file and include it in your HTML file.\n```\n\n\n### Usage\n\nInterim Containers function very similar to Groups, with two important gotcha's:\n- You must use addChild() or createChild() on the Container, instead of add() and create(). They behave exactly as you'd expect. This is due to the way Phaser's Class system and inheritance works. I couldn't find a clean way to inject my own code there.\n- Use `child._containerProps.property` instead of directly changing a child's properties.\n\nSupported properties for both the Container and che children (please update this list when submitting a PR):\n- x\n- y\n- alpha (it's currently impossible to implement this correctly. Eg: setting the container to 0.5 will render all the children at 0.5, making them see-through when overlapping)\n- rotation\n- scale\n- flipX\n- flipY\n\nStarting at 1.2.0, you are able to provide a list of properties that will be watched using the watch option. Please see the example. Doing so will increase the performance of containers that are updated all the time (for example, using tweens).\nIf you do not provide this option, all supported properties will be watched.\n\n### Example\n\n``` js\n\nvar container, sprite1, sprite2;\n\nnew Phaser.Game({\n\tscene: {\n\t\tcreate: function(){\n\n\t\t\t//Creating a container (options are optional)\n\t\t\tcontainer = this.add.container({\n\t\t\t\tx:100, \n\t\t\t\ty: 50, \n\t\t\t\talpha: 0.9, \n\t\t\t\trotation: 1.3, \n\t\t\t\twatch: ['x', 'y', 'rotation','alpha']\n\t\t\t});\n\n\t\t\t//Create a sprite directly on the container, just as you would with group.create\n\t\t\tsprite1 = container.createChild(200, 200, 'spaceship');\n\n\t\t\tsprite2 = this.add.sprite(200, 200, 'spaceship');\n\t\t\tcontainer.addChild(sprite2);\n\n\t\t},\n\n\t\tupdate: function(delta){\n\n\t\t\t//These are all supported - they don't all make sense in this context though ;)\n\t\t\tcontainer.x += 10;\n\t\t\tcontainer.y += 10;\n\t\t\tcontainer.alpha -= 0.01;\n\t\t\tcontainer.rotation += 0.01;\n\t\t\tcontainer.scale += 0.01;\n\n\t\t\t// You can also alter the children directly and \n\t\t\t// everything will work out.\n\t\t\t// However, since their properties are overwritten \n\t\t\t// as soon as you update the container, you'll have\n\t\t\t// to alter the properties on the _containerProps \n\t\t\t// object (which is automatically added for you by the container):\n\t\t\t// All of these values are relative to the container.\n\n\t\t\tsprite1._containerProps.rotation -= -0.1;\n\t\t\tsprite1._containerProps.x = 100;\n\t\t\tsprite1._containerProps.y = 50;\n\n\t\t}\n\t}\n});\n\n```\n\n## Todo\n\n- Example code could use some work\n- Support more properties\n- Find a clean way to support changing values on Sprites directly, without breaking or littering everything (consider defineProperty on them, as long as I'm good about cleaning them later)\n- Confirm that Tweens work -\u003e Done. They work fine!\n- Nested containers\n\n## Contributing\n\nFeel free to submit a pull request or open an issue with suggestions or ideas.\n\n## License\n\nThis project is licensed under the MIT License\n\n## Credits\n\nCreated by Nick Kamer, Ziao on Github, or \u003cnick@ziaomedia.com\u003e. Huge shoutout to the guys at [Photonstorm](https://github.com/photonstorm) for creating this awesome framework!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fziao%2Fphaser3-interim-containers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fziao%2Fphaser3-interim-containers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fziao%2Fphaser3-interim-containers/lists"}