Introduction

Displaying text is one of the first practical skills you need in Phaser 4 game development. Text is used everywhere in games—scores, health, instructions, menus, timers, dialogue, and status messages.

If sprites and images build the visual world of your game, text is what helps communicate information to the player. If you are still learning the structure of a scene, check out Creating Your First Scene in Phaser 4. You can also explore more tutorials in our Phaser category.

Why Text Matters in a Phaser Game

In a real project, text is not just decoration. It is a core part of the user experience and game feedback system.

• score counters
• lives and health
• tutorial hints
• level names
• pause messages
• game over screens
• button labels
• dialogue and story text

Before you build advanced HUD systems or full menu interfaces, you should understand how basic text objects work in Phaser 4.

The Basic Way to Add Text

In Phaser, text is usually added inside the create() method, because this is where scene objects are created after assets have loaded.

create() {
    this.add.text(300, 250, 'Hello Phaser 4', {
        fontSize: '32px',
        color: '#ffffff'
    });
}

Understanding the text() Method

The syntax is simple and beginner-friendly:

this.add.text(x, y, content, style);

Parameters

• x: horizontal position on the canvas
• y: vertical position on the canvas
• content: the string you want to display
• style: an object that controls the text appearance

this.add.text(300, 250, 'Hello Phaser 4', {
    fontSize: '32px',
    color: '#ffffff'
});

In this example, Phaser places the text:

• at x = 300
• at y = 250
• with the content "Hello Phaser 4"
• using a font size of 32px
• in white

Full Example: Adding Text in a Scene

Here is a complete scene example that displays a title and a smaller subtitle:

export default class MainScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MainScene' });
    }

    create() {
        this.add.text(220, 180, 'My First Phaser Game', {
            fontSize: '40px',
            color: '#ffffff',
            fontStyle: 'bold'
        });

        this.add.text(260, 250, 'Press Start to Play', {
            fontSize: '24px',
            color: '#facc15'
        });
    }
}

This creates two text objects on the screen:

• a large white title
• a smaller yellow instruction line

Common Text Style Properties

Phaser lets you customize text using a style object. Some of the most useful properties are:

this.add.text(100, 100, 'Welcome Player', {
    fontSize: '32px',
    color: '#ffffff',
    fontFamily: 'Arial',
    fontStyle: 'bold',
    backgroundColor: '#000000',
    padding: { x: 10, y: 5 }
});

Useful style options

• fontSize: controls the size of the text
• color: changes text color
• fontFamily: sets the font
• fontStyle: adds styles like bold or italic
• backgroundColor: adds a background behind the text
• padding: adds inner spacing

These style properties help you make text more readable and visually stronger in menus, HUD elements, and overlays.

Storing Text in a Variable

In many cases, you do not just want to display text once—you want to update it later. For example:

• increasing score
• changing timer value
• updating health
• switching messages

To do that, store the text object in a variable:

create() {
    this.scoreText = this.add.text(20, 20, 'Score: 0', {
        fontSize: '28px',
        color: '#ffffff'
    });
}

Now you can access it later inside update() or any other scene method.

Updating Text Dynamically

Once text is stored in a variable, you can change its content at runtime using setText().

create() {
    this.score = 0;

    this.scoreText = this.add.text(20, 20, 'Score: 0', {
        fontSize: '28px',
        color: '#ffffff'
    });
}

update() {
    this.score += 1;
    this.scoreText.setText('Score: ' + this.score);
}

What happens here?

• this.score starts at 0
• every frame, the score increases
• setText() updates what the player sees

This is the foundation of live UI text in most Phaser games.

Multi-Line Text

You can also display text on multiple lines using \n:

this.add.text(100, 100, 'Level 1\nGet Ready!', {
    fontSize: '30px',
    color: '#ffffff',
    align: 'center'
});

This is useful for:

• instructions
• dialogue
• menu content
• stage announcements

Centering Text on the Screen

A common beginner goal is to place text in the middle of the game screen.

create() {
    const message = this.add.text(400, 300, 'Game Over', {
        fontSize: '48px',
        color: '#ff0000',
        fontStyle: 'bold'
    });

    message.setOrigin(0.5, 0.5);
}

Why setOrigin(0.5, 0.5)?

By default, text is positioned from its top-left corner. When you use setOrigin(0.5, 0.5), the origin moves to the center of the text object, making true centering much easier.

Example: Title Screen Text

Here is a more realistic example for a title scene:

export default class TitleScene extends Phaser.Scene {
    constructor() {
        super({ key: 'TitleScene' });
    }

    create() {
        this.add.text(400, 180, 'Space Runner', {
            fontSize: '56px',
            color: '#ffffff',
            fontStyle: 'bold'
        }).setOrigin(0.5);

        this.add.text(400, 280, 'Press SPACE to Start', {
            fontSize: '28px',
            color: '#facc15'
        }).setOrigin(0.5);

        this.add.text(400, 340, 'Use Arrow Keys to Move', {
            fontSize: '22px',
            color: '#cbd5e1'
        }).setOrigin(0.5);
    }
}

This pattern is very common in:

• menu scenes
• intro scenes
• pause screens
• end screens

Common Mistakes When Adding Text

1. Adding text inside update()

This is one of the most common beginner mistakes.

update() {
    this.add.text(100, 100, 'Hello');
}

This creates a brand new text object every frame, which will quickly hurt performance.

Correct approach: create the text once in create() and update it later with setText().

2. Forgetting to store the text object

Wrong:

create() {
    this.add.text(20, 20, 'Score: 0');
}

Better:

create() {
    this.scoreText = this.add.text(20, 20, 'Score: 0');
}

3. Hardcoding awkward positions

If you place text with random coordinates, it may look unbalanced on different screen sizes.

Try to think in layout terms:

• top-left for UI
• center for titles
• bottom for hints
• consistent spacing for menus

Best Practices for Phaser Text

• create text in create(), not update()
• store text in variables if it needs to change
• use setText() for updates
• use setOrigin(0.5) for centered UI
• keep style objects readable and consistent
• use clear font hierarchy for titles, subtitles, and UI labels

As your game grows, these habits will make your HUD and menus much easier to manage.

Code Snippet

export default class MainScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MainScene' });
    }

    create() {
        this.score = 0;

        this.add.text(400, 100, 'Phaser 4 Demo', {
            fontSize: '42px',
            color: '#ffffff',
            fontStyle: 'bold'
        }).setOrigin(0.5);

        this.scoreText = this.add.text(20, 20, 'Score: 0', {
            fontSize: '28px',
            color: '#facc15'
        });
    }

    update() {
        this.score += 1;
        this.scoreText.setText('Score: ' + this.score);
    }
}

FAQ

Conclusion

Adding text to the screen in Phaser 4 is simple, but it introduces several essential concepts in game UI:

• positioning objects
• styling content
• storing references
• updating UI dynamically

Once you understand how Phaser text objects work, you can start building real interface systems such as scoreboards, timers, health displays, and menu screens.

If you want to continue learning Phaser fundamentals, revisit Creating Your First Scene in Phaser 4 or browse more tutorials in the Phaser section.