{"id":13624527,"url":"https://github.com/jsfehler/phaser-ui-tools","last_synced_at":"2025-04-05T02:04:59.881Z","repository":{"id":21334687,"uuid":"92358199","full_name":"jsfehler/phaser-ui-tools","owner":"jsfehler","description":"UI Kit for the Phaser game engine. Rows, columns, viewports, scrollbars, stuff like that.","archived":false,"fork":false,"pushed_at":"2024-08-31T01:41:44.000Z","size":5256,"stargazers_count":274,"open_issues_count":4,"forks_count":24,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-29T01:03:51.415Z","etag":null,"topics":["healthbar","javascript","phaser","phaser-ce","phaser-ui","phaser3","phaserjs","scrollbar","scrollbars","ui","user-interface"],"latest_commit_sha":null,"homepage":"","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/jsfehler.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-25T02:50:53.000Z","updated_at":"2025-03-12T01:33:12.000Z","dependencies_parsed_at":"2024-11-16T17:34:16.599Z","dependency_job_id":null,"html_url":"https://github.com/jsfehler/phaser-ui-tools","commit_stats":{"total_commits":425,"total_committers":7,"mean_commits":"60.714285714285715","dds":0.4188235294117647,"last_synced_commit":"f3306cf9aa5e95ea746001e8c48448d24c9c4af4"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsfehler%2Fphaser-ui-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsfehler%2Fphaser-ui-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsfehler%2Fphaser-ui-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsfehler%2Fphaser-ui-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsfehler","download_url":"https://codeload.github.com/jsfehler/phaser-ui-tools/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276163,"owners_count":20912288,"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":["healthbar","javascript","phaser","phaser-ce","phaser-ui","phaser3","phaserjs","scrollbar","scrollbars","ui","user-interface"],"created_at":"2024-08-01T21:01:43.503Z","updated_at":"2025-04-05T02:04:59.841Z","avatar_url":"https://github.com/jsfehler.png","language":"JavaScript","readme":"# Phaser UI Tools\r\n\r\n[![Build Status](https://github.com/jsfehler/phaser-ui-tools/workflows/test-phaser-3/badge.svg)](https://github.com/jsfehler/phaser-ui-tools/actions/workflows/test-phaser-3.yml)\r\n\r\n[![Build Status](https://github.com/jsfehler/phaser-ui-tools/workflows/test-phaser-ce/badge.svg)](https://github.com/jsfehler/phaser-ui-tools/actions/workflows/test-phaser-ce.yml)\r\n\r\n\r\nI really wanted a viewport with a scrollbar. Things escalated.\r\n\r\n![scrollbar](https://raw.githubusercontent.com/jsfehler/phaser-ui-tools/master/assets/diagram.png)\r\n\r\n### Documentation\r\nhttps://jsfehler.github.io/phaser-ui-tools/\r\n\r\n### References\r\nScrollbar math:\r\nhttp://csdgn.org/article/scrollbar\r\n\r\n\r\n### Getting Started\r\n\r\n#### Using NPM\r\nOn the command line, type:\r\n```\r\nnpm i phaser-ui-tools\r\n```\r\n\r\nThe objects are now available via import:\r\n```\r\nimport { Column } from 'phaser-ui-tools';\r\n\r\nvar column = new Column(...)\r\n\r\n```\r\n\r\n####  Adding the file directly to your project\r\nGet phaser-ui-tools.js from the releases and add it to your project's index.html.\r\nIt should look something like:\r\n```\r\n\u003cscript src=\"lib/phaser-ui-tools.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\nThe objects can now be used directly:\r\n\r\n```\r\nvar column = new uiWidgets.Column(...)\r\n```\r\n\r\n\r\n### The Tools\r\n\r\n#### Text Overlays\r\n\r\n##### TextSprite\r\nA sprite that can have text on top.\r\n\r\nText is added with the setText() method.\r\n\r\n```javascript\r\nvar textSprite = new uiWidgets.TextSprite(\r\n    game, x, y, key,\r\n);\r\ntextSprite.setText(label, style);\r\n```\r\n\r\n##### TextButton\r\nA button that can have text on top.\r\n\r\nText is added with the setText() method.\r\n\r\n```javascript\r\nvar textButton = new uiWidgets.TextButton(\r\n    game, x, y, key, callback, callbackContext, overKey, outKey, downKey, upKey,\r\n);\r\ntextButton.setText(label, style);\r\n```\r\n\r\n##### Examples\r\n\r\n###### Phaser CE\r\n[Header \u0026 Buttons](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaserce/textover.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaserce/textover.js)\r\n\r\n###### Phaser 3\r\n[Header \u0026 Buttons](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaser3/textover.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaser3/textover.js)\r\n\r\n#### Containers\r\n\r\n##### Column\r\n\r\nColumns are Phaser Groups where each child added to the group is placed directly under the previous child. If an object can be a child of a Group, it can likewise be in a Column.\r\n\r\n![column](https://raw.githubusercontent.com/jsfehler/phaser-ui-tools/master/assets/diagram_column.png)\r\n```javascript\r\nvar column = new uiWidgets.Column(game, 8, 8);\r\ncolumn.addNode(sprite_a, 8, 8);\r\ncolumn.addNode(sprite_b, 8, 8);\r\ncolumn.addNode(sprite_c, 8, 8);\r\n```\r\n\r\n##### Row\r\n\r\nRows are Phaser Groups where each child added to the group is placed directly next to the previous child. If an object can be a child of a Group, it can likewise be in a Row.\r\n\r\n![row](https://raw.githubusercontent.com/jsfehler/phaser-ui-tools/master/assets/diagram_row.png)\r\n```javascript\r\nvar row = new uiWidgets.Row(game, 8, 8);\r\nrow.addNode(sprite_a, 8, 8);\r\nrow.addNode(sprite_b, 8, 8);\r\nrow.addNode(sprite_c, 8, 8);\r\n```\r\n\r\n##### Viewport\r\nViewports are Phaser Groups where the children in the group are only visible if they're within the viewport's area.\r\nIf an object can be a child of a Group, it can likewise be in a Viewport.\r\n\r\nViewports can be combined with a Scrollbar to create a scrollable display.\r\n\r\nPlacing a Column or Row inside a Viewport is a simple way to align content.\r\n\r\n```javascript\r\nvar viewport = new uiWidgets.Viewport(game, 75, 75, 600, 260);\r\nviewport.addNode(column);\r\n```\r\n\r\n#### Bars\r\n\r\n##### Scrollbar\r\nScrollbars are used to move the objects in a Viewport. They must be used with a Viewport.\r\nA tweening duration and easing can be specified. This will be triggered when moving the bar.\r\n\r\n```javascript\r\nvar scrollbar = new uiWidgets.Scrollbar(\r\n    game,\r\n    viewport,\r\n    true,\r\n    true,\r\n    true,\r\n    trackImage,\r\n    barImage,\r\n    {'duration': 300, 'ease': Phaser.Easing.Quadratic.Out}\r\n);\r\n```\r\n\r\n##### Examples\r\n\r\n###### Phaser CE\r\n\r\n[Vertical](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaserce/vscrollbar.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaserce/vscrollbar.js)\r\n\r\n[Horizontal](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaserce/hscrollbar.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaserce/hscrollbar.js)\r\n\r\n###### Phaser 3\r\n\r\n[Vertical](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaser3/vscrollbar.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaser3/vscrollbar.js)\r\n\r\n[Horizontal](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaser3/hscrollbar.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaser3/hscrollbar.js)\r\n\r\n\r\n##### ValueBar\r\nValuebars are like Scrollbars, but instead of moving content, they increase/decrease a number.\r\nValuebars always have a minimum number of 0, but the starting and maximum number can be set.\r\nA tweening duration and easing can be specified. This will be triggered when moving the bar.\r\n\r\n![valuebar](https://raw.githubusercontent.com/jsfehler/phaser-ui-tools/master/assets/diagram_valuebar.png)\r\n\r\n```javascript\r\nvar valuebar = new uiWidgets.ValueBar(\r\n    game,\r\n    {'x': 50, 'y': 10},\r\n    {'step': 1, 'startValue': 0, 'maxValue': 100},\r\n    true,\r\n    false,\r\n    true,\r\n    trackImage,\r\n    barImage,\r\n    {'duration': 100, 'ease': Phaser.Easing.Quadratic.Out}\r\n);\r\n```\r\n\r\n##### Examples\r\n\r\n###### Phaser CE\r\n\r\n[ValueBar](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaserce/valuebar.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaserce/valuebar.js)\r\n\r\n[Multiple ValueBar inside a Column, with background image and keyboard events](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaserce/valuebar_column.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaserce/valuebar_column.js)\r\n\r\n###### Phaser 3\r\n\r\n[ValueBar](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaser3/valuebar.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaser3/valuebar.js)\r\n\r\n\r\n##### QuantityBar\r\nQuantityBars do not adjust a value, they get adjusted by a value. The bar grows and shrinks based on a value.\r\nThey can be used for health bars, stamina bars, etc.\r\nA tweening duration and easing can be specified. This will be triggered when moving the bar.\r\n\r\n![quantitybar](https://raw.githubusercontent.com/jsfehler/phaser-ui-tools/master/assets/diagram_quantitybar.png)\r\n\r\n```javascript\r\nvar quantitybar = new uiWidgets.QuantityBar(\r\n    game,\r\n    {'x': 50, 'y': 10},\r\n    {'startValue': 50, 'maxValue': 100},\r\n    false,\r\n    false,\r\n    trackImage,\r\n    barImage,\r\n    {'duration': 400, 'ease': Phaser.Easing.Quadratic.Out}\r\n);\r\n```\r\n\r\n##### Examples\r\n\r\n###### Phaser CE\r\n\r\n[QuantityBar](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaserce/quantitybar.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaserce/quantitybar.js)\r\n\r\n###### Phaser 3\r\n\r\n[QuantityBar](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaser3/quantitybar.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaser3/quantitybar.js)\r\n\r\n\r\n#### Wheel3D\r\nA collection of sprites that are arranged around a three dimensional wheel.\r\nThe wheel can be adjusted and rotated along the x, y, or z axis.\r\n\r\n![wheel3D](https://raw.githubusercontent.com/jsfehler/phaser-ui-tools/master/assets/diagram_wheel3D.png)\r\n\r\n```javascript\r\nvar wheel = new uiWidgets.Wheel3D(\r\n    game,\r\n    {\"x\": game.world.centerX - 100, \"y\": game.world.centerY},\r\n    [sprite1, sprite2, sprite3, sprite4],\r\n    0,\r\n    90,\r\n    \"y\",\r\n    {\"x\":0, \"y\": 0, \"z\": 0}\r\n);\r\n```\r\n\r\n##### Examples\r\n\r\n###### Phaser CE\r\n\r\n[Wheel3D](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaserce/wheel3D.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaserce/wheel3D.js)\r\n\r\n###### Phaser 3\r\n\r\n[Wheel3D](https://jsfehler.github.io/phaser-ui-tools/examples/html/phaser3/wheel3D.html) | [Code](https://jsfehler.github.io/phaser-ui-tools/examples/js/phaser3/wheel3D.js)\r\n","funding_links":[],"categories":["javascript","ui"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsfehler%2Fphaser-ui-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsfehler%2Fphaser-ui-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsfehler%2Fphaser-ui-tools/lists"}