skills.rest
AmirOssanloo
AmirOssanlooCOMMUNITY
Explore all skills by this author →
GitHub

text-and-bitmaptext

Implements text rendering in Phaser 4 using Text, BitmapText, and DynamicBitmapText game objects.

Updated Sep 20, 2026
Search Tags:#rendering#fonts#text#phaser#game UI#bitmaptext#word wrap
One-click install
npx skills add https://github.com/AmirOssanloo/helix-game --skill text-and-bitmaptext-amirossanloo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: text-and-bitmaptext
Source: https://github.com/AmirOssanloo/helix-game/tree/main/.claude/skills/text-and-bitmaptext
Command: npx skills add https://github.com/AmirOssanloo/helix-game --skill text-and-bitmaptext-amirossanloo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing and configuring the right text rendering approach in Phaser 4 is error-prone: Text, BitmapText, and DynamicBitmapText differ in performance, styling, alignment, and renderer support, and misusing them causes blurry fonts, broken wrapping, or frame-rate drops. ## 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, batched bitmap fonts with drop shadows, per-character tinting, word tinting, and per-character display callbacks for animated effects. - Retro fonts and text bounds: Parse fixed-width retro font sheets and query line, word, and character bounds for layout or click detection. - Use Case: Build a game HUD where the score updates every frame with BitmapText, the title screen uses styled Canvas Text with a gradient fill, and a wavy banner uses DynamicBitmapText with a sine-wave display callback. ## Quick Start Ask the AI to create a Phaser 4 scene that displays a styled title with Text, a frequently updating score counter with BitmapText, and a wave-animated label with DynamicBitmapText.

Frequently Asked Questions about text-and-bitmaptext

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

FAQPage Schema
How do I display text in Phaser 4?▼

Use this.add.text(x, y, content, style) to create a Canvas-based Text game object with a style config for fontFamily, fontSize, and color. For pre-rendered font textures, load a bitmap font and call this.add.bitmapText(x, y, fontKey, text, size).

Text vs BitmapText in Phaser: which should I use?▼

Use Text for UI elements needing web fonts, gradients, strokes, or flexible styling. Use BitmapText for scores, timers, and frequently updating content because it only updates vertex data instead of re-creating a canvas texture on every change.

How do I word wrap text in Phaser?▼

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

Does Phaser load web fonts automatically for Text objects?▼

No, Phaser does not load web fonts. Text uses the Canvas fillText API, so fonts must be available in the browser via CSS @font-face or a third-party web font loader before the Text object renders.

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. To center a single line, call setOrigin(0.5) on the Text object or combine setFixedSize with setAlign for multi-line centering.

Why does setCharacterTint not work on my BitmapText?▼

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

Related Skills

Explore More Software Engineering Skills→
autonomous-aiautonomous-ai
465

loading-assets

Load images, spritesheets, atlases, audio, and tilemaps with the Phaser Loader plugin.

Official
Intermediate
kehwarkehwar

text-and-bitmaptext

Render and manage styled Text and BitmapText in Phaser 4 for dynamic UI.

Community
Advanced
mahirocokomahirocoko

game-object-components

Create Phaser 4 game objects with reusable mixin components for common behaviors.

Community
Intermediate
ckyeonckyeon

text-and-bitmaptext

Render and style Text and BitmapText in Phaser 4 using Canvas 2D and WebGL.

Community
Intermediate