Awesome

div

<br />

A template for writing Phaser Games based on ECMAScript 2015 (ES6) + Webpack + Progressive Web Apps for rapid game development.

Invite me to a coffee

Getting Started

Installation

First of all, install the dependencies to run this boilerplate.

# Clone this repository
$ git clone git@github.com:brenopolanski/phaser-es6-starter.git my-game
$ cd my-game

# install dependencies
$ yarn (or npm i)
# run game
$ yarn start (or npm start)

Game Demo

Check it live or see the tutorial: Advanced Phaser and TypeScript Projects by Richard Davey at www.photonstorm.com.

:heart: Found this project useful?

If you found this project useful, then please consider giving it a :star: on Github and sharing it with your friends via social media.

Scripts

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 on 8888 port;
yarn start (or npm start): Special script reserved to run production code. Change as you wish. For now, it is the same as yarn dev.

Tasks

gulp template:empty: Call to create an empty game project template in src/ folder;
gulp vscode: Call VSCode Intellisense for Phaser;
gulp deploy: Deploy compiled files at game folder to github on branch gh-pages.

Editor Configuration

Atom

apm install editorconfig es6-javascript atom-ternjs javascript-snippets linter linter-eslint language-babel autocomplete-modules file-icons

VSCode

Sublime

Others

Technologies

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?

Contributing

If you want to help, please read the Contributing guide.

History

For detailed changelog, see Releases.

Credits

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

Donations would be more than welcome :)