MDN Breakout with Phaser 3 — Part 2
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.
The last step of the tutorial covered initializing the framework, creating the Scene, and creating the ball.
In this article, I will cover steps 7 and 8 of the MDN tutorial: “7. Player paddle and controls,” and “8. Game over.”
Making Player Paddle and Controls
Before we get started making the paddle, be sure to grab the paddle image from the assets repository.
To make the Paddle gameobject, we’ll follow the same steps we used to create the ball:
- create a key constant to use when loading the asset
- make a property of the Scene object in its constructor method in which to store the asset
- load the asset in the Scene’s preload method
- make a createObject method in the Scene
- call the createObject method in the Scene’s create method and assign the return value to the property created in 2.
The code to create the paddle in GameScene.js follows:
Note that we set the body to be immovable on line 28, which will keep it from being moved by collisions. It can still be assigned velocity in response to controls.
Paddle-Ball Collision
Our next step is creating collision between the paddle and the ball. This is a simple step that involves one line of code in the create method. It is possible to add a custom method that can be invoked by the collision, which we will do later.
Controlling the Paddle
We start off making the paddle controllable by creating some physics constants. Let’s find those constants a good home. Create a ‘/src/config’ directory, and in it create a physicsConstants.js file.
We’ll put the constants in an object and export them for use wherever we need them. This way, if we were to expand our project to a point where we used the constants in many files, we could control the game balance from one location.
We’ll place a variable that controls the paddle’s velocity in the Scene’s constructor method, as this value will change in response to input and thus will not be constant.
The paddle will be controlled by the direction keys.
I ended up choosing to control the paddle mostly independent of Phaser physics, only using setVelocity() while calculating velocity based on my own variables.
The update method can be run in any scene to perform operations on game objects and check game conditions.
It is wise from my experience to be thrifty with how much code you put in an update function in a game engine. Especially if the code will be run on numerous game objects, consider finding other ways to solve the problem, such as with periodically invoked methods.
The code here is pretty simple. We just add positive or negative acceleration to the paddle based on a left or right input. And we reduce the velocity based on drag if there is no input.
The velocity value is stored in a property of the Scene object, modified based on inputs, and then the paddle velocity is set to that value each time the update method runs.
Game Over
The next thing we will do is cause the game to be over when the ball hits the bottom of the screen.
This is fairly simple, but the way it is done is quite different from the Phaser 2 example in the MDN tutorial.
One key piece of code is on line 4, where we set a “worldbounds” even handler, assign it to the detectBounds method, and pass in the “this” value of the scene object with the third argument.
Line 9, a piece of code in the createBall method, is required to allow the ball’s collision with the world boundaries to trigger this event.
You can find more information about the arguments in detectBounds in the Phaser documentation for the WORLDBOUNDS event.
Now we have a paddle that responds to player inputs and game over conditions.
Up Next
In the next article in this tutorial series, we will create the brickfield and add sound effects.