jusion

New Phaser Yeoman Generator

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.