skills.rest
mudman1986
mudman1986COMMUNITY
Explore all skills by this author →
GitHub

text-and-bitmaptext

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

Updated Jun 10, 2026
Search Tags:#phaser#text rendering#game ui#web fonts#bitmaptext#word wrap#retro font
One-click install
npx skills add https://github.com/mudman1986/quarterless --skill text-and-bitmaptext-mudman1986
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: text-and-bitmaptext
Source: https://github.com/mudman1986/quarterless/tree/main/.github/skills/text-and-bitmaptext
Command: npx skills add https://github.com/mudman1986/quarterless --skill text-and-bitmaptext-mudman1986

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing and configuring the right text rendering approach in Phaser 4 is confusing: Text, BitmapText, and DynamicBitmapText each have different styling capabilities, performance characteristics, and renderer constraints, and mistakes cause blurry text, missing fonts, or frame-rate drops. ## Core Features & Use Cases - Text Game Objects: Create Canvas-based text with TextStyle configuration covering fonts, colors, strokes, shadows, gradients, padding, word wrap, alignment, and RTL support. - BitmapText and DynamicBitmapText: Render fast, batched text from pre-loaded bitmap fonts, with drop shadows, per-character or per-word tinting, and per-character display callbacks for animated effects. - Retro Fonts: Parse fixed-width character grid images into bitmap fonts without XML files using Phaser.GameObjects.RetroFont. - Use Case: A game HUD needs a score counter updating every frame plus a styled title screen. Use BitmapText for the score to avoid Canvas re-uploads, and a Text object with gradient fill and shadow for the title. ## Quick Start Show me how to add a styled title and a fast-updating score counter to my Phaser scene using Text and BitmapText.

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 pre-rendered bitmap fonts, use this.add.bitmapText(x, y, fontKey, text, size) after loading the font with this.load.bitmapFont.

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

Text uses the Canvas 2D API with web fonts, shadows, gradients, and built-in word wrap, but re-creates its texture on every change. BitmapText uses a pre-rendered font texture for fast batched rendering, making it better for scores and frequently updating content.

How do I wrap text to a fixed width in Phaser?▼

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

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

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

Does BitmapText support web fonts or CSS fonts?▼

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 loaded through 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→
arnaudruffinarnaudruffin

loading-assets

Load and manage Phaser 4 assets with this.load methods and preload sequencing.

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