A template for writing Phaser Games based on ECMAScript 2015 (ES6) + Webpack + Progressive Web Apps for rapid game development.
Invite me to a coffee 
First of all, install the dependencies to run this boilerplate.
# Clone this repository
$ git clone [email protected]:brenopolanski/phaser-es6-starter.git my-game
$ cd my-game
# install dependencies
$ yarn (or npm i)
# run game
$ yarn start (or npm start)
Check it live or see the tutorial: Advanced Phaser and TypeScript Projects by Richard Davey at www.photonstorm.com.
If you found this project useful, then please consider giving it a ⭐ on Github and sharing it with your friends via social media.
yarn dev (or npm run dev): Starts the game on development mode;yarn build (or npm run build): Build game to production;yarn build:analyzer (or npm run build:analyzer): Build game to production and open bundle analyzer on8888port;yarn start (or npm start): Special script reserved to run production code. Change as you wish. For now, it is the same asyarn dev.
gulp template:empty: Call to create an empty game project template insrc/folder;gulp vscode: Call VSCode Intellisense for Phaser;gulp deploy: Deploy compiled files atgamefolder togithubon branchgh-pages.
Atom
apm install editorconfig es6-javascript atom-ternjs javascript-snippets linter linter-eslint language-babel autocomplete-modules file-iconsVSCode
Sublime
- Editorconfig Integration
- Linting
- ESLint Integration
- Syntax Highlighting
- Autocompletion
- Node Snippets
- ES6 Snippets
Others
Phaser ES6 Starter offers a rich development experience using the following technologies:
| Tech | Description | Learn More |
|---|---|---|
| Phaser | A fast, fun and free open source HTML5 game framework. | Learn Phaser |
| Babel | Compiles ES6 to ES5. Enjoy the new version of JavaScript today. | ES6 REPL, ES6 vs ES5, ES6 Katas |
| Webpack | Bundles npm packages and our JS into a single file. Includes hot reloading via react-transform-hmr. | Quick Webpack How-to |
| Browsersync | Lightweight development HTTP server that supports synchronized testing and debugging on multiple devices. | Intro vid |
| ESLint | Lint JS. Reports syntax and style issues. Using eslint-plugin-react for additional React specific linting rules. | |
| PostCSS | Transform styles with JS plugins. Used to autoprefix CSS | |
| Stats.js | For displaying FPS/MS. | |
| Editor Config | Enforce consistent editor settings (spaces vs tabs, etc). | IDE Plugins |
| npm Scripts | Glues all this together in a handy automated build. | Why not Gulp? |
If you want to help, please read the Contributing guide.
For detailed changelog, see Releases.
Phaser is a free and open source software developed and owned by Richard Davey at www.photonstorm.com. You can visit their funding page and help them to make Phaser even better.
Donations would be more than welcome :)
MIT License © Breno Polanski