The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Displaying Scores and HUD

Next ►
►

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.

  1. 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.

  1. 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.score and updated via the updateScore method.

  1. 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.

  1. 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:

this.scoreText.setScrollFactor(0);
Element Type Fixed by Default? How to Fix if Not
Text Yes N/A
Images/Sprites No setScrollFactor(0)
Containers No setScrollFactor(0)

  1. 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:

  • fontFamily
  • fontSize
  • color
  • backgroundColor
  • padding
  • align

  1. 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:

  1. Add a score text at the top left.
  2. Add a timer text at the top right.
  3. 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.width is 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.

  1. Summary

  • HUD elements (like scores and timers) are essential for player feedback.
  • Use this.add.text to 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.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved