MDN Breakout with Phaser 3 — Part 5
By: Michael Bragg
Tags: Phaser 3, JavaScript, Game Development

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 creating the score, winning the game conditions, and adding extra lives.

In this article, we’ll go through creating extra difficulty when all bricks are cleared and step 14 of the MDN tutorial: “14. Animations and tweens.”

Clearing the Level and Adding Difficulty

We’ll begin creating the functionality to allow the player to repeatedly clear the bricks by creating state variables. First, we’ll add a variable to physicsConstants.js that determines how much the speed increases each time the bricks are cleared.

We’ll also add a physics variable that determines the ball’s maximum speed to keep a constraint on how crazy it can get.

Next, we’ll add a value to gameState.js to determine how much the score increases each time the bricks are cleared.

And we’ll add an attribute in the Scene object in the constructor method to track how many times the game has been cleared. Note that we put a value in a separate constants file if it will not change during gameplay, and we put it in the Scene’s constructor method, thus attaching it to the scene object, if it will change.

Doing so allows the variables that are affected by gameplay to be directly accessible in the scene, while allowing constants that are involved in tuning the game to be concentrated in a logical location. This becomes increasingly important as the scale of your game increases. A single constant could be used in a dozen scenes. So by having the ability to look in one logical location when the value needs to be tuned, you make your game more easy to maintain.

Next, we’ll create a label, ClearedLabel, to track clears and display them. We’ll create ClearedLabel.js in the ‘src/ui’ directory. The code follows.

We’ll use the same process we used to create our previous labels:

import the label make a property of the Scene object in its constructor method in which to store the label make a createLabel method in the Scene call the createLabel method in the Scene’s create method and assign the return value to the property created in 2.

With the label in place and the state variables created, we just have to modify how the ball’s speed is set, modify the scoring, and increment the clears when all the bricks have been destroyed.

The ball’s speed is modified based on the state variables in setBallVelocity.

The scoring is modified based on the cleared state variables in the ballHitBrick method.

The clears are incremented in the resetLevel method.

In resetLevel, we pause the physics before repopulating the bricks to keep from triggering a brick hit before the ball and paddle position are reset.

After incrementing the number of times the bricks have been cleared and setting that value in ClearedLabel, we call setBallVelocity to make the ball go faster with the new cleared value.

Then we call a repopulateBricks after a delay. The enableBody method turns the physics and visibility back on for each block.

On line 58, the clearAlpha method resets the brick gameobject’s alpha value. This isn’t needed now, but will come into play when we implement tweens. Otherwise the brick would stay invisible after it was repopulated.

Ball Animation

Before we begin animating the ball, you’ll want to grab the ball animation sprite sheet from the assets repository.

Next, we replace the reference to the static ball image with a reference to the sprite sheet, define the animations in createBall, and have the animation play in the ballHitPaddle method.

Note that we map the array of wobble frames into an array of objects that have key and frame properties, which is then assigned to the frames property passed into anims.create() on line 14.

Tweens

Tween creation is another step that is pretty different for Phaser 3 than what you see in the MDN breakout tutorial.

The process is relatively simple, though the signature of the tween creation method is a bit complex. The one catch is we have to turn physics off but leave visibility on the brick before executing the tween. Otherwise the ball could collide with the brick again while it’s vanishing, creating unintended effects.

We’ll start by adding a delay variable that determines how long the bricks take to vanish to gameConstants.js.

Next comes the tween code:

So now we have increased difficulty and the ability to clear the bricks multiple times. We also have a ball animation and a brick fadeout effect.

Be sure to delete or comment out the line of code that was used before to disable the brick’s body, or that will just make the bricks disappear and you won’t see the tween work. I know this because I did it when I was presenting this tutorial!

Up Next

In the next article in this tutorial series, we’ll wrap up by covering the creation of a start button and game state to control it.