Get Bitmap Text Bounds

Demonstrates how to use the getTextBounds method to retrieve the dimensions and global position of BitmapText objects, useful for layout and alignment.

Get Bitmap Text Bounds, running
1024 × 768
GitHub
class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.bitmapFont('atari', 'assets/fonts/bitmap/atari-smooth.png', 'assets/fonts/bitmap/atari-smooth.xml');
        this.load.bitmapFont('gothic', 'assets/fonts/bitmap/gothic.png', 'assets/fonts/bitmap/gothic.xml');
        this.load.bitmapFont('hyper', 'assets/fonts/bitmap/hyperdrive.png', 'assets/fonts/bitmap/hyperdrive.xml');
    }

    create ()
    {
        this.graphics = this.add.graphics({ x: 0, y: 0, fillStyle: { color: 0xff00ff, alpha: 1 } });

        const text1 = this.add.bitmapText(0, 0, 'atari', 'Welcome!', 70);
        const text2 = this.add.bitmapText(0, 160, 'gothic', 'Welcome!', 40);
        const text3 = this.add.bitmapText(0, 300, 'hyper', 'Terminator 2', 128);

        this.bounds1 = text1.getTextBounds(true);
        this.bounds2 = text2.getTextBounds(true);
        this.bounds3 = text3.getTextBounds(true);
    }

    update ()
    {
        this.graphics.clear();

        this.graphics.fillRect(this.bounds1.global.x, this.bounds1.global.y, this.bounds1.global.width, this.bounds1.global.height);
        this.graphics.fillRect(this.bounds2.global.x, this.bounds2.global.y, this.bounds2.global.width, this.bounds2.global.height);
        this.graphics.fillRect(this.bounds3.global.x, this.bounds3.global.y, this.bounds3.global.width, this.bounds3.global.height);
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Static24 examples