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 ```js // 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)...