Bundling Up Your Phaser 3 Games Using Parcel
An intuitive layout to save time on setup
As a beginner, it’s sometimes hard finding the right resources when you want to develop your Phaser 3 skills. But they still exist: The tutorials that get you excited to build the Platformer you always dreamt of building. A lot of times these tutorials are a couple of years old. Personally, I spent a lot of time trying to debug old, unmaintained tutorials, while all I wanted to do was jump right into Phaser.
In this tutorial, I want to show you my current Phaser 3 setup, which gets my projects started in seconds and relies on Parcel to bundle everything clean and tidy. You should be able to apply this setup to any existing Repo you want, either replacing the Webpack configuration or just updating Parcel. We will be using Parcel 2.4.1, the most current version by the time of writing.
Prerequisites
We’re gonna use two packages in our project, which we’re gonna install using either yarn or npm. If you’re unsure which one to use, it’s probably npm. For the rest of the article, I will be using yarn, even though it shouldn’t matter too much!
yarn add -D parcel parcel-reporter-static-files-copynpm i --save-dev parcel parcel-reporter-static-files-copy
Either of these will install both of the dependencies at once. If everything went smoothly we can jump to the next part and see how the project should be set up to work with the upcoming examples.
Folder Structure
My current folder structure looks something like this. Of course, yours can and probably will look different as you progress in your journey, but for me, this is how I start every single time.
├── .parcelrc
├── .gitignore
├── package.json
├── src
│ ├── app.js
│ ├── assets
│ │ ├── audio
│ │ ├── fonts
│ │ └── images
│ │ └── example.png
│ ├── configs
│ │ ├── constants.js
│ │ └── phaserConfig.js
│ ├── index.html
│ ├── scenes
│ │ └── StartScene.js
│ └── styles.css
└── yarn.lockConfiguring Parcel
We will be configuring Parcel in two spots, starting with your package.json file. Below you’ll find a full version of my file. Notice that if you were to copy the contents into your own package.json, you would need to run an npm install afterwards. But in general, we don’t wanna do that, as the biggest chunk of thepackage.json should be generated and not pasted.
package.json
Our start-script contains the call to start our Development Environment, using our index.html inside the source folder. The --open argument will prompt your browser to open by itself so you can get started right away.
The build has a little more going on: rm -rf .dist makes sure that our dist folder gets deleted every time we create a new one. This way we avoid a big pile up of older revisions and have only the latest build available. Note that if you’re on Windows, you will probably run into problems at this point. Just get rid of rm -rf .dist && and you should be ready to go.
--no-source-maps tells Parcel not to build, well — source maps. I personally don’t need extra files in my dist folder, but if you wanna find out why you might need them, this is for you.
The second part we need to take care of is the staticFiles section in our package.json. These options are essential for handling our assets, so they end up in the right space when using them in our game. In our example we copy the whole assets folder from our source directory into the top level of our then newly created dist folder. It’s pretty self-explanatory, especially if you let the script run and examine what happened inside the dist folder.
.parcelrc
Our last step is to let Parcel know that we wanna use the parcel-reporter-static-files-copy plugin. To do that, we create a .parcelrc file in the root of our project and fill it with the following information:
You don’t need to understand this to its full extend, but if you’re curious, check out the Plugins section in Parcel’s documentation.
