In this section, you’ll learn how to display scores and create a Heads-Up Display (HUD) in your Phaser games. A HUD is a crucial part of most games, providing players with real-time information such as scores, health, lives, and other game stats.
- What is a HUD?
HUD (Heads-Up Display) is an overlay that displays important information to the player during gameplay. Common HUD elements include:
- Score
- Health/Lives
- Level/Stage
- Timers
- Power-ups
Why is HUD important?
- Keeps players informed about their progress.
- Enhances the gaming experience.
- Provides feedback and motivation.
- Displaying Text in Phaser
Phaser makes it easy to display text on the screen using the this.add.text method.
Example: Displaying a Score
class MyGameScene extends Phaser.Scene {
constructor() {
super({ key: 'MyGameScene' });
}
create() {
// Display the initial score at the top left
this.score = 0;
this.scoreText = this.add.text(16, 16, 'Score: 0', {
fontSize: '32px',
fill: '#fff'
});
}
updateScore(points) {
this.score += points;
this.scoreText.setText('Score: ' + this.score);
}
}Explanation:
this.add.text(x, y, text, style): Adds text at position(x, y)with the specified style.this.scoreText.setText(newText): Updates the displayed text.- The score is stored in
this.scoreand updated via theupdateScoremethod.
- Organizing HUD Elements
You can add multiple HUD elements (e.g., score, lives, timer) by creating separate text objects.
Example: Score and Lives
class MyGameScene extends Phaser.Scene {
constructor() {
super({ key: 'MyGameScene' });
}
create() {
this.score = 0;
this.lives = 3;
this.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '24px', fill: '#fff' });
this.livesText = this.add.text(16, 48, 'Lives: 3', { fontSize: '24px', fill: '#fff' });
}
updateScore(points) {
this.score += points;
this.scoreText.setText('Score: ' + this.score);
}
loseLife() {
this.lives -= 1;
this.livesText.setText('Lives: ' + this.lives);
}
}Tip: Place HUD elements in screen corners or edges to avoid overlapping with gameplay.
- Keeping HUD Elements Fixed (Camera Effects)
By default, HUD elements are fixed to the camera. However, if you use camera scrolling, ensure your HUD stays in place.
Phaser 3 text objects are fixed to the camera by default.
If you use containers or custom objects, set their scroll factor:
| Element Type | Fixed by Default? | How to Fix if Not |
|---|---|---|
| Text | Yes | N/A |
| Images/Sprites | No | setScrollFactor(0) |
| Containers | No | setScrollFactor(0) |
- Styling Your HUD
You can customize the appearance of your HUD using the style object:
this.add.text(16, 16, 'Score: 0', {
fontFamily: 'Arial',
fontSize: '32px',
color: '#ff0',
backgroundColor: '#000',
padding: { x: 10, y: 5 },
align: 'center'
});Common Style Properties:
fontFamilyfontSizecolorbackgroundColorpaddingalign
- Practical Exercise
Exercise:
Create a simple Phaser scene that displays a score and a timer. The score should increase by 10 every second, and the timer should count up from 0.
Starter Code
class HudScene extends Phaser.Scene {
constructor() {
super({ key: 'HudScene' });
}
create() {
// Your code here
}
}Tasks:
- Add a score text at the top left.
- Add a timer text at the top right.
- Every second, increase the score by 10 and update the timer.
Solution
class HudScene extends Phaser.Scene {
constructor() {
super({ key: 'HudScene' });
}
create() {
this.score = 0;
this.timeElapsed = 0;
// Score at top left
this.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '24px', fill: '#fff' });
// Timer at top right
this.timerText = this.add.text(this.sys.game.config.width - 150, 16, 'Time: 0', { fontSize: '24px', fill: '#fff' });
// Timer event: every 1 second
this.time.addEvent({
delay: 1000,
callback: () => {
this.score += 10;
this.timeElapsed += 1;
this.scoreText.setText('Score: ' + this.score);
this.timerText.setText('Time: ' + this.timeElapsed);
},
callbackScope: this,
loop: true
});
}
}Explanation:
this.time.addEvent: Schedules a repeating event every 1000ms (1 second).- Updates both score and timer texts.
this.sys.game.config.widthis used to position the timer at the top right.
Common Mistakes & Tips:
- Forgetting to update the text after changing the score/timer.
- Not using
setScrollFactor(0)if your game world scrolls. - Overlapping HUD elements—adjust positions as needed.
- Summary
- HUD elements (like scores and timers) are essential for player feedback.
- Use
this.add.textto display and update information. - Keep HUD elements fixed to the camera, especially in scrolling games.
- Style your HUD for clarity and visibility.
- Practice updating HUD elements in response to game events.
Next Steps:
In the next section, you’ll learn about organizing your game code and managing multiple scenes, which will help you structure your HUD and other game components more efficiently.
Phaser - Game Development with JavaScript
Module 1: Introduction to Game Development and Phaser
- What is Game Development?
- Overview of Phaser
- Setting Up Your Development Environment
- Your First Phaser Project
Module 2: Phaser Basics
- Understanding the Game Loop
- Game Configuration and Scenes
- Loading and Displaying Images
- Working with Text
- Handling Input (Keyboard and Mouse)
Module 3: Sprites and Animation
Module 4: Game Physics and Interactivity
- Introduction to Physics in Phaser
- Enabling Physics on Sprites
- Collisions and Overlaps
- Interactive Objects and Events
