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

Working with Text

Next ►
►

Displaying and manipulating text is a fundamental part of most games, whether it’s for showing scores, instructions, dialogue, or menus. Phaser provides powerful and flexible ways to work with text objects. In this section, you’ll learn how to add, style, and update text in your Phaser games.

  1. Types of Text in Phaser

Phaser offers two main ways to display text:

Type Description Use Case Examples
Bitmap Text Uses pre-rendered bitmap fonts for performance. Retro games, pixel art style
Text Object Uses system fonts and supports rich styling. Scores, menus, instructions

In this section, we’ll focus on the Text Object, which is the most common and flexible for beginners.

  1. Adding Text to a Scene

To display text, you use the this.add.text method inside a scene’s create function.

Example: Displaying Simple Text

class MyScene extends Phaser.Scene {
  create() {
    this.add.text(100, 100, 'Hello, Phaser!', {
      font: '32px Arial',
      fill: '#ffffff'
    });
  }
}

Explanation:

  • 100, 100: The x and y coordinates where the text will appear.
  • 'Hello, Phaser!': The string to display.
  • The third argument is an object for styling (font size, font family, color, etc.).

  1. Styling Text

You can customize the appearance of your text using the style object.

Common Style Properties

Property Example Value Description
font '32px Arial' Font size and family
fill '#ff0000' Text color (hex or color name)
align 'center' Text alignment
stroke '#000000' Outline color
strokeThickness 4 Outline thickness
backgroundColor '#0000ff' Background color behind the text

Example: Styled Text

this.add.text(50, 200, 'Game Over', {
  font: '48px Verdana',
  fill: '#ff0000',
  stroke: '#000000',
  strokeThickness: 6,
  backgroundColor: '#ffff00',
  align: 'center'
});

Explanation:

  • The text will be large, red, outlined in black, and have a yellow background.

  1. Updating Text Dynamically

Text objects can be updated at any time, which is useful for things like scores or timers.

Example: Updating Score

class ScoreScene extends Phaser.Scene {
  create() {
    this.score = 0;
    this.scoreText = this.add.text(10, 10, 'Score: 0', {
      font: '24px Arial',
      fill: '#ffffff'
    });

    // Simulate score update
    this.time.addEvent({
      delay: 1000,
      callback: () => {
        this.score += 10;
        this.scoreText.setText('Score: ' + this.score);
      },
      loop: true
    });
  }
}

Explanation:

  • this.scoreText.setText('Score: ' + this.score); updates the displayed text.
  • The score increases every second.

  1. Text Alignment and Word Wrapping

Long text can be wrapped and aligned for better readability.

Example: Word Wrapping

this.add.text(20, 300, 'This is a long line of text that will wrap automatically.', {
  font: '20px Arial',
  fill: '#333333',
  wordWrap: { width: 200 }
});

Explanation:

  • wordWrap: { width: 200 } ensures the text wraps within 200 pixels.

  1. Practical Exercise

Exercise:
Create a scene that displays a welcome message, a score that increases when you click the mouse, and a "Game Over" message when the score reaches 50.

Solution

class TextExerciseScene extends Phaser.Scene {
  create() {
    this.score = 0;

    this.add.text(100, 50, 'Welcome to the Game!', {
      font: '32px Arial',
      fill: '#00ff00'
    });

    this.scoreText = this.add.text(100, 120, 'Score: 0', {
      font: '28px Arial',
      fill: '#ffffff'
    });

    this.gameOverText = this.add.text(100, 200, '', {
      font: '36px Arial',
      fill: '#ff0000'
    });

    this.input.on('pointerdown', () => {
      if (this.score < 50) {
        this.score += 10;
        this.scoreText.setText('Score: ' + this.score);
        if (this.score >= 50) {
          this.gameOverText.setText('Game Over!');
        }
      }
    });
  }
}

Explanation:

  • The score increases by 10 each time you click.
  • When the score reaches 50, "Game Over!" is displayed.

Common Mistakes & Tips:

  • Forgetting to update the text: Always use .setText() to change what’s displayed.
  • Not storing the text object: Assign your text to a variable (like this.scoreText) if you need to update it later.
  • Overlapping text: Make sure your text objects are positioned so they don’t overlap unless intended.

Summary

  • Phaser’s Text object lets you display and style text easily.
  • You can update text dynamically, which is essential for scores, timers, and messages.
  • Use style options to customize font, color, alignment, and more.
  • Remember to store references to text objects if you need to update them.
  • Practice by creating interactive text elements in your scenes.

Next: You’ll learn how to handle user input (keyboard and mouse) to make your games interactive!

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