generator-phaser-alt v2.0.0
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