Games can be some of the most complicated types of software you can create. And the most fun.
It helps to use modern best practices to avoid messy bugs or more easily fix ones that come up.
Doing so saves you time and headaches. Most importantly it will help you make a better game.
We'll be creating the same game from the official Making your first Phaser 3 game guide. This way you can compare and contrast the differences.
Create Your Project
We will start with the phaser3-parcel-template. This will set up everything you need to start a development server and create production-ready files to publish.
In the official Phaser guide, everything is in a single HTML file so that's the entry point or where our code begins.
Our code is split into multiple files for better organization, reasoning about, and reading. For us, the entry point is the
This looks similar to
part1.html from the official Phaser guide. We've moved the example Scene consisting of the
update() functions into its own file called
import syntax to reference project files and external libraries. In the example above Phaser is an external library and
HelloWorldScene.js is a project file. We don't need the
.js extension because it is implied.
The official Phaser guide adds the Phaser library files as a separate
<script> tag in the
Everything about the Phaser config properties explained in the official guide still applies.
scene property in the
config object is an
Array instead of an object with
You'll see that our
HelloWorldScene.js file includes the
create() functions–we didn't keep
update() because we won't be using it–in a more structured format.
Anything you could have put in the scene object–like the
create() functions–can be put in a Scene class.
Let's create a
GameScene to hold our game logic. Use the
HelloWorldScene as a guide. We'll need to change the unique key in the constructor and delete any logic in the
We will be using the same assets from the official Phaser guide. You can download them here.
assets folder into your project's
public folder. The
public folder should at the base of the project on the same level as
Now we can preload the assets we'll be using and create a background and star to see it in action.
We need to add our
GameScene to the
scene list before we can try this out. Update your
main.js file like this:
Notice that we changed the
gravity.y value to
200 to match the official Phaser guide.
You can remove references to
HelloWorldScene if you like.
Now we can test our changes by opening a Terminal, going to our project folder, and running this command:
npm run start
Note: be sure to have run
npm install after you created your project as noted in the phaser3-parcel-template.
Open a browser window and go to http://localhost:8000 and you should see a blue background with a yellow star in the middle. 👏
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.