Bundling Up Your Phaser 3 Games Using Parcel | by Kevin Potschien | Apr, 2022

Picture by Nate Grant on Unsplash

As a newbie, it’s generally laborious discovering the precise assets if you wish to develop your Phaser 3 abilities. However they nonetheless exist: The tutorials that get you excited to construct the Platformer you all the time dreamt of constructing. Loads of occasions these tutorials are a few years previous. Personally, I spent loads of time attempting to debug previous, unmaintained tutorials, whereas all I needed to do was leap proper into Phaser.

On this tutorial, I wish to present you my present Phaser 3 setup, which will get my tasks began in seconds and depends on Parcel to bundle every little thing clear and tidy. It is best to have the ability to apply this setup to any current Repo you need, both changing the Webpack configuration or simply updating Parcel. We shall be utilizing Parcel 2.4.1, probably the most present model by the point of writing.

We’re gonna use two packages in our mission, which we’re gonna set up utilizing both yarn or npm. If you happen to’re not sure which one to make use of, it’s most likely npm. For the remainder of the article, I shall be utilizing yarn, regardless that it shouldn’t matter an excessive amount of!

yarn add -D parcel parcel-reporter-static-files-copynpm i --save-dev parcel parcel-reporter-static-files-copy

Both of those will set up each of the dependencies directly. If every little thing went easily we will leap to the following half and see how the mission ought to be set as much as work with the upcoming examples.

Folder Construction

My present folder construction appears to be like one thing like this. After all, yours can and doubtless will look totally different as you progress in your journey, however for me, that is how I begin each single time.

├── .parcelrc
├── .gitignore
├── package deal.json
├── src
│ ├── app.js
│ ├── belongings
│ │ ├── audio
│ │ ├── fonts
│ │ └── photographs
│ │ └── instance.png
│ ├── configs
│ │ ├── constants.js
│ │ └── phaserConfig.js
│ ├── index.html
│ ├── scenes
│ │ └── StartScene.js
│ └── types.css
└── yarn.lock

We shall be configuring Parcel in two spots, beginning along with your package deal.json file. Under you’ll discover a full model of my file. Discover that in the event you had been to repeat the contents into your personal package deal.json, you would wish to run an npm set up afterwards. However on the whole, we don’t wanna try this, as the most important chunk of thepackage deal.json ought to be generated and never pasted.

package deal.json

Our begin-script comprises the decision to start out our Improvement Setting, utilizing our index.html contained in the supply folder. The --open argument will immediate your browser to open by itself so you may get began immediately.

The construct has slightly extra happening: rm -rf .dist makes certain that our dist folder will get deleted each time we create a brand new one. This fashion we keep away from an enormous pile up of older revisions and have solely the most recent construct out there. Observe that in the event you’re on Home windows, you’ll most likely run into issues at this level. Simply eliminate rm -rf .dist && and you need to be able to go.

--no-source-maps tells Parcel to not construct, nicely — supply maps. I personally don’t want further recordsdata in my dist folder, however in the event you wanna discover out why you would possibly want them, this is for you.

The second half we have to deal with is the staticFiles part in our package deal.json. These choices are important for dealing with our belongings, in order that they find yourself in the precise house when utilizing them in our sport. In our instance we copy the entire belongings folder from our supply listing into the highest stage of our then newly created dist folder. It’s fairly self-explanatory, particularly in the event you let the script run and study what occurred contained in the dist folder.


Our final step is to let Parcel know that we wanna use the parcel-reporter-static-files-copy plugin. To do this, we create a .parcelrc file within the root of our mission and fill it with the next data:

You don’t want to know this to its full lengthen, however in the event you’re curious, take a look at the Plugins section in Parcel’s documentation.

More Posts