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.

In this article, we will show you how to create games in Phaser 3 using modern JavaScript and best practices.

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.

Go here if you need help using the phaser3-parcel-template.

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 main.js file.

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

import Phaser from 'phaser'

import HelloWorldScene from './scenes/HelloWorldScene'

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

export default new Phaser.Game(config)

This looks similar to part1.html from the official Phaser guide. We've moved the example Scene consisting of the preload(), create(), and update() functions into its own file called HelloWorldScene.js.

In modern JavaScript, we use the 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 index.html file.

Everything about the Phaser config properties explained in the official guide still applies.

Scenes

Our scene property in the config object is an Array instead of an object with preload(), create(), and update().

You'll see that our HelloWorldScene.js file includes the preload() and create() functions–we didn't keep update() because we won't be using it–in a more structured format.

We are using modern JavaScript's support of classes instead of just creating objects or newable functions–don't worry if you don't know what these are.

Anything you could have put in the scene object–like the preload() and create() functions–can be put in a Scene class.

Create GameScene

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 preload and create methods.

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

import Phaser from 'phaser'

export default class GameScene extends Phaser.Scene
{
	constructor()
	{
		super('game-scene')
	}

	preload()
	{

	}

	create()
	{
		
	}
}

Loading Assets

We will be using the same assets from the official Phaser guide. You can download them here.

Copy the assets folder into your project's public folder. The public folder should at the base of the project on the same level as src.

Now we can preload the assets we'll be using and create a background and star to see it in action.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import Phaser from 'phaser'

export default class GameScene extends Phaser.Scene
{
	constructor()
	{
		super('game-scene')
	}

	preload()
	{
		this.load.image('sky', 'assets/sky.png')
		this.load.image('ground', 'assets/platform.png')
		this.load.image('star', 'assets/star.png')
		this.load.image('bomb', 'assets/bomb.png')

		this.load.spritesheet('dude', 
			'assets/dude.png',
			{ frameWidth: 32, frameHeight: 48 }
		)
	}

	create()
	{
		this.add.image(400, 300, 'sky')
    	this.add.image(400, 300, 'star')
	}
}

We need to add our GameScene to the scene list before we can try this out. Update your main.js file 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 GameScene from './scenes/GameScene'

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

export default new Phaser.Game(config)

Notice that we changed the gravity.y value to 300 from 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. 👏

Coming Up

We've transformed parts 1 and 2 from the official Making your first Phaser 3 game guide into modern JavaScript.

In the next part, we will tackle creating platforms and a player character.

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.

Learn to make an Infinite Jumper in Phaser 3 with modern JavaScript!

Drop your email into the box below to get this free 60+ page book and join our newsletter.

Learn more about the book here.