Back to templates

Template details

Brunch with Phaser 3

A Brunch skeleton for making games with Phaser 3, with variants for CoffeeScript, ES6, and TypeScript.

About this template

Brunch with Phaser 3 is a Brunch project skeleton that scaffolds a new Phaser 3 game from a single command-line template, replacing manual build configuration with a ready-to-run structure.

What is Brunch with Phaser 3?

Brunch with Phaser 3 is a project skeleton for the Brunch build tool that generates a complete Phaser 3 game project. It takes a project name and produces a directory containing an app folder for game code and app/static/assets for images, audio, and other static files. The skeleton is maintained by GitHub user samme and is designed to work with Brunch's watch-and-rebuild workflow, outputting a minified bundle for production via brunch build --production.

What makes Brunch with Phaser 3 stand out?

Brunch with Phaser 3 stands out for its zero-config scaffolding and official language variants. Key features include:

  • One-command scaffolding — brunch new <project> -s phaser creates a full Phaser 3 project from the command line.
  • Multiple language variants — linked variants exist for CoffeeScript (brunch-phaser-coffee), ES6 (brunch-phaser-es6), TypeScript (brunch-phaser-typescript), and Phaser CE (brunch-phaser2).
  • npm-managed Phaser — the latest Phaser 3 release is installed automatically when you create a project; specific versions like 3.7 can be pinned with npm install -S phaser@3.7.
  • Development server with live rebuild — npm run start or brunch watch --server watches source files and rebuilds continuously.
  • Production minification — npm run build or brunch build --production outputs minified code for deployment.
  • Vendor script support — unminified third-party libraries can be added to the vendor directory and get bundled by Brunch.
  • Custom skeleton reuse — you can clone the repository locally, modify it, and use it as your own brunch new template via a local path.

Who is Brunch with Phaser 3 for?

Brunch with Phaser 3 is for game developers who want a preconfigured Phaser 3 project without manually setting up Brunch. It fits developers who prefer CoffeeScript, ES6, or TypeScript through its variants. It is also useful for developers comparing build tools, since the author notes in the README that they have since switched to Parcel, making this skeleton a lightweight reference for Brunch-based game builds.

What can you do with Brunch with Phaser 3?

  • Rapid prototype a new game — scaffold a project, write game logic in app, place sprites and audio in app/static/assets, and watch it rebuild in the browser.
  • Pin a specific Phaser version — run npm install -S phaser@3.7 to control the exact Phaser build your project uses, then update with npm update.
  • Extend with npm packages — install any npm package and require it in your code; Brunch bundles it into the output.
  • Use it as a private starting point — clone the repo, commit your own modifications, and run brunch new <project> -s ./path/to/brunch-phaser to apply your custom skeleton.

How does Brunch with Phaser 3 work?

First, install Node.js and the Brunch CLI globally (npm install -g brunch). Then run brunch new <project> -s phaser to generate the project. Use npm run start for development (watch + server) or npm run build for a minified production build. Game code lives in app, and assets go in app/static/assets.

FAQ

How do I create a new Phaser 3 project with this skeleton?

Run npm install -g brunch once, then run brunch new <project> -s phaser. The command pulls this skeleton and installs the latest Phaser 3 release via npm.

How do I install a specific version of Phaser?

Check available versions with npm view phaser version, then pin one with npm install -S phaser@3.7. To update later, run npm update.

What are the variants of this skeleton?

The README links to brunch-phaser-coffee (CoffeeScript), brunch-phaser-es6 (ES6), brunch-phaser-typescript (TypeScript), and brunch-phaser2 (Phaser CE, the 2.x branch).

Where should I put my game code and assets?

Write your JavaScript, TypeScript, or CoffeeScript code in the app directory. Put images, audio, and other static assets in app/static/assets.

Can I modify this skeleton for my own use?

Yes. Clone the repository locally, commit your changes, and reference the local path with brunch new <project> -s ./path/to/brunch-phaser.