Phaser 3 with Parcel

This is a simple Phaser game template using Parcel. Most common transformations (CoffeeScript, Babel/Flow, TypeScript) work “out of the box”.

Use

# If you don't have Parcel, install it:
npm install -g parcel-bundler

# Clone or download this repo or its template <https://github.com/samme/phaser-parcel/generate>
# From the project directory, install:
npm install

# Auto-compile and run dev server:
npm run start

# Compile for production:
npm run build

You can edit these scripts in package.json to suit your needs. See:

• Parcel: Getting Started
• Parcel: Production
• Parcel: CLI

Game assets

Static assets used in your JavaScript must be imported:

import space from './assets/space.png'; // -> './space.89e3a46b.png'
// OR
import images from './assets/*.png'; // -> { space: './space.89e3a46b.png', … }

See BootScene for an example.

If you prefer, you can use a parcel plugin to copy static assets instead. You must copy file pack and multitexture atlas assets using a plugin. See the static-files-copy branch.

Package aliasing

You can use package.alias to specify an alternative Phaser build, e.g.,

{
  "name": "my-phaser-game",
  "alias": {
    "phaser": "./node_modules/phaser/src/phaser-arcade-physics.js"
  }
}

See the phaser-src branch.

Custom Phaser

See the imports branch.

Hot reload

When running the dev server the game is destroyed and then recreated after you save changes to your files. Rarely, this can fail. Just refresh the browser.

If you don't like hot reload at all, you can turn it off:

parcel serve src/index.html --no-hmr

More Phaser with Parcel

• phaser3-parcel-template