Phaser 3 BOILERPLATES, STARTERS - List, discussion and features

[Ppozniak]

Phaser 3 BOILERPLATES | STARTERS

Unify, upgrade, use.

Last updated: March 6

 

Table of contents:

1. Intro

2. create-phaser-app 

3. List of existing boilerplates

4. What kind of features we need/want

5. What's the point

 

Intro:

Hello there everyone! As Phaser 3 came out I immediately started to look after some Boilerplate which would take care of basic stuff and speed up the development. If you don't know what I am talking about, think of create-react-app, but for Phaser.

There are a few already, however I think that is one of the things that shouldn't be re-created every time, but I'd rather see one, powerful, generator that is community driven, updated, and has many options.

Richard has mentioned that he prefers this to be created by community, and just highlighted on the Phaser website. 

I am aware that sometimes you need something really different and boilerplate X won't suit your needs, but that's where configuration comes in (for example question at the beginning which physics you want to use). Unless even that can help you - get a different boilerplate/create new one. 

I want to help and in my opinion boilerplates are great way to unify the community, show out the best practices and speed up the development. Let me know what do you think about it.

 

create-phaser-app:

So currently I am developing this generator, which follows the convention of create-X-app. It will be configurable with --options, or by default running a "wizard" where you select basic options.

At the start there will be only plain JS and typescript probably, but later on I'm planning to add things like multiple examples (ping-pong, platformer, etc) and many other stuff, but also some --basic flag where you get 0 configuration small project without any webpacks or anything!
https://github.com/phaser-contrib/create-phaser-app Here's the repo. Project will be open up for contributions after I prepare the base.

Hopefully after everything's prepared community will be able to focus this one and stop creating new ones, unless they really need to.

 

 

Existing boilerplates list:

• https://github.com/oliverbenns/phaser-starter - 
• https://github.com/rblopes/generator-phaser-plus -  by @rblopes
• https://github.com/lean/phaser-es6-webpack/tree/phaser3 - (phaser 3 on different branch, i think it's still in development for p3) by @leandro

Boilerplates/examples (things that fall in into example category, but still can be a good foundation)

• https://github.com/nkholski/phaser3-es6-webpack - generic platformer template (mario in this case) and it's based on phaser-es6-webpack by  @nkholski

I'll keep the list updated, you can give links in the comments too!

 

Features:

What should the perfect boilerplate have

• Recognizable name
• ES6 transpilation with babel
• ES6, CoffeeScript or TypeScript 
• Webpack, along with live and hot reload
• Environment variables
• Continuous delivery and continuous deployment
• Images compress
• JS minify
• Standard folder structure with basic scenes like preload screen, game
• Config file for game configuration with all possible options
• Maybe something that will make sprite bundles
• ES lint configuration? (not quite sure as many people have different ways of writing code, however maybe just a small base for further configuration?)
• CLI commands (like create new object)
• Popular building integrations (Cordova, Cocoon etc) at least on some level
• Easy way to update Phaser
• Configurable at the start:
  • Provide bigger example? or just standard template (for example do you want only one example asset, or whole game generated)
  • Physics selection
  • List of some basic useful plugins?

That's all coming to my mind for now, leave the comments what would you like to see in a boilerplate!

 

The point?:

I know this may be not immediately clear "what the hell this guy want to do with this topic". I think it would be nice if community choose one boilerplate that already is in a good shape and drop all the focus on it. I don't think that this will be better if every person creates a new boilerplate for no good reason and reinvents the wheel. So to summarize:

1. Create a list of boilerplates to have it in one place
2. Let's choose together a boilerplate which community would accept to take care of, becoming a kind of "official" boilerplate (again think of create-react-app that is used by most of the people). (and yes, I am aware that not everybody will want that, but in most cases unified standard is a good thing, I guess?)
3. List of features that this boilerplate would ideally have.
4. I want to hear your feedback about the whole concept, maybe I am dreaming too much.

 

From my side:

https://github.com/lean/phaser-es6-webpack/tree/phaser3 seems to be the most popular, however don't think it's phaser 3 ready yet? Haven't looked at it yet.
https://github.com/rblopes/generator-phaser-plus is also looking great, I've used it at it seems it has most of the features.

 

What would I like to hear from you guys:

1. Do you like the idea?
2. If yes, would you like to prefer to choose an existing boilerplate or create a new one
   1. How would you name it if new one?
   2. If new one, clean start or forked from other project?
3. What features would you add to the list
4. Do you know any other generators that should be on the list?

 

So let me know what do you think about it, let the discussion begin. Yey.

Best regards.

[nkholski]

1. I would love a community-driven Phaser 3 boilerplate like Phaser CE is handled, preferably with an official status.
2. I would prefer new and official one but probably based on the Lean boilerplate for Phaser 2. That boilerplate is also a result of developing other repositories.
3. It would need to have typescript support. ESlint should be a copy of that for Phaser 3. A guide or something to tweak it (like spritesmith, cordova builds etc). An official plugin list would be perfect, but perhaps as a separate project.

[Ppozniak]

7 minutes ago, nkholski said:

1. I would love a community-driven Phaser 3 boilerplate like Phaser CE is handled, preferably with an official status.
2. I would prefer new and official one but probably based on the Lean boilerplate for Phaser 2. That boilerplate is also a result of developing other repositories.
3. It would need to have typescript support. ESlint should be a copy of that for Phaser 3. A guide or something to tweak it (like spritesmith, cordova builds etc). An official plugin list would be perfect, but perhaps as a separate project.

Great, added your features to the list. I also think that Lean boilerplate is the most popular one at seems like the most solid one. Let's see what others think, thanks for feedback.

[RiCoTeRoX]

I would love to join you too guys.

1. Must have a CI and CD

2. Enviroments support

3. Hot reload

4. Webpack-dev-server support

Best! Danny

 

edit: some example of: https://github.com/RiCoTeRoX/phaser3-advanced-boilerplate

[Fabadiculous]

I would love a community driven Phaser3-boilerplate. The list of features contains everything I could think of.

[CanDbas]

Another support from me :=) I can not even count the benefits of create-react-app has given to me. Some official create-react-app-ish Phaser 3 boilerplate starter pack would be great for sure.

[samme]

 

[troyedwardsjr]

Updated my TypeScript boilerplate with a more complete example:
https://github.com/troyedwardsjr/phaser3-typescript-webpack

[RiCoTeRoX]

so... where is "official" repo, where we can make a PR ?
maybe we can use the official one?

https://github.com/photonstorm/phaser3-project-template

@rich are you agree?

[Ppozniak]

1 hour ago, RiCoTeRoX said:

so... where is "official" repo, where we can make a PR ?
maybe we can use the official one?

https://github.com/photonstorm/phaser3-project-template

@rich are you agree?

There is no repo yet. I wanted to see people's opinion on that first. Then we should decide if we're creating new one, how we're naming the whole thing etc.

[RiCoTeRoX]

1 hour ago, Ppozniak said:

There is no repo yet. I wanted to see people's opinion on that first. Then we should decide if we're creating new one, how we're naming the whole thing etc.

What do you think about setting a deadline?

maybe Feb 28 ?

so we can start the project on 1º Mar

[fitness23]

I think this is the most comprehensive one out there = https://github.com/troyedwardsjr/phaser3-typescript-webpack

[pixelhijack]

@Ppozniak 

1. Absolutely agree, great initiation! I was redirected to this topic after trying to use my own previous boilerplate with Phaser 3 not aware new webpack config needs the raw-loader and lost in the non-official boilerplates. 

2. Would tend towards creating a new one, or quickly chosing the best so far and extend that. Create-react-app is a perfect example: what happened there is everyone started to create their own boilerplate / starter kit because of js scaffolding is a nightmare, but having many starter kits is also not too optimal.

2.1. create-phaser-app? would hold the reference to make the purpose clear

2.2. clean start

3. This is the sensitive point. Usually when i want to generate a new react app / phaser game / etc, i need ONE of the following: 

- the most minimalistic setup i can imagine: webpack + es6 + phaser, most lightweight, npm install and ready to go in 2 mins, to bundled / deployed as quick example

- full-featured, configurable, linter CI etc included, production-targeted boilerplate (like create-react-app) with everything included, preferrably configurable (this is a problem with CRA also, you can easily reach the limits without ejecting)

- lightweight client-side setup WITH some minimal server (node.js) setup also (for immediate deployment to heroku / ...) 

 

[Ppozniak]

1 hour ago, pixelhijack said:

@Ppozniak 

1. Absolutely agree, great initiation! I was redirected to this topic after trying to use my own previous boilerplate with Phaser 3 not aware new webpack config needs the raw-loader and lost in the non-official boilerplates. 

2. Would tend towards creating a new one, or quickly chosing the best so far and extend that. Create-react-app is a perfect example: what happened there is everyone started to create their own boilerplate / starter kit because of js scaffolding is a nightmare, but having many starter kits is also not too optimal.

2.1. create-phaser-app? would hold the reference to make the purpose clear

2.2. clean start

3. This is the sensitive point. Usually when i want to generate a new react app / phaser game / etc, i need ONE of the following: 

- the most minimalistic setup i can imagine: webpack + es6 + phaser, most lightweight, npm install and ready to go in 2 mins, to bundled / deployed as quick example

- full-featured, configurable, linter CI etc included, production-targeted boilerplate (like create-react-app) with everything included, preferrably configurable (this is a problem with CRA also, you can easily reach the limits without ejecting)

- lightweight client-side setup WITH some minimal server (node.js) setup also (for immediate deployment to heroku / ...) 

 

I agree. I was also thinking about create-phaser-app  So I think we'll go with that. Although this may be little more complex than typical yo-boilerplate I was thinking about in the beginning.

I think today I'll create a repo, separate forum discussion, and this topic will be preserved only as a list of boilerplates.

Thanks for feedback everyone.

[pixelhijack]

ok, this is my quick attempt, a very basic, minimalistic, no-config boilerplate forked from the widely used full example project of @nkholski, merged with the minimalist template of @rich (which didn't included ES6 babel transpilation): https://github.com/pixelhijack/phaser3-es6-webpack. If @Ppozniak you are ahead with a clean one, ignore this, if you can use, let me know. We would better end up with only one, official, then yet another

 

[PixelPicoSean]

I just create a very basic ES5 template for Phaser3 https://github.com/pixelpicosean/phaser3-template/settings , which is as simple as Rich's template project yet provide more functionalities (including basic game resizing solution, just like the SHOW_ALL of Phaser2).

The reason I made another basic template is that, it can be easily extended to add ES6, TypeScript and whatever else you need. And I will add some extra setup to be able to integrate with my scene editor (built for my own game engine Voltar, I am trying to port it to Phaser3 recently). What's more, the port is automatically forward if 4000 is not available. It is quite handy for people who want to serve 2 or more project at the same time.

Happy coding with Phaser3

[Ppozniak]

Okay guys! 
 

https://github.com/ppozniak/create-phaser-app

Here's the thing.

 

For now this is a basic setup that will do basically nothing (you gotta start somewhere).

I was thinking if it is necessary to use Lerna here to separate templates for each language (TS, JS coffee). If someone has got a bigger experience than me in terms of doing such generators let me know if that's a good solution.

In templates folder each language has it's own template where all the "normal" files will live. I also need to add the "cd ${projectPath}` 'npm install' commands to execute at the end of generator wizard.

 

Usage in terminal will be `create-phaser-app ping-pong` if you want to create a project in new `ping-pong` folder (created in your current cwd).

Also in future I was thinking about using https://github.com/tj/commander.js to include optional CLI options.

 

For now I think we should move the discussion about this to some other place and start developing this thing. Also I think it's time to find an *almost perfect* folder/project structure.

 

TODO first:

- set up almost perfect folder structure, webpack config and small example (for example  rotating logo) for plain javascript template

- finish up generator with `cd` and npm i after folders and files are copied

 

If you want to test it use 'node ./index.js name-of-project'

 

Sorry for taking so long time but I've got a lot of my head  so much to do, so little time.

Best regards. 

[rblopes]

I've been quiet for too long, time to share some input, I guess...

First of all, if it's a community effort, please move the repository into a GitHub org and invite the interested parties later. (I'm not sure I'll be able to be part of it, but I'll make my contributions regardlessly.) phaser-contrib was available last time I checked.

If you're gonna go through the nightmares of Lerna and monorepo management, you'll want to study Yarn Workspaces a little too to save you some big headaches...

By the way, I tried commander.js once, but ended with Yargs for my command-line thingie. Not sure I was doing something really wrong with Commander, but after trying Yargs, I'm stuck with it anyway.

Besides Yeoman, there is another library that caught my attention recently. sao is the one used for create-vue-app. I haven't tested it, though, and I'm unsure of its minimalist approach, but the alternatives it offers over Yeoman may interest you.

Good luck in your project, I'm looking forward to it with great interest.

[Ppozniak]

2 hours ago, rblopes said:

I've been quiet for too long, time to share some input, I guess...

First of all, if it's a community effort, please move the repository into a GitHub org and invite the interested parties later. (I'm not sure I'll be able to be part of it, but I'll make my contributions regardlessly.) phaser-contrib was available last time I checked.

If you're gonna go through the nightmares of Lerna and monorepo management, you'll want to study Yarn Workspaces a little too to save you some big headaches...

By the way, I tried commander.js once, but ended with Yargs for my command-line thingie. Not sure I was doing something really wrong with Commander, but after trying Yargs, I'm stuck with it anyway.

Besides Yeoman, there is another library that caught my attention recently. sao is the one used for create-vue-app. I haven't tested it, though, and I'm unsure of its minimalist approach, but the alternatives it offers over Yeoman may interest you.

Good luck in your project, I'm looking forward to it with great interest.

Thanks, much appreciated. I won't hide that I absolutely don't have experience in terms of community work or generators. I just wanted to raise community's awareness that such way would be probably a good. I'll learn a lot if this goes well, otherwise maybe someone will want to take care of this, or this will just fail.

Edit: https://github.com/phaser-contrib 

[VincentB]

Hi guys,

I'm new to Phaser, I'm new to npm/webpack/and else and I got to tell you I spent the last 3 days to learn how things work to start up my project.

I didn't succeed yet  I got the webpack issue and after searching for a while I saw the workarounds and ended up here.

What a relief !

I'm not going to contribute to anything since I don't know anything, but just to let you know that creating an official boilerplate is going to help a lot so I totally support you.

In the meantime I'm going to use the https://github.com/photonstorm/phaser3-project-template and start testing around. Please continue 

[Ppozniak]

1 hour ago, VincentB said:

Hi guys,

I'm new to Phaser, I'm new to npm/webpack/and else and I got to tell you I spent the last 3 days to learn how things work to start up my project.

I didn't succeed yet  I got the webpack issue and after searching for a while I saw the workarounds and ended up here.

What a relief !

I'm not going to contribute to anything since I don't know anything, but just to let you know that creating an official boilerplate is going to help a lot so I totally support you.

In the meantime I'm going to use the https://github.com/photonstorm/phaser3-project-template and start testing around. Please continue 

Thanks! I'll do my best

[VincentB]

If I may suggest something, there could be a repo with a basic setup, and a number of branches that add features to it, e.g.

- javascript + webpack (like https://github.com/photonstorm/phaser3-project-template)

- ES6 + webpack

- Typescript + webpack

- Typescrypt + ESLint + webpack

- Typescrypt + webpack + cordova (mobile oriented)

....

 

So if we take the example of the webpack fix (with raw-loader), this would be done in the master branch and merged back in all branches using webpack.

Instead of having developers creating their own repo with a different boilerplate, they could create a branch and just do something different, even far away from the master, like "ES6 + yarn + XXX + YYY"

Then the most important would be to document/explain the different branches and what is inside, so it can become a central point for starting phaser 3 development.

 

 

[Ppozniak]

41 minutes ago, VincentB said:

If I may suggest something, there could be a repo with a basic setup, and a number of branches that add features to it, e.g.

- javascript + webpack (like https://github.com/photonstorm/phaser3-project-template)

- ES6 + webpack

- Typescript + webpack

- Typescrypt + ESLint + webpack

- Typescrypt + webpack + cordova (mobile oriented)

....

 

So if we take the example of the webpack fix (with raw-loader), this would be done in the master branch and merged back in all branches using webpack.

Instead of having developers creating their own repo with a different boilerplate, they could create a branch and just do something different, even far away from the master, like "ES6 + yarn + XXX + YYY"

Then the most important would be to document/explain the different branches and what is inside, so it can become a central point for starting phaser 3 development.

 

 

Yeah, that's the thing I'm thinking about much - the best way to create multiple "templates" which will also may have different examples inside depending on how big thing you want, but keeping everything as DRY as possible. I was even thinking if examples presets will be necessary, or they could've been different project? But I think it would be useful for showing off Phaser power with real examples which you can jump into and hack them in your way, play around and learn the mechanics of Phaser.

[digitsensitive]

@Ppozniak I would be glad to help you guys. Having a clean boilerplate is definitely something very useful. I want to share a link to my boilerplate. Maybe you can use something. Currently there is only work around with the TypeDefinition File. Is somebody already working to have a phaser types on https://www.npmjs.com/~types?

[fitness23]

1 hour ago, WizaEric said:

@Ppozniak I would be glad to help you guys. Having a clean boilerplate is definitely something very useful. I want to share a link to my boilerplate. Maybe you can use something. Currently there is only work around with the TypeDefinition File. Is somebody already working to have a phaser types on https://www.npmjs.com/~types?

@WizaEric I really like this! If I could add it might be nice if you can add a progress bar in that one for loading  there don't seem to be many resources telling you how to do it at the moment.