{"id":16236124,"url":"https://github.com/blopa/top-down-react-phaser-game-template","last_synced_at":"2025-10-11T21:17:00.671Z","repository":{"id":42010289,"uuid":"425262845","full_name":"blopa/top-down-react-phaser-game-template","owner":"blopa","description":null,"archived":false,"fork":false,"pushed_at":"2023-12-05T00:01:01.000Z","size":17399,"stargazers_count":51,"open_issues_count":3,"forks_count":8,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-17T08:44:06.738Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://blopa.github.io/top-down-react-phaser-game-template/","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/blopa.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":"2021-11-06T14:20:43.000Z","updated_at":"2025-03-02T06:40:36.000Z","dependencies_parsed_at":"2024-10-27T20:55:29.092Z","dependency_job_id":"1c0ce8f8-7cfc-4c4a-9461-f3359c797562","html_url":"https://github.com/blopa/top-down-react-phaser-game-template","commit_stats":null,"previous_names":[],"tags_count":3,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blopa%2Ftop-down-react-phaser-game-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blopa%2Ftop-down-react-phaser-game-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blopa%2Ftop-down-react-phaser-game-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blopa%2Ftop-down-react-phaser-game-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blopa","download_url":"https://codeload.github.com/blopa/top-down-react-phaser-game-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244453777,"owners_count":20455281,"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":"2024-10-10T13:29:06.573Z","updated_at":"2025-10-11T21:16:55.620Z","avatar_url":"https://github.com/blopa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Top-Down Phaser Game with React UI Template\r\n\r\nThis project is based on a Medium post: https://javascript.plainenglish.io/i-made-a-top-down-game-version-of-my-blog-with-phaser-and-react-faf5c28cf768\r\n\r\n\u003cimg src=\"/source_files/game_sample.gif?raw=true\" width=\"890px\" /\u003e\r\n\r\n## Try it out: https://blopa.github.io/top-down-react-phaser-game-template/\r\n\r\n# Key Features\r\n- Built with Create React App\r\n- Uses Phaser 3 for game engine\r\n- State management with Zustand\r\n- UI with Material UI and React 18\r\n- CSS Modules\r\n- Uses functional programming style\r\n- Arcade physics\r\n- Automatically resizes game to fit browser window\r\n- Automatically loads Tilesets and assets\r\n- Generates atlas sheets with included script\r\n- Adjustable tile sizes\r\n- Integrates Phaser and React through Zustand\r\n- Dialog system (React-based)\r\n- Game menu (React-based)\r\n- Virtual Gamepad for mobile devices (React-based)\r\n- Includes 2D assets from Kenney.nl\r\n\r\n# How to Use\r\n\r\n## Load Scene Files\r\nThe `getScenesModules` function uses Webpack's [require.context](https://webpack.js.org/guides/dependency-management/#requirecontext) to load all `.js` and `.ts` files from the `/src/assets/games/scenes` directory. Simply add your game scenes there to have them loaded into the game.\r\n\r\nThe first scene loaded by Phaser JS is the one defined in the `constants.js` file, in the `BOOT_SCENE_NAME` variable.\r\n\r\n## Functional Programming\r\nScene code can be written in a functional style for improved readability, by exporting functions instead of using the `Phaser.Scene` class.\r\n\r\n```javascript\r\n// Export scene using class-based approach\r\nexport default class BootScene extends Scene {\r\n    constructor() {\r\n        super('BootScene');\r\n    }\r\n\r\n    preload() {\r\n        this.load.image('background', background);\r\n    }\r\n\r\n    create() {\r\n        this.add.image(100, 100, 'background');\r\n    }\r\n}\r\n```\r\n\r\n```javascript\r\n// Export scene in functional approach\r\nexport const scene = {};\r\n\r\nexport const key = 'BootScene';\r\n\r\nexport function preload() {\r\n    scene.load.image('background', background);\r\n}\r\n\r\nexport function create() {\r\n    scene.add.image(100, 100, 'background');\r\n}\r\n```\r\n\r\nThe exported `scene` object will have all the helper functions of `Phaser.Scene`. While it can still be accessed with `this`, the functional approach is designed to improve code readability.\r\n\r\nThis \"magic\" is made possible by the `prepareScene` function.\r\n\r\n## Maps\r\nTo use Tiled maps, add your Tiled tilesets JSON and images to `/src/assets/tilesets` and your Tiled maps to `/src/assets/maps`. Then start the `LoadAssetsScene` like this:\r\n\r\n```javascript\r\nthis.scene.start('LoadAssetsScene', {\r\n    nextScene: 'GameScene', // Scene to load after assets are loaded\r\n    assets: {\r\n        mapKey: 'sample_map', // Map name, e.g. sample_map.json\r\n    },\r\n});\r\n```\r\n\r\nAny tilesets used in your `sample_map.json` will be automatically loaded from the `/src/assets/tilesets` directory, as long as they are located there.\r\n\r\n## Other assets\r\nTo load other assets such as images, fonts, or atlases, call the `LoadAssetsScene` with the following parameters:\r\n\r\n```javascript\r\nthis.scene.start('LoadAssetsScene', {\r\n    nextScene: 'GameScene', // scene to be loaded after the assets are loaded\r\n    assets: {\r\n        fonts: ['\"Press Start 2P\"'], // fonts to be loaded\r\n        atlases: ['hero'], // atlases to be loaded, must be in `/src/assets/atlases/generated/` as hero.json and hero.png\r\n        images: ['background'], // images to be loaded, must be in `/src/assets/images` as background.png\r\n    },\r\n});\r\n```\r\n\r\n## The 'GameScene'\r\nThe `GameScene` file is where the game map is rendered, along with all items, enemies, etc. The `create` function is split into smaller functions for easier readability, which can be found in the `sceneHelpers.js` file.\r\n\r\n## Virtual Gamepad\r\nThe virtual gamepad will be automatically loaded when the game is run on a mobile device. The virtual gamepad is a React component that simulates keyboard keys to control the game, using the `simulateKeyEvent` function found in this [GitHub Gist](https://gist.github.com/GlauberF/d8278ce3aa592389e6e3d4e758e6a0c2).\r\n\r\n## Dialog System\r\nA dialog box will appear automatically whenever the `state.dialog.messages` variable is populated with messages. To accomplish this, you can call the `setDialogMessagesAction` Zustand setter function.\r\n\r\n```javascript\r\nsetDialogMessages(['hello world', 'hello world 2']);\r\n```\r\n\r\n# Assets by Kenney.nl:\r\n- https://www.kenney.nl/assets/rpg-urban-pack\r\n- https://www.kenney.nl/assets/roguelike-rpg-pack\r\n- https://www.kenney.nl/assets/pixel-platformer\r\n- https://www.kenney.nl/assets/onscreen-controls\r\n- https://www.kenney.nl/assets/background-elements-redux\r\n- https://kenney.itch.io/creature-mixer\r\n\r\n# License\r\nMIT License\r\n\r\nCopyright (c) 2023 Pablo\r\n\r\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\r\n\r\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\r\n\r\n**Free Software, Hell Yeah!**\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblopa%2Ftop-down-react-phaser-game-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblopa%2Ftop-down-react-phaser-game-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblopa%2Ftop-down-react-phaser-game-template/lists"}