skills.rest
autonomous-ai
autonomous-aiOFFICIAL
Explore all skills by this author →
Website𝕏@autonomous_labsGitHub

text-and-bitmaptext

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

465|41|Updated Aug 4, 2026
Search Tags:#game development#javascript#phaser#text rendering#web fonts#bitmaptext#word wrap
One-click install
npx skills add https://github.com/autonomous-ai/openharness --skill text-and-bitmaptext-autonomous-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: text-and-bitmaptext
Source: https://github.com/autonomous-ai/openharness/tree/main/store/agents/phaser/skills/text-and-bitmaptext
Command: npx skills add https://github.com/autonomous-ai/openharness --skill text-and-bitmaptext-autonomous-ai

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 Objects: Create Canvas-based text with TextStyle configuration covering fonts, colors, strokes, shadows, gradients, padding, and background colors. - Word Wrap and Alignment: Configure word wrap by pixel width, custom wrap callbacks, multi-line alignment, fixed sizes, and max lines. - BitmapText and Retro Fonts: Render fast bitmap fonts for scores and timers, apply drop shadows and per-character tinting, parse retro fixed-width fonts, and animate characters with DynamicBitmapText display callbacks. - Use Case: Build a game HUD where the title uses styled Canvas Text with a gradient fill, the score counter uses BitmapText updated every frame, and a wave effect on the game-over message uses DynamicBitmapText with a per-character display callback. ## 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 game 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 frequently updated text like scores, use this.add.bitmapText with a pre-loaded bitmap font instead.

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

Text uses the Canvas 2D API and supports web fonts, gradients, strokes, and shadows, but re-renders its texture on every change. BitmapText uses a pre-rendered font texture, renders faster with batching, and suits scores and timers that update frequently.

How do I word wrap text in Phaser?▼

Pass a wordWrap object with a width in pixels in the style config, or call setWordWrapWidth(300) after creation. Text also supports advanced wrapping and custom wrap callbacks, while BitmapText uses setMaxWidth which only wraps on whitespace.

Why is my Phaser text not centered with align center?▼

The align style only affects multi-line text and does nothing on single-line content. For single-line centering, call setOrigin(0.5) on the Text object, since Text defaults to a top-left origin unlike Sprites.

Does BitmapText support web fonts in Phaser?▼

No, BitmapText requires a pre-rendered bitmap font loaded via this.load.bitmapFont with an image and XML file. Only the Canvas-based Text object supports web fonts, which must be loaded separately via CSS @font-face or a font loader.

Why is setCharacterTint not working on my BitmapText?▼

setCharacterTint and setWordTint only work in the WebGL renderer and have no effect in Canvas. Similarly, setDropShadow is WebGL-only and works only on static BitmapText, not DynamicBitmapText.

Related Skills

Explore More Software Engineering Skills→
ArtRivArtRiv

loading-assets

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

Community
Intermediate
IgorGribowskyIgorGribowsky

ui-flow

Guides building Unity screens, menus, and HUD with prefabs, focus navigation, and event-driven updates.

Community
Intermediate
Raphe-devRaphe-dev

game-object-components

Apply shared component mixins to Phaser 4 game objects.

Community
Intermediate
PiaoxuemoliPiaoxuemoli

pretext

Measure, layout, and render text using canvas without the DOM.

Community
Advanced