generator-phaser-alt

Version notice

Version 1.x

Version 1.x was developed to use ES5 (< ES2015), so standard JavaScript.

Version 2.x

Version 2.x is an enhancement of v1.x that uses BabelJS to get ES6 support. Now you can use class, import, let and so on in your code. Should also run ES5 Code, so no need to use v1.x just to get ES5 compability.

Getting Started

What is Generator-Phaser-Alternative?

This PhaserJS Generator is an alternativen Yeoman generator, which is a boilerplate to get your Phaser Game setup. It is designed around my best-practice and uses Gulp to automate tasks to work more in your game, instead of repeating tasks manually.

Yeoman Generators

To use Yeoman generator you need to have NodeJS installed. With NodeJS the Node Package Manager NPM will be installed. That is the basis for the next steps. To install NodeJS and NPM please use the interwebs for instructions how to install it on your system.

Install Yeoman globally

After NodeJS is installed start installing the Yeoman tool. More details on Yeoman can be found on the Yeoman website, but basicly it is the following command:

npm install -g yeoman

After that you are good to go to use the Generator-Phaser-Alternative renerator

Instructions on Generator-Phaser-Alt

Before using the generator your need to install the generator on your system via NPM to use it on your next project.

Install Generator on your system

To install generator-phaser-alt from npm, run:

npm install -g generator-phaser-alt

Usage of Generator

Create a new folder, where your game will live and change to that directory:

mkdir ~/create/new/gamefolder
cd ~/create/new/gamefolder

Finally, initiate the generator:

yo phaser-alt

After installing the generator you just need to run gulp in you command line.

gulp

Features of this Generator

This generator was developed, as the other existing generators did not fit my needs. The directory structure and the task runner were the two main disadvantages for my needs, thats why I created my own generator.

Features

• Jade for HTML files
• Stylus for generating CSS
• Gulp as task runner
• Browserify to bundle your code
• JSHint to help your with your code
• BabelJS to get ES6 support
• Gulp Tasks to
  • copy audio/image assets
  • copy other js files that you want on your website or for the game
  • optimize images
  • build in server to test your app
• all dependencies are installed after running the generator via NPM
• directory structure to organize website code and game code

After installing the generator you just need to run gulp in you command line.

Directory Structure after running generator

The generator-phaser-alt will create the following folder structure in your game folder:

.
├── app                       // main app folder, contains Jade files
│   ├── images                // image folder for your website images, not game images
│   ├── js                    // main folder vor all your javascripts including game js files
│   │   ├── components        // components in your game
│   │   ├── prefabs           // prefabs in your game
│   │   └── states            // states folder with predefined states
│   └── stylesheets           // folder for the Stylus files
├── assets                    // main assets folder for your game assets
│   ├── audio                 // audio game assets, used when build game
│   ├── designs               // design folder, contains only design which are not used in the game
│   ├── images                // game image folder, which will be used when build
│   ├── js                    // extra JS files, which are not directly game related
│   └── tilemaps              // tilemaps folder
├── build                     // build folder will be created on each build
│   ├── assets                // assets copied from the /assets folder
│   │   ├── audio
│   │   └── images
│   ├── css                   // generated CSS files from stylus
│   └── js                    // copied JS files (game js files, included JS)
├── dist                      // distribution folder, all assets are optimized and minified
└── gulp                      // gulp folder with config
    └── task                  // js files with the definition of all tasks

Configuration of Gulp Tasks

The main config of all Gulp tasks is in the file gulp/config.js, there should be everything as needed.

More About the Features

The Generator uses Jade to compile to HTML code. The index.jade file is located in app/index.jade and will result in your index.html file as starting point in your /build/index.html and used to be served when using the build in webserver and the address http://localhost:3000 to test your game.

Almost the same with the Stylus Preprocessor. The main styl file is located in app/stylesheets/style.styl and from there you can include other styl files. The main CSS file will be placed in build/css/style.css.

To not manually reload the browser page on every change, the gulp tasks are setup to automaticly reload via devreload.js file. On every change (save of file) this will run. If putting new files into the app or assets folder, you need to restart gulp, as new files are not automaticly detected!

TODO

Bug Fixing

License

MIT © IkkeWa