New Phaser Yeoman Generator

[jusion]

I've just published a new Yeoman generator for Phaser which uses Gulp (which isn't anything new), but it also includes browserify/watchify (!!), as well as linting, autoreload, auto-minify, etc: https://github.com/jroblak/generator-phaser-browserify / https://www.npmjs.org/package/generator-phaser-browserify

 

Browserify allows for more modular code like:

var Player = function (game, x, y) {    Phaser.Sprite.call(this, game, x, y, 'testsprite');    game.add.existing(this);}Player.prototype = Object.create(Phaser.Sprite.prototype);Player.prototype.constructor = Player;/** * Automatically called by World.update */Player.prototype.update = function() {};module.exports = Player;

var Player = require('../entities/player');var Game = function () {    this.testentity = null;};module.exports = Game;Game.prototype = {  create: function () {    this.testentity = new Player(this.game, x, y);    this.testentity.anchor.setTo(0.5, 0.5);  },  update: function () {  },  onInputDown: function () {  }};

with only one script in your index.html:

<!-- build:js main.min.js --><script src="/js/main.min.js"></script><!-- /build -->

Browserify / Watchify automagically handles all everything else for you.

 

You can install via npm install generator-phaser-browserify then start a new project with yo Phaser-browserify (requires Yeoman to be installed as well -- npm install yeoman)

 

You can submit any errors or issues with it here: https://github.com/jroblak/generator-phaser-browserify/issues

 

[crysfel]

Nice work, thank you for this, this definitely helps newbies like me.

 

Just wondering, what are the differences with this one: https://github.com/codevinsky/generator-phaser-official

 

Regards

[jusion]

It uses a different build system (Gulp) which I find better and more understandable. It also demonstrates how to use the module-based system via the automatically generated scaffolding a little more effectively. Finally, it doesn't look like the one you posted uses watchify, so I'm not sure if it works with browserify while being served locally with live-reload.

 

I also just pushed a few bug fixes, so it should be 100% good to go!

[ap13p]

Thanks for the generator, I like it so much. Now my project more structured. Especially with the combination of gulp, watchify and browserify

[jusion]

Glad you enjoy it!

[eguneys]

Whaat, I am just starting a new Phaser yeoman generator myself. It's going to use gulp and requirejs. Game is on!

[crysfel]

It would be nice to add a class system like Ring ( http://ringjs.neoname.eu/), Joose (http://joose.it/) or any other like that. When using prototypes the code looks awful xD

 

Regards

[bmceldowney]

Wait, I'm confused. The generator-phaser-official (https://github.com/codevinsky/generator-phaser-official) already uses browserify and a file watcher. 

[Heppell08]

Yeah I use codevinsky's yeoman generator. Has watchify, server, minify and all the other cool stuff required. Don't see the use for more generators when Codevinsky's already does the job required. Suppose each to their own though.

[PixelPicoSean]

The official generator is great but looks like not updated for few months, which I think still lack of features. Yeoman uses Grunt by default which is slower than Gulp, and I prefer BrowserSync to LiveReload because of it does not force a reloading when inject CSS styles which makes it very useful for tweaking UI layout if you're using DOM for HUD.

So I made my own generator https://github.com/pixelpicosean/slush-phaser-project/.

It has some improvement you may want, it's possible to specify path of a prefab to be generated, and I'm trying to add support for a class system which I think will benefit many people.

And more features are in the plan, because there're still many things can do by a generator instead of duplicate or copy/paste every time you want to start a game very quickly.

[eguneys]

Nice and comprehensive generator, +1 for ES6 modules, PixelPicoSean. However Yeoman doesn't depend on grunt, you can use gulp or anything with yeoman, also connect-livereload module does not force reloading but it also injects CSS styles.

[bmceldowney]

The official generator is great but looks like not updated for few months, which I think still lack of features. Yeoman uses Grunt by default which is slower than Gulp, and I prefer BrowserSync to LiveReload because of it does not force a reloading when inject CSS styles which makes it very useful for tweaking UI layout if you're using DOM for HUD.

So I made my own generator https://github.com/pixelpicosean/slush-phaser-project/.

It has some improvement you may want, it's possible to specify path of a prefab to be generated, and I'm trying to add support for a class system which I think will benefit many people.

And more features are in the plan, because there're still many things can do by a generator instead of duplicate or copy/paste every time you want to start a game very quickly.

Gotcha. I'm all for tool variety, I just didn't want anyone to get the wrong impression from your original post and think that generator-phaser-official didn't have browserify, a file watcher and auto loading.

[eguneys]

I've published my yeoman generator for Phaser using gulp and requirejs. I documented an article about it, make sure to check it out at http://www.eguneys.com/blog/2014/09/17/lets-build-a-yeoman-generator-2/.

[cjke]

I just wanted to let you guys know that the generator-phaser-official didn't appear to be working (issue 13).

If you are looking for a fix, please see My pull request. I wanted to contribute to an existing one, instead of creating a new one from scratch. 

 

Cheers