skills.rest
russellmorgan
russellmorganCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

text-and-bitmaptext

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

Updated Jul 13, 2026
Search Tags:#javascript#phaser#game UI#text rendering#web fonts#bitmaptext#word wrap
One-click install
npx skills add https://github.com/russellmorgan/UnderConstruction --skill text-and-bitmaptext-russellmorgan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: text-and-bitmaptext
Source: https://github.com/russellmorgan/UnderConstruction/tree/main/.claude/skills/text-and-bitmaptext
Command: npx skills add https://github.com/russellmorgan/UnderConstruction --skill text-and-bitmaptext-russellmorgan

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, and mistakes cause blurry text, broken fonts, or frame-rate drops. ## Core Features & Use Cases - Text and TextStyle configuration: Create Canvas-based Text with font shorthand, colors, strokes, shadows, gradients, padding, word wrap, alignment, fixed sizing, and RTL support. - BitmapText workflows: Load bitmap fonts, render fast batched text for scores and timers, apply drop shadows, per-character and per-word tinting, and parse retro fixed-width fonts without XML files. - DynamicBitmapText effects: Animate individual characters per frame with display callbacks and build scrolling cropped text windows. - Use Case: When building a game HUD, use BitmapText for a score counter that updates every frame, Text with word wrap for dialogue boxes, and DynamicBitmapText for a wavy animated title. ## Quick Start Ask the AI to add a styled score display and a word-wrapped dialogue box to your Phaser 4 scene using the appropriate text game objects.

Frequently Asked Questions about text-and-bitmaptext

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

FAQPage Schema
How do I display text in Phaser 4?▼

Use this.add.text(x, y, content, style) for Canvas-based Text with flexible styling, or this.add.bitmapText(x, y, fontKey, content, size) for pre-rendered bitmap fonts. Text objects default to top-left origin, so call setOrigin(0.5) to center them.

Text vs BitmapText in Phaser: which should I use?▼

Use Text for UI elements needing web fonts, gradients, strokes, or word wrap. Use BitmapText for scores, timers, and frequently updating content since it only updates vertex data instead of re-rendering a canvas texture. Use DynamicBitmapText only for per-character animation.

How do I load a bitmap font in Phaser?▼

Call this.load.bitmapFont(key, pngPath, xmlPath) in the preload method, then reference the same key in this.add.bitmapText(). For retro fonts, load a plain image and parse it with Phaser.GameObjects.RetroFont.Parse into the bitmap font cache.

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

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

Does BitmapText drop shadow work in the Canvas renderer?▼

No. setDropShadow, setCharacterTint, and setWordTint are WebGL-only features on static BitmapText. They have no effect in the Canvas renderer, and drop shadow does not work on DynamicBitmapText.

Why does word wrap not work on my BitmapText?▼

BitmapText setMaxWidth only wraps on whitespace characters, defaulting to char code 32 (space). If your text has no spaces, no wrapping occurs; pass a different wrap character code as the second argument to setMaxWidth.

Related Skills

Explore More Software Engineering Skills→
autonomous-aiautonomous-ai
465

loading-assets

Load images, spritesheets, atlases, audio, and tilemaps with the Phaser Loader plugin.

Official
Intermediate
fiandofiando
1

dev-phaser-ui-creation

Create game HUDs, buttons, dialogs, and DOM overlays with Phaser 3 UI components.

Community
Intermediate
Raphe-devRaphe-dev

game-object-components

Apply shared component mixins to Phaser 4 game objects.

Community
Intermediate
encounterplusencounterplus
16

pixijs-scene-dom-container

Synchronize HTML element overlays with PixiJS scene graph transforms via DOMPipe.

Official
Intermediate