text-and-bitmaptext

Select Phaser 4 Text, BitmapText, or DynamicBitmapText for styled UI and animated game text.

Updated Feb 11, 2026
One-click install
npx skills add https://github.com/ArtRiv/game-topicos-especiais --skill text-and-bitmaptext-artriv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: text-and-bitmaptext
Source: https://github.com/ArtRiv/game-topicos-especiais/tree/main/skills/text-and-bitmaptext
Command: npx skills add https://github.com/ArtRiv/game-topicos-especiais --skill text-and-bitmaptext-artriv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of choosing and configuring the right Phaser 4 text system when you need styled UI copy, fast scoreboard-style updates, or per-character bitmap effects without fighting wrapping, alignment, or font setup.

Core Features & Use Cases

  • Text vs BitmapText: Use Canvas-based Text for web fonts and rich styling, BitmapText for fast frequent updates, and DynamicBitmapText for per-character animations.
  • Typography controls: Configure TextStyle (font family/size/style, color, stroke, shadow, background, padding, letter/line spacing, fixed dimensions) and apply word wrap, alignment, and max lines.
  • Bitmap font workflows: Load bitmap fonts, align and modify BitmapText content, tune performance-oriented spacing, and use WebGL-only tinting/shadows where supported.

Quick Start

Create a Text label for flexible styling or a BitmapText score for frequent updates by adding either object at the desired position and (for BitmapText) ensuring the bitmap font is loaded in advance.

Frequently Asked Questions about text-and-bitmaptext

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

FAQPage Schema
What is the best way to render crisp text and bitmap fonts in Phaser 4?▼

The best way to render crisp text in Phaser 4 is selecting Text for rich web font styling, BitmapText for fast frequent updates, or DynamicBitmapText for per-character animations. This ensures readable UI and high-frequency game text without fighting wrapping or alignment.

How do I display a fast updating score timer HUD using bitmap fonts?▼

To display a fast updating score timer HUD, use Phaser 4 BitmapText. You must ensure the bitmap font is loaded in advance, then add the BitmapText object at the desired position to handle frequent score updates efficiently.

Does Phaser 4 BitmapText support word wrap and max width alignment?▼

Yes, Phaser 4 BitmapText supports max-width wrapping and alignment. You can align and modify BitmapText content, tune performance-oriented spacing, and apply word wrap alongside alignment controls for styled captions.

Can I use WebGL only tint and shadow effects with bitmap fonts?▼

Yes, you can use tinting and shadow behaviors with bitmap fonts, but these are renderer-scoped and WebGL-only features. The system enforces these specific rendering constraints where supported by the WebGL canvas renderer.

Why does my Phaser 4 text rendering require correct font loading and caching?▼

Phaser 4 text rendering requires correct font loading and caching because BitmapText workflows depend on pre-loaded assets to function. Without properly cached fonts, the system cannot align content or execute bitmap-font rendering for retro HUDs.

When should I use Canvas based Text versus DynamicBitmapText in Phaser?▼

Use Canvas-based Text when you need flexible web font styling with backgrounds, padding, and letter spacing. Use DynamicBitmapText when you need per-character animated text effects for dynamic visual feedback.