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.
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.
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:
For Windows, open
powershell or Command Prompt as Administrator and use:
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.
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:
Now go to where you cloned or downloaded the phaser3-parcel-template and use:
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
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
For example, you can make a new Scene called
src/scenes and then add it to the Scenes list in
main.js like this:
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
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
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
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.