MDN Breakout with Phaser 3 — Part 1

The MDN “2D breakout game with Phaser” tutorial shows you a basic way to make a game with Phaser 2. I recently did the tutorial so I could guide others through it.

However, the tutorial doesn’t show you how to use the most recent version of Phaser, or how to use good design concepts that will help you make your own game using JavaScript best practices.

So I set about adapting the MDN tutorial according to the format set out in the Ourcade “Modern JavaScript” phaser tutorial. The tutorial uses the phaser3-parcel-template, which helps with starting up a complex phaser project.

Here is a link to the finished code, and another link to the assets used in the project.

In this article, I will cover steps 1 through 6 of the MDN article: “1.Initialize the framework,” “2.Scaling,” “3.Load the assets and print them on screen,” “4. Move the ball,” “5.Physics,” and “6. Bounce off the walls.”

Initialize the Framework

To initialize the framework, we will follow the directions on the phaser3-parcel-template repository to clone the repository into a new directory. Take care that if you wish to upload your work to your own repository at a later time, you will have to delete the hidden “git” folder.

With this template, you get a project format that is set up for modular design. We will use JavaScript imports to allow us to split our code into modules.

You’ll note that when importing, we don’t need the ‘.js’ extension. This is due to some of the modules included via NPM in the project.

The next thing we want to do is set the values for the canvas type and size. We’ll go into the ‘main.js’ file in the ‘/src’ directory of the project. We’ll find the config object there, and that is where we can set the game to use the ‘CANVAS,’ set the size of the game world, and set scaling.

We’ll create the GameScene in just a minute, and it will replace the HelloWorldScene that comes with phaser3-parcel-template.

In the above code, we set the type of display to canvas (step 1), while our other set the canvas size, set the scaling (step 2), and set the physics (step 5).

Create Game Scene

Before we begin loading assets into the scene, we’ll create the GameScene.js file in src/scenes.

Create the Ball

Before going through the steps, you’ll want to grab the ball asset so you can load it. We’ll also want to create a reference to the canvas that we’ll use for positioning the ball when it is created. This will be useful, as the canvas size can vary based on the size of the user’s screen.

Next, we’ll use a pattern that will be repeated throughout the tutorial for creating gameobjects.

1. create a key constant to use when loading the asset
2. make a property of the Scene object in its constructor method in which to store the asset
3. load the asset in the Scene’s preload method
4. make a createObject method in the Scene
5. call the createObject method in the Scene’s create method and assign the return value to the property created in 2.

In the below code, we’ll also cover step 6 of the MDN tutorial, “Bounce off the walls,” because it only requires on line of code in the createBall method.

Note that in the createBall method, we create an object and then return it from the method. This is best practice for a createObject method. The return value is then attached to a property of the scene object, which allows it to be used by other methods in the scene.

With that, we have accomplished steps 1 through 6 of the MDN breakout tutorial, but with Phaser 3 and in a modular JavaScript format!

We have a scene, and we have a ball that bounces around the screen.

Up Next

In the next article in this tutorial series, we will add a paddle and create game over conditions.