README

generator-phaser-h5

Translations: 简体中文

generator-phaser-h5 is a Yeoman plugin that makes starting up Phaser h5 projects simple, quick and easy.

h5 ≠ <h5></h5> , h5 ≠ html5, h5 ≠ car haval5.

h5 = Web page or Web app etc.

How do you think of some Chinese call HTML5 'H5'

Not only for Phaser, Add Dependencies you want.

ECMAScript version ES5

Also Support ECMAScript version ES6

~~Bower manages the things — frameworks, libraries, assets, and utilities.~~

Note:...psst! While Bower is maintained, we recommend yarn and webpack for new front-end projects!

Installation

Note: Install Node.js, Gulp, ~~Bower~~ First

Get Yeoman and generator-phaser-h5 via npm.

npm install --global yo                    # Install Yeoman if you don't have it yet.
npm install --global generator-phaser-h5   # Install generator-phaser-h5

Usage

Create a directory to keep your project contents and go into it.
```
mkdir myproject
cd myproject
```
Create your new game project.
```
yo phaser-h5
```

Launch it!

gulp          # Launches the server and opens the page for live development.
gulp build    # Prepare the h5 release for distribution.

The result in dist/

Plugins

~~Bower manages plugins~~

npm manages plugins.

devDependencies are for the development-related scripts, e.g. unit testing, packaging scripts, documentation generation, etc.

dependencies are required for production use, and assumed required for dev as well.

Note: Please do not put test harnesses, transpilers or latest "Matches latest version", * "Matches any version" in your dependencies object!

Recommend: version "Specifying version", ^version "Compatible with version"

Frontend environments evolve rapidly nowadays, modern browsers have already implemented a great deal of DOM/BOM APIs which are good enough. So You-Dont-Need-jQuery

devDependencies:

Note: npm install <packages> --save-dev

browserify for bundling up all of your dependencies
gulp-plugins for 'clean', 'copy', 'concatlibs', 'compile', 'autoprefixer', 'minifycss', 'processhtml', 'minifyhtml', 'rev', etc.
- gulp-sass for converting to css (Optional)
jshint for Static Code Analysis Tool
babelify for Babel browserify transform

dependencies:

Note: npm install <packages>

phaser-ce for HTML5 games and 2d canvas
howler.js for audio
~~jquery~~ ajax for ajax
Gsap for javascript animation
animate.css for CSS animation style

others:

Note: Read Documentation For a Getting started guide, Usage , API docs, etc. check out or docs!

better-picker for address picker
Swiper for slider
Chart.js for chart
tracking.js for tracking face etc.
AlloyImage for image processing lib
Stats for JavaScript Performance Monitor

Use the following ways Sometime:

Cdn jsDelivr, cdnjs, bootcdn :

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.10.5/phaser.js"></script>

browserify Make file available from outside the bundle with require(file) (Also with import(file) because of babelify)
browserify-shim Make CommonJS-Incompatible Files Browserifyable
Local In gulpfile.js Write Libs paths and Run gulp concatlibs task:
```
<script src="/assets/js/lib/libs.js"></script>
```

Directory Structure

In development, run gulp:

    .
    ├── dist
    ├── src
    │   └── assets
    │       ├── img
    │       ├── media         # video audio resources
    │       ├── css
    │       │   ├── css.css
    │       │   └── sass.scss
    │       └── js
    │           ├── entities
    │           ├── states    # phaser state
    │           │
    │           └── main.js    
    │
    ├── node_modules
    ├── README.md
    ├── LICENSE
    ├── index.html
    ├── package.json
    ├── gulpfile.js
    └── .jshintrc

In production, run gulp build:

   dist
    ├── assets
    │   ├── img
    │   ├── media
    │   ├── css
    │   │   ├── libs
    │   │   │	 └── *.css 	   # libs css e.g. animate.min.css, swiper.min.css, etc.
    │   │   └── css.min.css
    │   └── js
    │       ├── libs
    │       │    └── libs.js
    │       └── main.min.js
    │
    └── index.html