Loading Bitmap Fonts
Learn how to load and display bitmap fonts using PNG and XML pairs, including how to update bitmap text content dynamically in the update loop.
1024 × 768
class Example extends Phaser.Scene
{
dynamic = null;
value = 0;
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.bitmapFont('desyrel', 'assets/fonts/bitmap/desyrel.png', 'assets/fonts/bitmap/desyrel.xml');
this.load.bitmapFont('desyrel-pink', 'assets/fonts/bitmap/desyrel-pink.png', 'assets/fonts/bitmap/desyrel-pink.xml');
this.load.bitmapFont('shortStack', 'assets/fonts/bitmap/shortStack.png', 'assets/fonts/bitmap/shortStack.xml');
}
create ()
{
this.add.bitmapText(0, 0, 'desyrel', 'Lorem ipsum\ndolor sit amet');
this.add.bitmapText(0, 200, 'desyrel-pink', 'Excepteur sint occaecat\ncupidatat non proident');
this.add.bitmapText(0, 400, 'shortStack', 'Phaser BitmapText');
this.dynamic = this.add.bitmapText(0, 500, 'desyrel', '');
}
update ()
{
this.dynamic.text = `value: ${this.value.toFixed(2)}`;
this.value += 0.01;
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.AUTO,
parent: 'game-container',
scene: Example
};
const game = new Phaser.Game(config);