Pixijs Scene Text
Render fast-updating game HUD text (scores, timers, labels) with PixiJS BitmapText instead of heavy canvas Text re-renders.
Overview
PixiJS Scene Text is an agent skill for the Build phase that documents BitmapText patterns for performant in-game labels in PixiJS.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-scene-textWhat is this skill?
- BitmapText repositions glyph quads on string change—no per-frame canvas re-render or GPU upload
- Quick-start score counter wired to app.ticker for gameplay labels
- Documents BitmapTextOptions alignment with TextOptions plus bitmap-specific caveats (ignored style fields, font resoluti
- Dynamic bitmap font generation when using system fontFamily without BitmapFont.install
- MSDF note for scaling beyond native glyph size when pixel-perfect sizing is not enough
Adoption & trust: 1.3k installs on skills.sh; 206 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your PixiJS game stutters when HUD strings change every frame because canvas Text re-renders and uploads textures constantly.
Who is it for?
Indie devs shipping browser or packaged PixiJS games with live numeric or string HUD elements.
Skip if: Rich typographic marketing pages, non-PixiJS stacks, or static labels that rarely change where regular Text is simpler.
When should I use this skill?
Adding or optimizing frequently changing labels in a PixiJS game scene (scores, timers, gameplay text).
What do I get? / Deliverables
You implement BitmapText with correct options, ticker updates, and font install strategy so labels update cheaply during gameplay.
- BitmapText HUD implementation pattern
- Font install vs dynamic font decision notes
Recommended Skills
Journey fit
BitmapText setup is implementation work in the Build phase when you are assembling scenes and performance-sensitive UI in a PixiJS game. Frontend subphase covers client rendering; this skill documents scene text APIs, style caveats, and ticker update patterns.
How it compares
PixiJS-specific rendering reference, not a general UI typography or React game UI skill.
Common Questions / FAQ
Who is pixijs-scene-text for?
Solo and indie developers building PixiJS games who need performant on-screen text updated every frame.
When should I use pixijs-scene-text?
During Build frontend work when implementing scores, timers, or debug overlays in a PixiJS scene graph.
Is pixijs-scene-text safe to install?
It is documentation-only procedural knowledge with no mandated tooling; review the Security Audits panel on this Prism page for the package source.
SKILL.md
READMESKILL.md - Pixijs Scene Text
# BitmapText Text rendered from a pre-generated texture atlas of glyphs. Updating the text string only repositions quads; no canvas re-render, no GPU upload per change. Use `BitmapText` for scores, timers, gameplay labels, and any text whose content changes frequently. Trade-off: limited styling, fixed glyph set, pixel-perfect only at the font's native size (unless you use MSDF). ## Quick Start ```ts const score = new BitmapText({ text: "Score: 0", style: { fontFamily: "Arial", fontSize: 32, fill: 0xffffff, }, }); app.stage.addChild(score); app.ticker.add(() => { score.text = `Score: ${Math.floor(performance.now() / 100)}`; }); ``` When you pass a system font family without calling `BitmapFont.install`, the text-bitmap system generates a dynamic bitmap font on first use. ## Construction ```ts const minimal = new BitmapText({ text: "Score: 0" }); const styled = new BitmapText({ text: "Hello", style: { fontFamily: "GameFont", fontSize: 48, fill: 0xff0000 }, anchor: 0.5, roundPixels: true, }); ``` ### BitmapTextOptions `BitmapText`'s constructor accepts the base `TextOptions` directly (no additional bitmap-specific fields). Fields match `references/text.md` with two caveats: `style` is still `TextStyle \| TextStyleOptions` (the same class `Text` uses, but many style fields are ignored by the bitmap pipeline), and `resolution` is managed by the underlying `BitmapFont` at install time rather than per-instance. | Option | Type | Default | Description | | ------------- | ------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `text` | `TextString` | `''` | Text content. Same as `Text`. | | `style` | `TextStyle \| TextStyleOptions` | `new TextStyle()` with `fill = 0xffffff` | Shared TextStyle type; fields like `fontFamily`, `fontSize`, `fill`, `stroke`, `align`, `wordWrap`, `wordWrapWidth`, and `lineHeight` are respected. Gradients as fill and filters are not. See the TextStyle reference in `references/text.md`. | | `anchor` | `PointData \| number` | `0` | Same as `Text`. | | `resolution` | `number \| null` | `null` | Accepted but ignored at runtime — set resolution on the `BitmapFont` via `BitmapFont.install({ resolution })` instead. Passing a non-null value logs a warning. | | `roundPixels` | `boolean` | `false` | Same as `Text`. | All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/co