{"id":22012339,"url":"https://github.com/miracleAI-Lab/mai3-phaser-sdk","last_synced_at":"2025-07-23T08:32:47.080Z","repository":{"id":258100404,"uuid":"859630824","full_name":"miracleAI-Lab/mai3-phaser-sdk","owner":"miracleAI-Lab","description":"A UI component library based on the Phaser game engine","archived":false,"fork":false,"pushed_at":"2024-10-30T08:55:19.000Z","size":10813,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-30T10:03:03.916Z","etag":null,"topics":["mai3","phaser-ui","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/miracleAI-Lab.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":"2024-09-19T02:20:22.000Z","updated_at":"2024-10-30T08:55:23.000Z","dependencies_parsed_at":"2024-10-30T10:03:13.035Z","dependency_job_id":"8cacf05c-53ec-4c6b-a5aa-1fe98a9f81b5","html_url":"https://github.com/miracleAI-Lab/mai3-phaser-sdk","commit_stats":null,"previous_names":["miracleai-lab/mai3-phaser-ui","miracleai-lab/mai3-phaser-sdk"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miracleAI-Lab%2Fmai3-phaser-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miracleAI-Lab%2Fmai3-phaser-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miracleAI-Lab%2Fmai3-phaser-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miracleAI-Lab%2Fmai3-phaser-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miracleAI-Lab","download_url":"https://codeload.github.com/miracleAI-Lab/mai3-phaser-sdk/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227181669,"owners_count":17744011,"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":["mai3","phaser-ui","typescript"],"created_at":"2024-11-30T03:12:00.586Z","updated_at":"2024-11-30T03:12:01.392Z","avatar_url":"https://github.com/miracleAI-Lab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mai3-phaser-sdk - Phaser 3 UI Components Library\n\n**mai3-phaser-sdk** is a highly customizable and reusable UI component library designed specifically for the **Phaser 3** game engine. With this library, developers can quickly create and integrate essential UI elements like buttons, sliders, dialogs, and more into Phaser-based games, reducing the complexity of UI implementation and allowing more focus on gameplay.\n\n## Key Features\n\n- **Phaser 3 Compatibility**: Fully compatible with Phaser 3.8+.\n- **Customizable Components**: Provides out-of-the-box UI components such as buttons, sliders, checkboxes, dialogs, and more.\n- **TypeScript Support**: Includes TypeScript types for a better development experience.\n- **Flexible Event Handling**: Easy-to-use event handlers for interactions like clicks, hovers, and value changes.\n- **Responsive Design**: Adaptable UI elements that work across different screen sizes and game layouts.\n\n## Supported Components\n\n- ✅ Checkbox\n- ✅ CheckboxGroup\n- ✅ Container\n- ✅ Dialog\n- ✅ Grid\n- ✅ LinearLayout\n- ✅ Image\n- ✅ ImageButton\n- ✅ Label\n- ✅ ProgressBar\n- ✅ RoundedButton\n- ✅ Slider\n- ✅ Tabs\n- ✅ Text\n- ✅ TextBox\n- ✅ TextButton\n- ✅ Toast\n- ✅ VolumeSlider\n- ✅ Sprite\n- ✅ ScrollView\n- ✅ ListView\n\n## future implementation:\n\n- 🚧 FloatButton\n- 🚧 Divider\n- 🚧 Flex\n- 🚧 Space\n- 🚧 Splitter\n- 🚧 Dropdown\n- 🚧 Menu\n- 🚧 Pagination\n- 🚧 ColorPicker\n- 🚧 Form\n- 🚧 InputNumber\n- 🚧 Rate\n- 🚧 Avatar\n- 🚧 Badge\n- 🚧 Card\n- 🚧 Carousel\n- 🚧 Popover\n- 🚧 Table\n- 🚧 Tooltip\n- 🚧 Alert\n- 🚧 QRCode\n- 🚧 Segmented\n- 🚧 Tree\n\n\n## Installation\n\nInstall **mai3-phaser-sdk** via npm or yarn:\n\n```bash\nnpm install @mai3/phaser-sdk\n# or\nyarn add @mai3/phaser-sdk\n```\n\n## Usage Example\n\nHere’s a quick example of how to create different types of buttons using the **mai3-phaser-sdk** library:\n\n```typescript\nimport { BaseScene, Mai3Game, Mai3Plugin } from \"@mai3/phaser-sdk\";\n\nexport class ButtonDemo extends BaseScene {\n\n  constructor() {\n    super('ButtonDemo');\n  }\n  \n  preload() {\n    super.preload();\n  }\n\n  create() {\n    this.createButtons();\n  }\n\n  private createButtons() {\n    this.createTextButton();\n    this.createDraggableButton();\n    this.createRoundedButton();\n    this.createImageButton();\n  }\n\n  private createTextButton() {\n    this.mai3.add.textButton({\n      x: 10,\n      y: 70,\n      width: 200,\n      height: 80,\n      borderColor: 0x900C3F,\n      borderWidth: 3,\n      backgroundColor: 0xC70039,\n      text: \"Close Window\",\n      radius: 20,\n      textStyle: {\n        fontFamily: 'Arial',\n        fontSize: '24px',\n        color: '#FFFFFF',\n      },\n      handleHover: {\n        audio: \"sfx-hover\",\n      },\n      handleDown: {\n        audio: \"sfx-press\",\n      },\n      handleUp: {\n        handleFn: () =\u003e {\n          // Add action for handleUp if needed\n        }\n      },\n    });\n  }\n\n  private createDraggableButton() {\n    const btn = this.mai3.add.textButton({\n      x: 220,\n      y: 70,\n      borderColor: 0xFF5733,\n      borderWidth: 3,\n      backgroundColor: 0xFFC300,\n      text: \"Mai3 (Draggable)\",\n      radius: 20,\n      textStyle: {\n        fontFamily: 'Arial',\n        fontSize: '24px',\n        color: '#000000',\n      },\n      handleHover: {\n        audio: \"sfx-hover\",\n      },\n      handleDown: {\n        audio: \"sfx-press\",\n        handleFn: () =\u003e {\n          btn.text = \"Hello There\";\n        }\n      },\n      enableDrag: true\n    });\n  }\n\n  private createRoundedButton() {\n    this.mai3.add.roundedButton({\n      x: 430,\n      y: 70,\n      radius: 100,\n      texture: \"cangshu\",\n      borderWidth: 6,\n      borderColor: 0xFFD700,\n      backgroundColor: 0x32CD32,\n      handleHover: {\n        audio: \"sfx-hover\"\n      },\n      handleDown: {\n        audio: \"sfx-press\",\n        handleFn: () =\u003e {\n          // Add action for handleDown if needed\n        }\n      },\n    });\n  }\n\n  private createImageButton() {\n    this.mai3.add.imageButton({\n      x: 10,\n      y: 160,\n      width: 160,\n      height: 60,\n      texture: \"StartGameButton\",\n      borderWidth: 3,\n      handleHover: {\n        audio: \"sfx-hover\",\n        texture: \"StartGameButtonHover\",\n      },\n      handleOut: {\n        texture: \"StartGameButton\",\n      },\n      handleDown: {\n        audio: \"sfx-press\",\n        texture: \"StartGameButtonDown\",\n        handleFn: () =\u003e {\n          console.log(\"Button pressed\");\n        }\n      },\n      handleUp: {\n        texture: \"StartGameButton\",\n        handleFn: () =\u003e {\n          console.log(\"Button released\");\n        }\n      },\n    });\n  }\n}\n\nconst config = getGameConfig();\nconst game = Mai3Game.Init(config);\ngame.scene.add('ButtonDemo', ButtonDemo, true);\n\n//==== config.ts ====\nexport function getGameConfig() {\n  const config: Phaser.Types.Core.GameConfig = {\n    type: Phaser.AUTO,\n    backgroundColor: '#00746b',\n    scale: {\n      width: 960,\n      height: 1280,\n      mode: Phaser.Scale.FIT,\n      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY\n    },\n    dom: {\n      createContainer: true\n    },\n    parent: 'root',\n    physics: {\n      default: 'arcade',\n      arcade: {\n        debug: true,\n        gravity: { x: 0, y: 0 }\n      }\n    },\n  };\n\n  return config;\n}\n```\n\nThis example demonstrates how to integrate different types of buttons, including text, draggable, rounded, and image buttons, all fully customizable through the **mai3-phaser-sdk** library.\n\n## Live Demos\n\nYou can explore various **mai3-phaser-sdk** components by following these steps:\n\n```bash\n# Clone the repository\ngit clone https://github.com/miracleAI-Lab/mai3-phaser-sdk\n\ncd mai3-phaser-sdk\n\nyarn install\n\nyarn build\n\n# Navigate to the examples directory\ncd examples\n\nyarn install\n\n\nyarn start\n```\n\n## Contribution\n\nWe welcome contributions! If you’d like to help improve **mai3-phaser-sdk**, feel free to submit issues or pull requests on our [GitHub repository](https://github.com/miracleAI-Lab/mai3-phaser-sdk).\n\n## License\n\nThis project is licensed under the MIT License. For details, check the [LICENSE](https://github.com/miracleAI-Lab/mai3-phaser-sdk/blob/main/LICENSE) file.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FmiracleAI-Lab%2Fmai3-phaser-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FmiracleAI-Lab%2Fmai3-phaser-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FmiracleAI-Lab%2Fmai3-phaser-sdk/lists"}