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

1. Create a directory to keep your project contents and go into it.

   mkdir myproject
   cd myproject

2. Create your new game project.

   yo phaser-h5

3. 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

Versions

1.x.x

Only for Phaser

2.x.x

Not only for Phaser , Add Dependencies you want , Without Bower

3.x.x

Rebuild Directory Structure

4.x.x

Refactor Generator , Fix tests

Reference

Yeoman Generator API

generator-phaser-plus

创建 Yeoman Generator 简单教程

开发自己的 yeoman 脚手架（generator-reactpackage）

前端模块及依赖管理的新选择：Browserify

gulp-rev：项目部署缓存解决方案

License

MIT License