If you want to start making games with Phaser3 and skip having to figure out how to setup a local web server then this article is for you.

Maybe you are new to making games.

Maybe you are new to web development.

Or you just want to get started quickly because you have other things to do.

Your best solution is to use Parcel: a blazing fast, zero-configuration web application bundler.

If you want to know why you need something like Parcel, Webpack, or Rollup then refer to Phaser’s Getting Started guide.

Get Started in 5 Minutes or Less

If you are familiar npm then you can just clone this phaser3-parcel-template repository and use the usual npm incantations. The whole thing will take you less than 1 minute.

Otherwise follow along below.

First you’ll need to clone the repository. If you are unfamiliar with git then you can just download a copy of the project from Github.

Next you need to install npm. We recommend using Node Version Manager (nvm) instead of installing Node.js manually. It is no more difficult to install nvm and you’ll save yourself headaches later.

For Mac, open a Terminal and use:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

For Linux, open a Terminal and use:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

Note: the command here targets a specific version of nvm (0.35.2 in this case). Head over to the Github page for the latest version.

For Windows:

There is nvm-windows that comes with a native Windows installer. You can download the installer here.

After installation we can verify that nvm is installed on Mac or Linux with:

nvm --version

For Windows, open powershell or Command Prompt as Administrator and use:

nvm version

Now that you have nvm you need to install Node.js.

For Mac or Linux:

nvm install node
nvm use node

This will install the latest version of Node.js. You can also specify a specific version.

For Windows:

nvm install latest
nvm use latest

You can specify a version instead of latest if you so desire.

Verify that Node.js and npm is installed with:

node --version
npm --version

We are almost there! The last dependency you need to install is Parcel:

npm install -g parcel-bundler

Verify Parcel is installed with:

parcel --version

Now go to where you cloned or downloaded the phaser3-parcel-template and use:

npm install

Start the development server with:

npm run start

Open a browser window and go to http://localhost:8000 to see the Phaser3 in action. 🎉

Using the Template

There are a few things about this template that will help with making games with Phaser3. The big thing is it assumes the use of modern JavaScript and the organization of your code into multiple files.

That said you can still use this template with traditional or old JavaScript and put all your code into 1 giant file. If that’s what works for you then that’s fine with us!

A lot of the Phaser examples and tutorials you’ll find on the web are not using modern JavaScript or multiple files but examples and tutorials on the Ourcade Blog will. We believe you’ll run into less seemingly unsolvable bugs or roadblocks using modern best practices.

The entry point or where your game code starts is in main.js. This is where all the setup happens before we create a Phaser Game instance to run your game logic.

There is one example Scene called HelloWorldScene located in src/scenes/HelloWorldScene.js. All your code files are intended to be placed in the src folder.

For example, you can make a new Scene called MyScene.js in src/scenes and then add it to the Scenes list in main.js like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import Phaser from 'phaser'

import HelloWorldScene from './scenes/HelloWorldScene’
import MyScene from ‘./scenes/MyScene'

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: [HelloWorldScene, MyScene]
}

export default new Phaser.Game(config)

You can write all your code in src/index.html but we’ve split it out so that the mark up and code are separate. This is for readability and organizational purposes.

Publishing Your Game

The benefit of using a bundler like Parcel, Webpack, or Rollup is that creating a publishable production build is a piece of cake.

Production files differ from your development files in that the code will be minified, uglified, and bundled. This creates an optimized download size for your players. Other optimizations like code splitting may happen if you use the snazzy modern import() syntax.

Production files are placed in the dist directory. Create a production build with:

npm run build

Then upload the files in dist to a web server or use something Netlify or Firebase Hosting and share a URL to show off your game. 👏

Using TypeScript or Flow

If you are super fancy and want to use types in your code with TypeScript or a type checker like Flow then you can just do it thanks to Parcel.

For TypeScript just change all the .js files to be .ts and start writing TypeScript.

For Flow just put // @flow on the first line of your .js files.

In both cases you’ll want to install extra extensions to your code editor to make things even easier for yourself. Check their respective sites for more information on that.

We also have a dedicated TypeScript template in phaser3-typescript-parcel-template that you can use to avoid having to manually rename files. 🎉

Go Make Games

The whole process from zero to a running Phaser3 game should have been pretty easy with the phaser3-parcel-template. Now you still have to learn how to use Phaser 😭 but at least you saved yourself the headache of configuring development tools!

Let us know in the comments below if anything doesn’t work or is unclear. We’ll be happy to fix or clarify!

Be sure to sign up for our newsletter so you don't miss any future Phaser 3 game development tips and techniques!

Drop your email into the box below.

Don't miss any Phaser 3 game development content

Subscribers get exclusive tips & techniques not found on the blog!

Join our newsletter. It's free. We don't spam. Spamming is for jerks.