skills.rest
travispwingo
travispwingoCOMMUNITY
Explore all skills by this author →
GitHub

text-and-bitmaptext

Implements Text, BitmapText, and DynamicBitmapText rendering in Phaser 4 games.

Updated May 7, 2021
Search Tags:#javascript#phaser#text rendering#game ui#web fonts#bitmaptext#word wrap
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill text-and-bitmaptext-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: text-and-bitmaptext
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/text-and-bitmaptext
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill text-and-bitmaptext-travispwingo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing and configuring the right text rendering approach in Phaser 4 is confusing: Canvas-based Text, static BitmapText, and DynamicBitmapText each have different styling capabilities, performance characteristics, and renderer constraints. This Skill provides the patterns, API references, and gotchas needed to display text correctly and efficiently. ## Core Features & Use Cases - Text Game Object: Create Canvas-based text with web fonts, strokes, shadows, gradients, word wrap, alignment, padding, and RTL support. - BitmapText and DynamicBitmapText: Render fast, batched text from pre-loaded bitmap fonts, with per-character tinting, drop shadows, and per-character display callbacks for animated effects. - Retro Fonts: Parse fixed-width character grid images into bitmap fonts without XML font files. - Use Case: Build a game HUD where the score updates every frame using BitmapText for performance, while the menu title uses Canvas Text with a gradient fill and drop shadow. ## Quick Start Show me how to add a centered score display using BitmapText and a styled title using Text in my Phaser 4 scene.

Frequently Asked Questions about text-and-bitmaptext

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add text to a Phaser 4 scene?▼

Use this.add.text(x, y, content, style) to create a Canvas-based Text object with a style config for fontFamily, fontSize, and color. For pre-loaded bitmap fonts, use this.add.bitmapText(x, y, fontKey, text, size) instead.

What is the difference between Text and BitmapText in Phaser?▼

Text uses the Canvas 2D API with web fonts, shadows, and gradients but re-renders its texture on every change. BitmapText uses a pre-rendered font texture with batched rendering, making it much faster for frequently updating content like scores and timers.

How do I wrap text in Phaser?▼

For Text objects, pass wordWrap: { width: 300 } in the style config or call setWordWrapWidth(300). For BitmapText, use setMaxWidth(200), which wraps only on whitespace characters by default.

Why is my Phaser text not updating or rendering slowly?▼

Text re-creates its internal canvas and re-uploads the GPU texture on every setText or style change. Batch style changes and call updateText() once, or switch to BitmapText for content that changes every frame.

Does BitmapText support web fonts in Phaser?▼

No, BitmapText requires a pre-rendered font texture loaded via this.load.bitmapFont(). Web and CSS fonts only work with the Canvas-based Text object, and Phaser does not load web fonts itself; use CSS @font-face or a font loader.

How do I animate individual characters in Phaser text?▼

Use this.add.dynamicBitmapText() and set a display callback with setDisplayCallback(). The callback receives per-character data (x, y, index, scale, rotation) each frame, letting you offset or transform characters for wave or shake effects.

Related Skills

Explore More Software Engineering Skills→
ArtRivArtRiv

loading-assets

Load Phaser 4 game assets via the Loader with progress events.

Community
Intermediate
radical-beardradical-beard

scene-system

Manage game scenes and UI flow with stack-based push, pop, replace, and clear operations.

Community
Intermediate
Raphe-devRaphe-dev

game-object-components

Apply shared component mixins to Phaser 4 game objects.

Community
Intermediate
pixijspixijs
48.2k

pixijs-html-source

Render live DOM elements or snapshots as PixiJS v8 textures via HTML-in-Canvas APIs.

Official
Intermediate