Brunch with Phaser 3 (starter project)

[samme]

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

Edited March 13, 2018 by samme
New skeletons

[samme]

Bump with details. 

[4gent0rang3]

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!

[samme]

You can put your own typings in a folder outside app (because you don't want it compiled).

You can set compiler options in brunch-config or create a tsconfig.json at the project root.

Edited February 24, 2018 by samme
moved to <https://github.com/samme/brunch-phaser2/tree/typescript>

[samme]

And you would use initialize.ts, like

import * as Phaser from 'phaser-ce';

let game = new Phaser.Game(/*…*/);

 

[Jimaginary]

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.  

[samme]

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 February 24, 2018 by samme
moved to <https://github.com/samme/brunch-phaser2/tree/es6>

[samme]

Now comes with Phaser 3.

[dandmcd]

I just installed the Phaser 3 Brunch!  Fantastic, definitely easy to setup and start running with Typescript and the definitions.

[WiLD11]

Great boilerplate!

[fitness23]

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.

[samme]

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.

 

[samme]

I split these into separate skeletons so you can use brunch new with any of them (no cloning required):

• brunch-phaser-coffee
• brunch-phaser-es6
• brunch-phaser-typescript

[tiggus]

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. 

[nkholski]

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.

[pdiddles03]

Forgive me if I a, wrong, but es6 is JavaScript. Do you mean Babel?

[michebn]

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? 

 

[samme]

On 5/25/2018 at 5:16 PM, pdiddles03 said:

Forgive me if I a, wrong, but es6 is JavaScript. Do you mean Babel?

Write ES6, transpile with Babel.

[samme]

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).