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.