Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yandeu/phaser-project-template-es6
Phaser 3 - Starter Template with ES6 (ESNext features included) and webpack.
https://github.com/yandeu/phaser-project-template-es6
babel7 es6 esnext html5-game phaser phaser3 pwa starter-template webpack
Last synced: about 2 months ago
JSON representation
Phaser 3 - Starter Template with ES6 (ESNext features included) and webpack.
- Host: GitHub
- URL: https://github.com/yandeu/phaser-project-template-es6
- Owner: yandeu
- License: mit
- Archived: true
- Created: 2019-01-26T13:24:49.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-03-05T22:54:53.000Z (over 3 years ago)
- Last Synced: 2024-09-18T17:13:24.063Z (about 2 months ago)
- Topics: babel7, es6, esnext, html5-game, phaser, phaser3, pwa, starter-template, webpack
- Language: JavaScript
- Homepage:
- Size: 2.6 MB
- Stars: 150
- Watchers: 11
- Forks: 33
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Phaser 3 ES6 Starter Template
A starter template for Phaser 3 with ES6 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 •
TypeScript •
Useful Links •
Multiplayer Game •
Examples •
Credits •
License
Want to use TypeScript instead? Switch to the phaser-project-template
## \* \* \* \* \* \*
# ⚠️ IMPORTANT
### Please use the [phaser-project-template](https://github.com/yandeu/phaser-project-template#readme) instead!
### Although it uses TypeScript under the hood, all TypeScript features are disabled by default. This means you can just write JavaScript (ES2015+) as you are used to. Give it a try! 👍
## \* \* \* \* \* \*
## 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 ES6+. [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
$ git clone --depth 1 https://github.com/yandeu/phaser-project-template-es6.git phaser3-game
# Go into the repository
$ cd phaser3-game
# 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**. 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 [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
### Babel Compiler
Change the Babel compiler's settings in the .babelrc file.
You'll find more information about the babel [here](https://babeljs.io/).
### Webpack
All webpack configs are in the **webpack** folder.
#### Obfuscation
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).
## TypeScript
Want to use TypeScript instead of ES6? Switch to the [phaser-project-template](https://github.com/yandeu/phaser-project-template#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 the TypeScript 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) 2019 - [Yannick Deubel](https://github.com/yandeu). Please have a look at the [LICENSE](LICENSE) for more details.