PixiJS Bitmap Text — High-Performance Text Rendering

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about PixiJS Bitmap Text. We cover key concepts, practical examples, and best practices to help you master this topic.

PixiJS bitmap text renders text using pre-generated bitmap fonts for high performance, consistent appearance, and no dependency on system fonts.

What You'll Learn

By the end of this guide, you will create bitmap text from BMFont files, style text with size and alignment, use bitmap text for HUD and score displays, compare performance with standard text, and generate bitmap fonts.

Basic BitmapText

PIXI.Assets.load('font.fnt').then(function() {
    var text = new PIXI.BitmapText('Hello World', {
        fontName: 'MyFont',
        fontSize: 32,
        align: 'center'
    });
    text.x = 100;
    text.y = 100;
    app.stage.addChild(text);
});

Score Display

var scoreText = new PIXI.BitmapText('Score: 0', {
    fontName: 'Desyrel',
    fontSize: 24,
    tint: 0xffd700
});
scoreText.x = 10;
scoreText.y = 10;
app.stage.addChild(scoreText);

function updateScore(score) {
    scoreText.text = 'Score: ' + score;
}

Alignment

var centered = new PIXI.BitmapText('Center', {
    fontName: 'MyFont',
    fontSize: 20,
    align: 'center',
    anchor: 0.5
});
centered.x = app.screen.width / 2;
centered.y = app.screen.height / 2;

Common Mistakes

1. Font File Not Loaded

BitmapText requires the .fnt and .png files to be loaded first. Check file paths.

2. Wrong Font Name

The fontName in BitmapText constructor must match the font face name in the .fnt file.

3. Missing PNG Texture

The .fnt references a .png file. Both must be at the expected relative paths.

4. fontSize Too Small

Bitmap fonts look best at their designed size. Extreme scaling causes blurriness.

5. Not Considering Line Height

Multi-line text may overlap if the font's lineHeight is not set correctly.

Practice Questions

Q1: What files does a bitmap font need? A: A .fnt file (XML/JSON) and a .png texture atlas.

Q2: How do you load bitmap fonts? A: Use PIXI.Assets.load('font.fnt') to load both .fnt and .png.

Q3: How do you update text content? A: Set text.text = 'new content'.

Q4: What is the advantage of bitmap text over standard text? A: Faster rendering, consistent look across devices, no system font dependency.

Q5: How do you tint bitmap text? A: Set text.tint = 0xRRGGBB.

Challenge: Build a game HUD with a score counter that animates when the score changes (scale up briefly), a timer in the corner, and a health bar label.

FAQ

Can I use bitmap text with emoji?

No. Bitmap fonts are limited to the characters in the generated texture.

How do I create a BMFont?

Use tools like Glyph Designer, BMFont (Windows), or Littera (web-based).

Can I change bitmap font size at runtime?

Yes, via fontSize. Scaling beyond designed size may look blurry.

Does bitmap text support word wrap?

Yes. Set maxWidth on the BitmapText object.

Can I animate bitmap text?

Yes. Use standard PixiJS tweens or ticker on BitmapText properties.

Try It Yourself

Display bitmap text with style.

<!DOCTYPE html>
<html>
<head>
    <title>PixiJS BitmapText</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.3/pixi.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Bitmap Text Demo</h2>
<script>
var app = new PIXI.Application({ width: 500, height: 300, background: 0x1a1a2e });
document.body.appendChild(app.view);

// Use built-in bitmap font
PIXI.Assets.load('https://pixijs.com/assets/bitmap-font/Desyrel.xml').then(function() {
    var text = new PIXI.BitmapText('PixiJS Bitmap Text', {
        fontName: 'Desyrel',
        fontSize: 36,
        tint: 0x4ecdc4
    });
    text.x = 50;
    text.y = 80;
    app.stage.addChild(text);

    var subtitle = new PIXI.BitmapText('Fast and consistent rendering', {
        fontName: 'Desyrel',
        fontSize: 18,
        tint: 0xcccccc
    });
    subtitle.x = 50;
    subtitle.y = 130;
    app.stage.addChild(subtitle);

    var score = new PIXI.BitmapText('Score: 1234', {
        fontName: 'Desyrel',
        fontSize: 24,
        tint: 0xffd700
    });
    score.x = 350;
    score.y = 20;
    app.stage.addChild(score);
});
</script>
</body>
</html>

What's Next

Compare WebGL and Canvas renderers.

WebGL vs Canvas — Renderer comparison. Performance — Performance optimization.

← Previous PixiJS Render Textures — Offscreen Rendering and Caching Next → PixiJS WebGL vs Canvas — Choosing a Renderer

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Pixijs