text-and-bitmaptext

Text and BitmapText

Displaying text in Phaser 4 -- the Canvas-based Text game object, TextStyle configuration, word wrap, BitmapText (static and dynamic), retro fonts, text alignment, text bounds, and padding.

Key source paths: src/gameobjects/text/, src/gameobjects/bitmaptext/static/, src/gameobjects/bitmaptext/dynamic/ Related skills: ../loading-assets/SKILL.md, ../sprites-and-images/SKILL.md, ../game-object-components/SKILL.md

Quick Start

// Canvas-based Text (flexible styling, uses browser fonts)
const title = this.add.text(400, 50, 'Hello World', {
    fontFamily: 'Arial',
    fontSize: '32px',
    color: '#ffffff'
});

// BitmapText (pre-rendered font texture, faster rendering)
// Font must be loaded first: this.load.bitmapFont('myFont', 'font.png', 'font.xml')
const score = this.add.bitmapText(400, 100, 'myFont', 'Score: 0', 32);

// DynamicBitmapText (per-character manipulation via callback)
const fancy = this.add.dynamicBitmapText(400, 200, 'myFont', 'Wavy!', 32);
fancy.setDisplayCallback(function (data) {
    data.y += Math.sin(data.index * 0.5 + fancy.scene.time.now * 0.005) * 10;
    return data;
});

Core Concepts

Text vs BitmapText

Feature	Text	BitmapText	DynamicBitmapText
Rendering method	Canvas 2D API, uploaded as texture	Pre-rendered font texture	Pre-rendered font texture
Web/CSS fonts	Yes	No	No
Shadows, gradients, strokes	Yes (Canvas API)	Drop shadow only (WebGL)	No
Word wrap	Built-in (width, callback, advanced)	setMaxWidth	setMaxWidth
Per-character effects	No	setCharacterTint, setWordTint (WebGL)	setDisplayCallback
Performance	Slower (re-creates canvas texture on change)	Fast (batched rendering)	Moderate (callback per char)
Alignment	left, right, center, justify	ALIGN_LEFT (0), ALIGN_CENTER (1), ALIGN_RIGHT (2)	Same as BitmapText
RTL support	Yes (rtl style option)	No	No

Rule of thumb: Use Text for UI elements that need flexible styling, web fonts, or infrequent updates. Use BitmapText for scores, timers, and anything that updates frequently or is rendered in large quantities. Use DynamicBitmapText only when you need per-character animation effects.