skills.rest
onemanking
onemankingCOMMUNITY
Explore all skills by this author →
GitHub

text-and-bitmaptext

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing and configuring the right text rendering approach in Phaser 4 is confusing because Text, BitmapText, and DynamicBitmapText differ in styling, performance, and renderer support, and mistakes cause blurry fonts, slow updates, or silent rendering failures. ## Core Features & Use Cases - Text and TextStyle configuration: Create Canvas-based text with fonts, colors, strokes, shadows, gradients, padding, word wrap, alignment, and fixed sizing. - BitmapText and DynamicBitmapText: Render fast pre-rendered font textures for scores and timers, with drop shadows, per-character tinting, and per-character display callbacks for animated effects. - Retro fonts and text bounds: Parse fixed-width retro font sheets without XML files and query line, word, and character bounds for click detection. - Use Case: Build a game HUD where the title uses styled Canvas Text, the score uses BitmapText updated every frame, and a wave-animated banner uses DynamicBitmapText with a display callback. ## Quick Start Show me how to add a styled text label and a fast-updating bitmap score counter to my Phaser 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?▼

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-rendered font textures, use this.add.bitmapText with a font key loaded via this.load.bitmapFont.

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

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

How do I word wrap text in Phaser?▼

Pass wordWrap: { width: pixels } in the Text style config or call setWordWrapWidth(300) after creation. BitmapText uses setMaxWidth instead, which only wraps on whitespace characters by default.

Why is my Phaser text not showing the correct font?▼

Phaser does not load web fonts itself, so the font must be available in the browser via CSS @font-face or a font loader before the Text object renders. Font names with spaces or digits also need double quotes inside the fontFamily string.

Does BitmapText tinting work in the Canvas renderer?▼

No, setCharacterTint and setWordTint are WebGL-only features and have no effect in the Canvas renderer. The setDropShadow method is also WebGL-only and works only on static BitmapText, not DynamicBitmapText.

When should I use DynamicBitmapText instead of BitmapText?▼

Use DynamicBitmapText only when you need per-character manipulation through setDisplayCallback, such as wave or jitter animations. The callback runs for every character every frame, so static BitmapText is cheaper for ordinary text.

Related Skills

Explore More Software Engineering Skills→
Joshua-AllenJoshua-Allen

text-and-bitmaptext

Create and style text and bitmap text in Phaser 4 games.

Community
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

sprites-and-images

Create and manipulate Phaser 4 Sprites and Images with transforms, tint, alpha, origin, and depth.

Community
Intermediate
acquiaacquia
16

canvas-component-utils

Render formatted HTML and responsive images from Drupal Canvas component props.

Official
Basic