Games can be one of the most complicated pieces of software to create. And the most fun.
It helps to use modern best practices to avoid nasty 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.
In Part 3 we handled collisions between platforms and the player and added keyboard controls. Go check it out if you haven't already.
We ended Part 3 with a character that can move and jump on platforms.
Now we need some stars to collect.
As you can tell, we are using the best practices covered in previous parts!
First, the constant
STAR_KEY is used to preload the star asset and then to create a group of equally spaced stars in
createStars() method returns the physics group which is used in
create() to add a collider for the stars and platforms.
We've kept the logic the same as the official Phaser guide. Check it out for an explanation of how 12 stars are made in the
Your refreshed browser window at http://localhost:8000 should show stars falling from the sky and landing on the ground and platforms. 👍
Next, let's handle collecting stars.
Collecting stars is handled by detecting an overlap between a star and the player. We do this on line 20.
Continuing on line 20 we see
this.collectStar as the third parameter. This is the method Phaser will call when an overlap is detected. The last parameter on this line is
this. It specifies the scope from which the
collectStar() method will be called.
collectStar(player, star) method we simply disable the physics body. The two parameters passed to
disableBody() tells Phaser to disable and hide the
Back in the browser, you should be able to move the player over stars and have them disappear! 🎉
Create a ScoreLabel
We want to show the player's score as they collect stars so let's create a
ScoreLabel class at
It is not strictly necessary to create a separate class for our score label. The official Phaser guide simply adds a
Text object to the Scene.
We've chosen to do so to keep all the score updating logic in one place. This will keep our
GameScene class smaller and easier to read.
Encapsulating common logic for reusability is a best practice. Because we made a
ScoreLabel class we can use it again in a different Scene without duplicating code–staying DRY!
ScoreLabel in hand, we can add it to our
Our score logic differs from the official Phaser guide.
Because we have a separate
ScoreLabel class we need to create a new instance of it on line 48 in the
createScoreLabel(x, y, score) method and then use
this.add.existing() to add it to the Scene.
The official Phaser guide uses the
this.add.text() factory instead. In both cases, a
Text object is created.
One notable difference is that we pass a number to
ScoreLabel instead of a formatted string. This is another application of DRY in that we don't need to do the same score text formatting in more than one place. It only happens in the
updateScoreText() method of
We can see it in action on line 40 where we add 10 points to the score each time a star is collected.
Try it out at http://localhost:8000 and you should be able to get 120 points by collecting all the stars. 🤩
In the next and final part, we will add bombs to make things a little more interesting!
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.