Use this skill when displaying text in Phaser 4. Covers Text game objects, BitmapText, web fonts, text styling, word wrap, alignment, padding, and dynamic text content. Triggers on: Text, BitmapText, this.add.text, font, word wrap, text style.

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 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. TextStyle The Text game object delegates all styling to its TextStyle instance, accessible via text.style . You pass a style config object when creating the Text, or update it later with setter methods. The style object uses Canvas 2D properties internally. The fontFamily default is 'Courier' , fontSize default is '16px' , and color default is ' fff' . The font shorthand property (e.g. 'bold 24px Arial' ) overrides fontFamily , fontSize , and fontStyle when provided. Common Patterns Basic Text Creation Styling Text Word Wrap Text Alignment Dynamic Text Updates Text Padding Fixed Size, Max Lines, and Spacing BitmapText Creation BitmapText Drop Shadow and Tinting DynamicBitmapText Retro Fonts Retro fonts use a fixed width character grid from a standard image (no XML/JSON font file needed). Available Phaser.GameObjects.RetroFont TEXT SET constants: TEXT SET1 (full ASCII printable), TEXT SET2 (space through Z), TEXT SET3 TEXT SET11 (various subsets of uppercase, digits, punctuation). TEXT SET10 is uppercase letters only. Text Bounds (BitmapText) Resolution (High DPI) Configuration Reference TextStyle Properties Property Type Default Description fontFamily string 'Courier' CSS font family fontSize string/number '16px' Font size (number auto appends 'px' ) fontStyle string '' CSS font style ( 'bold' , 'italic' , 'bold italic' ) font string Shorthand: 'bold 24px Arial' (overrides family/size/style) color string/CanvasGradient/CanvasPattern ' fff' Fill color stroke string/CanvasGradient/CanvasPattern ' fff' Stroke color strokeThickness number 0 Stroke width (0 = no stroke) backgroundColor string null Solid background color align string 'left' Multi line alignment: 'left' , 'right' , 'center' , 'justify' maxLines number 0 Max lines to render (0 = unlimited) fixedWidth number 0 Fixed canvas width (0 = auto) fixedHeight number 0 Fixed canvas height (0 = auto) resolution number 0 Canvas resolution (0 = use game config) rtl boolean false Right to left rendering baselineX number 1.2 Horizontal padding for font metrics baselineY number 1.4 Vertical padding for font metrics testString string '\ MEqgy' String used for font height measurement wordWrap object { width, callback, callbackScope, useAdvancedWrap } shadow object { offsetX, offsetY, color, blur, stroke, fill } padding object { left, right, top, bottom } or { x, y } lineSpacing number 0 Extra vertical spacing between lines letterSpacing number 0 Extra horizontal spacing between characters metrics object Pre computed { ascent, descent, fontSize } to skip measurement Factory Methods API Quick Reference Text Methods setText(value) , appendText(value, addCR?) , setStyle(style) , setFont(font) , setFontFamily(family) , setFontSize(size) , setFontStyle(style) , setColor(color) , setFill(color) , setStroke(color, thickness) , setShadow(x, y, color, blur, stroke, fill) , setBackgroundColor(color) , setWordWrapWidth(width, useAdvanced?) , setWordWrapCallback(callback, scope?) , setAlign(align) , setPadding(left, top?, right?, bottom?) , setFixedSize(width, height) , setMaxLines(max) , setLineSpacing(value) , setLetterSpacing(value) , setResolution(value) , setRTL(rtl?) , getWrappedText(text?) , updateText() All setters return this for chaining. Properties: text (get/set), style (TextStyle instance), padding , lineSpacing , letterSpacing , autoRound , splitRegExp . BitmapText Methods setText(value) , setFont(font, size?, align?) , setFontSize(size) , setLetterSpacing(spacing?) , setLineSpacing(spacing?) , setMaxWidth(value, wordWrapCharCode?) , setLeftAlign() , setCenterAlign() , setRightAlign() , setDropShadow(x?, y?, color?, alpha?) , setCharacterTint(start?, length?, tintMode?, tl?, tr?, bl?, br?) , setWordTint(word, count?, tintMode?, tl?, tr?, bl?, br?) , getTextBounds(round?) , getCharacterAt(x, y, camera?) Properties (get/set): text , fontSize , letterSpacing , lineSpacing , align (number), maxWidth . Read only: width , height , font , fontData . Alignment constants: BitmapText.ALIGN LEFT (0), BitmapText.ALIGN CENTER (1), BitmapText.ALIGN RIGHT (2). DynamicBitmapText Methods (additional) setDisplayCallback(callback) , setSize(width, height) , setScrollX(value) , setScrollY(value) Properties: scrollX , scrollY , cropWidth , cropHeight , displayCallback , callbackData . Gotchas 1. Text re renders on every change. Each call to setText , setStyle , setColor , etc. re creates the internal canvas and (in WebGL) re uploads the texture. Batch your style changes and call updateText() once, or set the style object properties directly and call updateText() at the end. 2. Font must be loaded before use. The Text object uses the Canvas fillText API, so fonts must be available in the browser (loaded via CSS, a web font loader, or already installed). Phaser does not load web fonts use a third party loader or CSS @font face . 3. Font names with special characters need quotes. Font names containing digits or special characters must be double quoted inside the string: fontFamily: '"Press Start 2P"' . 4. Text origin defaults to (0, 0). Unlike Sprites which default to (0.5, 0.5), Text objects default to top left origin. Call setOrigin(0.5) to center. 5. Alignment only affects multi line text. align: 'center' does nothing on single line text. For centering a single line, use setOrigin(0.5) or position it manually. 6. BitmapText font must be in cache. The font key passed to this.add.bitmapText() must match a key loaded via this.load.bitmapFont() . If missing, you get a console warning and undefined behavior. 7. BitmapText setMaxWidth only wraps on whitespace. If no whitespace character is found (default char code 32 = space), no wrapping occurs. Change the wrap character with the second argument to setMaxWidth . 8. DynamicBitmapText is more expensive. The display callback runs for every character every frame. Only use it when you need per character manipulation. 9. setCharacterTint and setWordTint are WebGL only. These have no effect in Canvas renderer. 10. setDropShadow is WebGL only and static BitmapText only. It does not work with DynamicBitmapText or the Canvas renderer. 11. letterSpacing on Text is expensive. When non zero, Phaser renders each character individually with fillText instead of the whole line at once. Use BitmapText for large amounts of text with custom letter spacing. 12. setFill and setColor are equivalent. Both set the color property on the TextStyle. The style config also accepts fill as an alias for color . 13. setRTL must be called BEFORE setText . Right to left mode changes how the internal canvas is constructed. If you call setRTL(true) after setting text, the text may not render correctly. Set RTL in the style config or call setRTL() before any setText() call. 14. BitmapText is much faster for frequently updating content. Text re renders its entire Canvas and re uploads the GPU texture on every change. BitmapText just updates vertex data in an existing texture atlas. For scores, timers, damage numbers, or any text that changes every frame, always prefer BitmapText. Source File Map File Description src/gameobjects/text/Text.js Text class (Canvas based rendering) src/gameobjects/text/TextFactory.js this.add.text() factory src/gameobjects/text/TextStyle.js TextStyle class (all style properties + setters) src/gameobjects/text/GetTextSize.js Internal text measurement src/gameobjects/text/MeasureText.js Font metrics measurement src/gameobjects/text/typedefs/ TextStyle, TextWordWrap, TextPadding, TextShadow typedefs src/gameobjects/bitmaptext/static/BitmapText.js Static BitmapText class src/gameobjects/bitmaptext/static/BitmapTextFactory.js this.add.bitmapText() factory src/gameobjects/bitmaptext/dynamic/DynamicBitmapText.js DynamicBitmapText (extends BitmapText) src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextFactory.js this.add.dynamicBitmapText() factory src/gameobjects/bitmaptext/ParseRetroFont.js Retro font parser ( RetroFont.Parse ) src/gameobjects/bitmaptext/RetroFont.js RetroFont namespace (Parse + TEXT SET constants) src/gameobjects/bitmaptext/const.js TEXT SET1 through TEXT SET11 constants src/gameobjects/bitmaptext/GetBitmapTextSize.js BitmapText bounds calculation src/gameobjects/bitmaptext/typedefs/ RetroFontConfig, DisplayCallbackConfig, BitmapTextSize typedefs

text-and-bitmaptext