{"id":14964013,"url":"https://github.com/xense/phaser-ui-comps","last_synced_at":"2025-10-25T03:31:17.467Z","repository":{"id":34480255,"uuid":"179108010","full_name":"xense/phaser-ui-comps","owner":"xense","description":"Phaser 3 UI Components built by Adobe Animate","archived":false,"fork":false,"pushed_at":"2022-12-10T17:07:47.000Z","size":1483,"stargazers_count":62,"open_issues_count":18,"forks_count":8,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-01-31T05:33:30.989Z","etag":null,"topics":["adobe-animate","animate","flash","jsfl","phaser","phaser-framework","phaser-plugin","phaser3","phaserio","ui","ui-builder","ui-components","user-interface"],"latest_commit_sha":null,"homepage":"https://xense.github.io/phaser-ui-comps-docs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xense.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-02T15:32:49.000Z","updated_at":"2025-01-13T06:24:55.000Z","dependencies_parsed_at":"2023-01-15T07:20:34.638Z","dependency_job_id":null,"html_url":"https://github.com/xense/phaser-ui-comps","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xense%2Fphaser-ui-comps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xense%2Fphaser-ui-comps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xense%2Fphaser-ui-comps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xense%2Fphaser-ui-comps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xense","download_url":"https://codeload.github.com/xense/phaser-ui-comps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238075262,"owners_count":19412304,"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":["adobe-animate","animate","flash","jsfl","phaser","phaser-framework","phaser-plugin","phaser3","phaserio","ui","ui-builder","ui-components","user-interface"],"created_at":"2024-09-24T13:32:28.150Z","updated_at":"2025-10-25T03:31:12.143Z","avatar_url":"https://github.com/xense.png","language":"JavaScript","readme":"Phaser 3 UI Components, built by Adobe Animate\n----\n\u003ch3\u003eWhat is it?\u003c/h3\u003e\nBuild your UI in [Abode Animate](https://www.adobe.com/ru/products/animate.html), \nexport to JSON and bitmaps with provided \n[JSFL script](https://github.com/xense/phaser-ui-comps/blob/master/jsfl/ExportToPhaser.jsfl) \n, and you can forget about lots of positioning magic numbers in your code.\n\n`ComponentClip` build itself with provided JSON and atlases, \nand `UIComponentPrototype` Will help to control them, switch states, \nlisten to click, drag and other events.\n\nIn addition, `UIComponentPrototype` and it's children classes don't mind, \nif they have a real clip instance in current state or at all,\nso nothing bad happens, for example, if you remove some button instance in your window in \nAnimate document and keep it's `UIComponentPrototype` instance.\n\nAll bitmaps are exported to png files with the same folder structure \nas in the Animate document library. Pack them to atlases using\n[TexturePacker](https://www.codeandweb.com/texturepacker) or other tool you like.\n\n\u003ch3\u003eWhere and how to use?\u003c/h3\u003e\n\n[Main framework repo](https://github.com/xense/phaser-ui-comps)\n\n[Docs, tutorials, examples](https://xense.github.io/phaser-ui-comps-docs)\n\n[Live example](https://xense.github.io/phaser-ui-comps-docs/tutorial-showcase.html)\n\n[Issues, bugs, new components ideas](https://github.com/xense/phaser-ui-comps/issues)\n\n[Animate document example](https://github.com/xense/phaser-ui-comps-docs/raw/master/examples/xfl/UI.fla)\n\n\u003ch4\u003eExport Animate document\u003c/h4\u003e\nTo run JSFL script in Animate select `Commands \u003e Run Command`, \nnavigate to the script, and click Open.\n\n\u003ch3\u003eHow to install?\u003c/h3\u003e\n\nTo install the latest version from \n[npm](https://www.npmjs.com)\nlocally and save it in your `package.json` file:\n```bash\nnpm install --save phaser-ui-comps\n```\nor if you are using [yarn](https://yarnpkg.com)\n```bash\nyarn add phaser-ui-comps\n```\n\nOr you can download minified version from \n[https://github.com/xense/phaser-ui-comps/tree/master/dist](https://github.com/xense/phaser-ui-comps/tree/master/dist)\n\nOr use [jsdelivr cdn](https://www.jsdelivr.com/) version\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/phaser-ui-comps@1.0.6/dist/phaser-ui-comps-with-underscore.min.js\"\u003e\u003c/script\u003e\n``` \n\n*Note!*\n*PhaserComps uses [underscore.js](https://underscorejs.org/)\nThere are two builds in the /dist folder, \n[one](https://github.com/xense/phaser-ui-comps/blob/master/dist/phaser-ui-comps-with-underscore.min.js) \nwith underscore included and \n[other](https://github.com/xense/phaser-ui-comps/blob/master/dist/phaser-ui-comps.min.js) \nwithout it, so you need to load it before loading PhaserComps* \n\n\u003ch3\u003eSimple usage\u003c/h3\u003e\n\n```html\n\u003cscript src=\"path/to/scripts/phaser.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/scripts/phaser-ui-comps-with-underscore.min.js\"\u003e\u003c/script\u003e\n```\n\n```javascript\nconst COMPONENT_CONFIG = \"comp-config\";\nconst TEXTURE_CONFIG = \"my_texture\";\n\n\nvar game = new Phaser.Game({\n    type: Phaser.AUTO,\n    parent: \"phaser-example\",\n    width: 800,\n    height: 600,\n    scene: {\n        preload: preload,\n        create: create\n    }\n});\n\n\nfunction preload() {\n    this.load.json(COMPONENT_CONFIG, \"assets/my_component.json\");\n    this.load.multiatlas(TEXTURE_CONFIG, \"assets/atlases/my_atlas.json\", \"assets/atlases/\");\n}\n\nfunction create() {\n    let clip = new PhaserComps.ComponentClip(\n        this, \n        this.cache.json.get(COMPONENT_CONFIG), \n        [ TEXTURE_CONFIG ]\n    );\n    \n    let component = new PhaserComps.UIComponents.UIComponentPrototype();\n    component.appendClip(clip);\n}\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxense%2Fphaser-ui-comps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxense%2Fphaser-ui-comps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxense%2Fphaser-ui-comps/lists"}