Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yandeu/phaser-project-template
🕹️ Phaser 3 - Starter Template with TypeScript and webpack.
https://github.com/yandeu/phaser-project-template
html5-game phaser project-template pwa starter-template typescript webpack
Last synced: about 17 hours ago
JSON representation
🕹️ Phaser 3 - Starter Template with TypeScript and webpack.
- Host: GitHub
- URL: https://github.com/yandeu/phaser-project-template
- Owner: yandeu
- License: mit
- Created: 2019-01-26T13:19:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-24T15:11:33.000Z (over 1 year ago)
- Last Synced: 2024-09-18T17:13:23.064Z (7 days ago)
- Topics: html5-game, phaser, project-template, pwa, starter-template, typescript, webpack
- Language: TypeScript
- Homepage:
- Size: 1.89 MB
- Stars: 410
- Watchers: 17
- Forks: 80
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Phaser 3 TypeScript Starter Template
A starter template for Phaser 3 with TypeScript and webpack for building excellent html5-games that work great in the browser and on mobile devices.
Key Features •
Preview •
How To Use •
enable3d •
PWA •
Native App •
Custom Configurations •
ES6 •
Useful Links •
Multiplayer Game •
Examples •
Credits •
License
Want to use ES6 instead of TypeScript? Check out the phaser-project-template-es6
---
## Key Features
- **ESNext** features ready (async/await, Rest/Spread operators)
- Code Splitting
- Obfuscation
- Development Server with SourceMap and Live-Reload
- PWA ready with offline support and "Add to Home screen" install prompt
- Easy to build Native App using Capacitor
- Includes Phaser 3 TypeScript typings
- For development and production builds
- Adds a webpack ContentHash to the JavaScript files (in production)
## Preview
This 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)
## How To Use
To 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:
```bash
# Clone this repository (yes, npx not npm)
$ npx gitget yandeu/phaser-project-template phaser-template
# Go into the repository
$ cd phaser-template
# Install dependencies
$ npm install
# Start the local development server (on port 8080)
$ npm start
# Ready for production?
# Build the production ready code to the /dist folder
$ npm run build
# Play your production ready game in the browser
$ npm run serve
```
Change the **gameName** in /webpack/webpack.common.js.
All 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.
## enable3d
Want to add 3D objects and physics to your Phaser game? Checkout [enable3d](https://github.com/yandeu/enable3d#readme)!
## Progressive Web App (PWA)
This template is **100% PWA ready**.
The ServiceWorker is **disabled by default** and is configured to only work in **production mode**.
Uncomment the line below inside /src/index.html to enable it.
```html
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js')
})
}
```
You can easily personalize its settings by following these steps:
- Replace both icons in /pwa/icons with your own.
- One is **512x512** the other **192x192**
- Add your own **favicon.ico** to /src
- Adjust these parameters in the **manifest.json** file in /pwa
- **short_name**: Max. 12 characters
- **name**: The full game name
- **orientation**: "landscape" or "portrait"
- **background_color**: color of the splash screen
- **theme_color**: color of the navbar - has to match the theme-color in the index.html file
- You can leave the **sw.js** (serviceWorker) in /pwa how it is.
- Change the **gameName** in /webpack/webpack.common.js
Read more about PWA on [developers.google.com](https://developers.google.com/web/progressive-web-apps/)
## Native App
The simplest way to build a Native App is using https://html2app.dev/.
Or built it manually using [Capacitor](https://capacitor.ionicframework.com/) and following its [Documentation](https://capacitor.ionicframework.com/docs/).
The only thing you need to change after installing Capacitor is the **webDir** inside the **capacitor.config.json** file. Set it to **dist** like so:
```json
{
"appId": "com.example.app",
"appName": "YOUR_APP_NAME",
"bundledWebRuntime": false,
"webDir": "dist"
}
```
## Custom Configurations
### TypeScript Compiler
Change the TypeScript compiler's settings in the tsconfig.json file.
If you are new to TypeScript, you maybe want to set **"noImplicitAny"** to **false**.
You'll find more information about the TypeScript compiler [here](https://www.typescriptlang.org/docs/handbook/compiler-options.html).
### Typings
You can put your custom type definitions inside typings/**custom.d.ts**.
### Webpack
All webpack configs are in the **webpack** folder.
### Obfuscation
_Obfuscation is disabled by default._
We 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).
## ES6
Want to use ES6 instead of TypeScript? Switch to the [phaser-project-template-es6](https://github.com/yandeu/phaser-project-template-es6#readme)
## Multiplayer Game
Making a multiplayer game? Check out [geckos.io](https://github.com/geckosio/geckos.io#readme)
## Useful Links
- [Phaser Website](https://phaser.io/)
- [Phaser 3 Forum](https://phaser.discourse.group/)
- [Phaser 3 API Docs](https://photonstorm.github.io/phaser3-docs/)
- [Official Phaser 3 Examples](http://labs.phaser.io/)
- [Notes of Phaser 3](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/index.html)
## Examples
### Game Examples Built with this Starter Template
#### 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)]
[](https://github.com/yandeu/phaser3-typescript-platformer-example#readme)
#### 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)]
## Credits
A huge thank you to Rich [@photonstorm](https://github.com/photonstorm) for creating Phaser
## License
The MIT License (MIT) 2021 - [Yannick Deubel](https://github.com/yandeu). Please have a look at the [LICENSE](LICENSE) for more details.