{"id":14963965,"url":"https://github.com/yandeu/phaser-project-template","last_synced_at":"2025-04-05T20:08:08.662Z","repository":{"id":41145732,"uuid":"167690973","full_name":"yandeu/phaser-project-template","owner":"yandeu","description":"🕹️ Phaser 3 - Starter Template with TypeScript and webpack.","archived":false,"fork":false,"pushed_at":"2023-01-24T15:11:33.000Z","size":1982,"stargazers_count":417,"open_issues_count":3,"forks_count":81,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-29T19:06:12.737Z","etag":null,"topics":["html5-game","phaser","project-template","pwa","starter-template","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/yandeu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"yandeu"}},"created_at":"2019-01-26T13:19:59.000Z","updated_at":"2025-03-12T19:33:57.000Z","dependencies_parsed_at":"2023-01-29T03:30:55.091Z","dependency_job_id":null,"html_url":"https://github.com/yandeu/phaser-project-template","commit_stats":null,"previous_names":[],"tags_count":11,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yandeu%2Fphaser-project-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yandeu%2Fphaser-project-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yandeu%2Fphaser-project-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yandeu%2Fphaser-project-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yandeu","download_url":"https://codeload.github.com/yandeu/phaser-project-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393570,"owners_count":20931813,"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":["html5-game","phaser","project-template","pwa","starter-template","typescript","webpack"],"created_at":"2024-09-24T13:32:24.160Z","updated_at":"2025-04-05T20:08:08.645Z","avatar_url":"https://github.com/yandeu.png","language":"TypeScript","funding_links":["https://github.com/sponsors/yandeu"],"categories":["TypeScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://github.com/yandeu/phaser-project-template#readme\"\u003e\u003cimg src=\"readme/header.png\" alt=\"header\" width=\"600\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n  Phaser 3 TypeScript Starter Template\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003e\nA starter template for \u003ca href=\"https://phaser.io/\" target=\"_blank\" \u003ePhaser 3\u003c/a\u003e with \u003ca href=\"https://www.typescriptlang.org/index.html\" target=\"_blank\" \u003eTypeScript\u003c/a\u003e and \u003ca href=\"https://webpack.js.org/\" target=\"_blank\" \u003ewebpack\u003c/a\u003e for building excellent html5-games that work great in the browser and on mobile devices.\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\" title=\"License: MIT\" \u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-greenbright.svg?style=flat-square\"\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/github/package-json/v/yandeu/phaser-project-template.svg?style=flat-square\" alt=\"GitHub package.json version\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/last-commit/yandeu/phaser-project-template.svg?style=flat-square\" alt=\"GitHub last commit\"\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\" alt=\"code style: prettier\"\u003e\u003cimg src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#key-features\"\u003eKey Features\u003c/a\u003e •\n  \u003ca href=\"#preview\"\u003ePreview\u003c/a\u003e •\n  \u003ca href=\"#how-to-use\"\u003eHow To Use\u003c/a\u003e •\n  \u003ca href=\"#enable3d\"\u003eenable3d\u003c/a\u003e •\n  \u003ca href=\"#progressive-web-app-pwa\"\u003ePWA\u003c/a\u003e •\n  \u003ca href=\"#native-app\"\u003eNative App\u003c/a\u003e •\n  \u003ca href=\"#custom-configurations\"\u003eCustom Configurations\u003c/a\u003e •\n  \u003ca href=\"#es6\"\u003eES6\u003c/a\u003e •\n  \u003ca href=\"#useful-links\"\u003eUseful Links\u003c/a\u003e •\n  \u003ca href=\"#multiplayer-game\"\u003eMultiplayer Game\u003c/a\u003e •\n  \u003ca href=\"#examples\"\u003eExamples\u003c/a\u003e •\n  \u003ca href=\"#credits\"\u003eCredits\u003c/a\u003e •\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cblockquote align=\"center\"\u003e\n Want to use ES6 instead of TypeScript? Check out the \u003ca href=\"https://github.com/yandeu/phaser-project-template-es6#readme\" \u003ephaser-project-template-es6\u003c/a\u003e\n\u003c/blockquote\u003e\n\n---\n\n## Key Features\n\n- **ESNext** features ready (async/await, Rest/Spread operators)\n- Code Splitting\n- Obfuscation\n- Development Server with SourceMap and Live-Reload\n- PWA ready with offline support and \"Add to Home screen\" install prompt\n- Easy to build Native App using Capacitor\n- Includes Phaser 3 TypeScript typings\n- For development and production builds\n- Adds a webpack ContentHash to the JavaScript files (in production)\n\n## Preview\n\nThis is what you get after installing this template. A simple and clean starter template written in TypeScript. [Try it!](https://s3.eu-central-1.amazonaws.com/phaser3-typescript/starter-template/index.html)\n\n\u003ca href=\"https://s3.eu-central-1.amazonaws.com/phaser3-typescript/starter-template/index.html\"\u003e\n\u003cimg src=\"readme/screenshot.png\" width=\"640\" style='border: 0.25em solid #e1e4e8;border-radius: 20px;'/\u003e\n\u003c/a\u003e\n\n## How To Use\n\nTo clone and run this template, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:\n\n```bash\n# Clone this repository (yes, npx not npm)\n$ npx gitget yandeu/phaser-project-template phaser-template\n\n# Go into the repository\n$ cd phaser-template\n\n# Install dependencies\n$ npm install\n\n# Start the local development server (on port 8080)\n$ npm start\n\n# Ready for production?\n# Build the production ready code to the /dist folder\n$ npm run build\n\n# Play your production ready game in the browser\n$ npm run serve\n```\n\nChange the **gameName** in /webpack/webpack.common.js.\n\nAll your game code lies inside the **/src/scripts** folder. All assets need to be inside the **/src/assets** folder in order to get copied to /dist while creating the production build. Do not change the name of the index.html and game.ts files.\n\n## enable3d\n\n\u003ca href=\"https://github.com/yandeu/enable3d#readme\"\u003e\u003cimg src=\"readme/enable3d-logo.png\" alt=\"enable3d logo\" width=\"300\"\u003e\u003c/a\u003e\n\nWant to add 3D objects and physics to your Phaser game? Checkout [enable3d](https://github.com/yandeu/enable3d#readme)!\n\n## Progressive Web App (PWA)\n\n![PWA](readme/pwa.png)\n\nThis template is **100% PWA ready**.\n\nThe ServiceWorker is **disabled by default** and is configured to only work in **production mode**.  \nUncomment the line below inside /src/index.html to enable it.\n\n```html\n\u003cscript\u003e\n  if ('serviceWorker' in navigator) {\n    window.addEventListener('load', () =\u003e {\n      navigator.serviceWorker.register('./sw.js')\n    })\n  }\n\u003c/script\u003e\n```\n\nYou can easily personalize its settings by following these steps:\n\n- Replace both icons in /pwa/icons with your own.\n  - One is **512x512** the other **192x192**\n- Add your own **favicon.ico** to /src\n- Adjust these parameters in the **manifest.json** file in /pwa\n  - **short_name**: Max. 12 characters\n  - **name**: The full game name\n  - **orientation**: \"landscape\" or \"portrait\"\n  - **background_color**: color of the splash screen\n  - **theme_color**: color of the navbar - has to match the theme-color in the index.html file\n- You can leave the **sw.js** (serviceWorker) in /pwa how it is.\n- Change the **gameName** in /webpack/webpack.common.js\n\nRead more about PWA on [developers.google.com](https://developers.google.com/web/progressive-web-apps/)\n\n## Native App\n\nThe simplest way to build a Native App is using https://html2app.dev/.\n\nOr built it manually using [Capacitor](https://capacitor.ionicframework.com/) and following its [Documentation](https://capacitor.ionicframework.com/docs/).  \nThe only thing you need to change after installing Capacitor is the **webDir** inside the **capacitor.config.json** file. Set it to **dist** like so:\n\n```json\n{\n  \"appId\": \"com.example.app\",\n  \"appName\": \"YOUR_APP_NAME\",\n  \"bundledWebRuntime\": false,\n  \"webDir\": \"dist\"\n}\n```\n\n## Custom Configurations\n\n### TypeScript Compiler\n\nChange the TypeScript compiler's settings in the tsconfig.json file.\n\nIf you are new to TypeScript, you maybe want to set **\"noImplicitAny\"** to **false**.\n\nYou'll find more information about the TypeScript compiler [here](https://www.typescriptlang.org/docs/handbook/compiler-options.html).\n\n### Typings\n\nYou can put your custom type definitions inside typings/**custom.d.ts**.\n\n### Webpack\n\nAll webpack configs are in the **webpack** folder.\n\n### Obfuscation\n\n_Obfuscation is disabled by default._\n\nWe are using the [webpack-obfuscator](https://github.com/javascript-obfuscator/webpack-obfuscator). Change its settings in webpack/webpack.prod.js if needed. All available options are listed [here](https://github.com/javascript-obfuscator/javascript-obfuscator#javascript-obfuscator-options).\n\n## ES6\n\nWant to use ES6 instead of TypeScript? Switch to the [phaser-project-template-es6](https://github.com/yandeu/phaser-project-template-es6#readme)\n\n## Multiplayer Game\n\nMaking a multiplayer game? Check out [geckos.io](https://github.com/geckosio/geckos.io#readme)\n\n## Useful Links\n\n- [Phaser Website](https://phaser.io/)\n- [Phaser 3 Forum](https://phaser.discourse.group/)\n- [Phaser 3 API Docs](https://photonstorm.github.io/phaser3-docs/)\n- [Official Phaser 3 Examples](http://labs.phaser.io/)\n- [Notes of Phaser 3](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/index.html)\n\n## Examples\n\n### Game Examples Built with this Starter Template\n\n#### Platformer Example [[Play this game](https://s3.eu-central-1.amazonaws.com/phaser3-typescript/platformer-example/index.html) - [Visit its Repository](https://github.com/yandeu/phaser3-typescript-platformer-example#readme)]\n\n[![phaser3-typescript-platformer](https://raw.githubusercontent.com/yandeu/phaser3-typescript-platformer-example/master/screenshots/nexus6-640x360.png)](https://github.com/yandeu/phaser3-typescript-platformer-example#readme)\n\n#### Phaser 3 + Matter.js: Car Example [[Play this game](https://s3.eu-central-1.amazonaws.com/phaser3-typescript/car-on-curved-tarrain/index.html) - [Visit its Repository](https://github.com/yandeu/phaser3-matter-car-on-curved-terrain#readme)]\n\n\u003ca href=\"https://github.com/yandeu/phaser3-matter-car-on-curved-terrain#readme\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/yandeu/phaser3-matter-car-on-curved-terrain/master/readme/myimage.gif\" width=\"640\" alt=\"phaser3-matter-car-example\"\u003e\n\u003c/a\u003e\n\n## Credits\n\nA huge thank you to Rich [@photonstorm](https://github.com/photonstorm) for creating Phaser\n\n## License\n\nThe MIT License (MIT) 2021 - [Yannick Deubel](https://github.com/yandeu). Please have a look at the [LICENSE](LICENSE) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyandeu%2Fphaser-project-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyandeu%2Fphaser-project-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyandeu%2Fphaser-project-template/lists"}