samme

Brunch with Phaser 3 (starter project)

Recommended Posts

A Brunch skeleton for making games with Phaser 3. (Why Brunch?)

Choose your own adventure with CoffeeScript, ES6, TypeScript, or plain JS.

  • server live-compiles and live-reloads
  • minifies (in production mode)
  • fast builds
  • automatic NPM integration
  • easy!
npm install -g brunch && brunch new <project> -s phaser
# OR choose one of the variants:
brunch new <project> -s samme/brunch-phaser-coffee     # CoffeeScript
brunch new <project> -s samme/brunch-phaser-es6        # ES6
brunch new <project> -s samme/brunch-phaser-typescript # TypeScript

samme/brunch-phaser

For Phaser 2 / Phaser CE:

npm install -g brunch && brunch new <project> -s samme/brunch-phaser2

samme/brunch-phaser2

brunch with phaser.x4.png

Edited by samme
New skeletons

Share this post


Link to post
Share on other sites

Hey man really great template, appreciate the simplicity. Just out of interest how would one go about correctly making this a typescript project? Where would I put the typings and how would I configure the typescript compiler?

Brunch is awesome!

Share this post


Link to post
Share on other sites

Hey, great project! I am having trouble scaffolding out the es6 version though. Currently, I can run this to get an es5 project:

brunch new -s samme/brunch-phaser

Can someone help with with the command to create this version in preferably es6, but out of curiosity typescript as well and for bonus points clojurescript. :) 

Share this post


Link to post
Share on other sites

Brunch doesn't do anything like that, but you can

  1. clone or download the repo
  2. run lebab on the source files (app/*)
  3. commit (if you cloned it)
  4. run brunch new -s path-to-modified-brunch-phaser
Edited by samme
moved to <https://github.com/samme/brunch-phaser2/tree/es6>

Share this post


Link to post
Share on other sites

Hi everyone,

I love this! Does anyone have a Typescript version set-up already of this I could have? I'm struggling to get my head around this and would prefer to stick with the Typescript route.

Many thanks,

Andrew.

Share this post


Link to post
Share on other sites
18 minutes ago, fitness23 said:

I love this! Does anyone have a Typescript version set-up already of this I could have? I'm struggling to get my head around this and would prefer to stick with the Typescript route.

@fitness23 I have a Phaser 3 TypeScript branch but it lacks definitions (none published yet for Phaser 3).

If you're using Phaser 2, that TypeScript version is ready to go; see https://github.com/samme/brunch-phaser2#clone.

 

Share this post


Link to post
Share on other sites

I know I promised to stay away for a bit but I am back.

 

What I noticed is this appears related to the initial loading somehow.  If I click into the game, get the static logo, then hit  'Q' to exit I get the menu with everything in place as expected.  From that point on everything works great including the bouncing logo.  I can hit q and go back and forth as many times as I want and everything works. 

Share this post


Link to post
Share on other sites

I'm using the es6-version. Great work. Sometimes it seems that it fails to wait for all imports though. I'm working with a button class and get this error now and then "menu.js:35 Uncaught TypeError: _button2.default is not a constructor" which resolves if I just save the file with the button class again unaltered.

It was a thread here about making an official template. I think that's a great idea and maybe this could be a candidate? How does the build compare to webpack? I think an official template would get much more attention from the community, with examples on how to extend it and PRs to keep dependencies up to date.

Share this post


Link to post
Share on other sites

Hey,

since I'm coming from the CPP / Python world, this helped me a lot on starting my first weg game (the web world seems a lot more complicated than anything in C++ anyway xD)

I tryed setting up a unit test frame work (tryed karma + jasmin and jasmin standalone but failed with both).

I got karma running with plaine JavaScript (not with this template) but i would like to have the Typescript version.

I don't bother if it's via console or via browser reload ... so do you guys know an easy way to set up any unit test framework with the typescript template here? 

 

Share this post


Link to post
Share on other sites
On 5/4/2018 at 1:28 AM, nkholski said:

Sometimes it seems that it fails to wait for all imports though. I'm working with a button class and get this error now and then "menu.js:35 Uncaught TypeError: _button2.default is not a constructor" which resolves if I just save the file with the button class again unaltered.

http://brunch.io/docs/troubleshooting

On 5/4/2018 at 1:28 AM, nkholski said:

It was a thread here about making an official template. I think that's a great idea and maybe this could be a candidate? How does the build compare to webpack? I think an official template would get much more attention from the community, with examples on how to extend it and PRs to keep dependencies up to date.

I'm just glad people are using it. I think the build must be very similar to webpack's. I want to see if I can make conditional compilation work (e.g. CANVAS/WEBGL). 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.