pixijs-scene-text

Name: pixijs-scene-text
Author: pixijs

2.9kinstalls15forks

How to install pixijs-scene-text?

pixijs/pixijs-skills/pixijs-scene-text

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-text

Installs into the current project.

Summary

Use this skill when rendering text in PixiJS v8. Covers Text for canvas-quality styled labels, BitmapText for cheap per-frame updates via glyph atlas, HTMLText for HTML/CSS markup via SVG, SplitText and SplitBitmapText for per-character animation, TextStyle, tagStyles, constructo

Files · 1

View on GitHub

SKILL.md

1	PixiJS has five text-rendering classes that cover different trade-offs between styling, performance, and animation. `Text` renders to a canvas for full CSS-style fidelity. `BitmapText` reads from a pre-generated atlas for cheap updates. `HTMLText` renders an HTML fragment via SVG `<foreignObject>` for rich markup. `SplitText` and `SplitBitmapText` wrap the first two classes and expose per-character, per-word, and per-line containers for animation.
2
3	Assumes familiarity with `pixijs-scene-core-concepts`. All text classes are leaf nodes; they cannot have children. Wrap multiple text instances in a `Container` to group them.
4
5	## Quick Start
6
7	```ts
8	const text = new Text({
9	text: "Hello PixiJS",
10	style: {
11	fontFamily: "Arial",
12	fontSize: 36,
13	fill: 0xffffff,
14	stroke: { color: 0x4a1850, width: 5 },
15	dropShadow: { color: 0x000000, blur: 4, distance: 6 },
16	},
17	});
18
19	text.anchor.set(0.5);
20	text.x = app.screen.width / 2;
21	text.y = 40;
22
23	app.stage.addChild(text);
24	```
25
26	All text classes use options-object constructors; positional `(string, style)` from v7 is not supported.
27
28	Related skills: `pixijs-scene-core-concepts` (leaves, transforms), `pixijs-assets` (font loading), `pixijs-performance` (BitmapText tradeoffs), `pixijs-color` (`FillInput` for fill/stroke), `pixijs-scene-graphics` (gradients and patterns reused via `FillInput`).
29
30	## Variants
31
32	\| Variant \| Use when \| Trade-offs \| Reference \|
33	\| ----------------- \| ------------------------------------------------------------------ \| --------------------------------------------------------------------- \| ------------------------------------------------------------------ \|
34	\| `Text` \| High-quality static or infrequent-update labels \| Expensive to update (canvas re-draw + GPU upload) \| [references/text.md](references/text.md) \|
35	\| `BitmapText` \| Scores, timers, gameplay labels, anything that changes every frame \| Limited styling; fixed glyph atlas; requires MSDF for crisp scaling \| [references/bitmap-text.md](references/bitmap-text.md) \|
36	\| `HTMLText` \| Rich formatted text, mixed styles, real HTML tags \| Async rendering (one frame delay); similar update cost to `Text` \| [references/html-text.md](references/html-text.md) \|
37	\| `SplitText` \| Per-character animation with rich styling \| Each char is a full `Text`; expensive for long strings \| [references/split-text.md](references/split-text.md) \|
38	\| `SplitBitmapText` \| Per-character animation on long strings or dynamic content \| Inherits BitmapText limitations (glyph atlas, no MSDF-free crispness) \| [references/split-bitmap-text.md](references/split-bitmap-text.md) \|
39
40	## When to use what
41
42	- "I need a styled static label" → `Text`. Use for titles, menus, dialog, error messages. See `references/text.md`.
43	- "I need a score or timer that updates every frame" → `BitmapText`. Updates only reposition quads; no canvas re-draw. See `references/bitmap-text.md`.
44	- "I need mixed formatting with `<b>`, `<i>`, `<br>`" → `HTMLText`. Real HTML/CSS rendering via SVG. See `references/html-text.md`.
45	- "I need inline colored tags like `<red>Warning:</red>`" → `Text` or `HTMLText` with `tagStyles`. Both support it.
46	- "I need to animate each character individually" → `SplitText` for short strings, `SplitBitmapText` for long strings or many instances. See `references/split-text.md` / `references/split-bitmap-text.md`.
47	- "I need CJK / Arabic / emoji-heavy text" → `Text` or `HTMLText`. `BitmapText` fails because the glyph set is too large for a single atlas.
48	- "I need a custom font" → Load via `Assets.load({ src: 'font.woff2', data: { family: 'MyFont' } })` first, then set `style.fontFamily: 'MyFont'`. Works for `Text` and `HTMLText`.
49
50	## Update cost comparison
51
52	\| Update trigger \| Text \| BitmapText \| HTMLText \| SplitText \| SplitBitmapText \|
53	\| ------------------- \| ---- \| ---------- \| -------- \| ----------------------------- \| ------------------------ \|
54	\| Changing `.text` \| High \| Very low \| High \| Very high (N text

People who liked this also viewed

6 picks

Type

pixijs-scene-text

2.9kinstalls15forks

View on GitHub

How to install pixijs-scene-text?

pixijs/pixijs-skills/pixijs-scene-text

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-text

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	PixiJS has five text-rendering classes that cover different trade-offs between styling, performance, and animation. `Text` renders to a canvas for full CSS-style fidelity. `BitmapText` reads from a pre-generated atlas for cheap updates. `HTMLText` renders an HTML fragment via SVG `<foreignObject>` for rich markup. `SplitText` and `SplitBitmapText` wrap the first two classes and expose per-character, per-word, and per-line containers for animation.
2
3	Assumes familiarity with `pixijs-scene-core-concepts`. All text classes are leaf nodes; they cannot have children. Wrap multiple text instances in a `Container` to group them.
4
5	## Quick Start
6
7	```ts
8	const text = new Text({
9	text: "Hello PixiJS",
10	style: {
11	fontFamily: "Arial",
12	fontSize: 36,
13	fill: 0xffffff,
14	stroke: { color: 0x4a1850, width: 5 },
15	dropShadow: { color: 0x000000, blur: 4, distance: 6 },
16	},
17	});
18
19	text.anchor.set(0.5);
20	text.x = app.screen.width / 2;
21	text.y = 40;
22
23	app.stage.addChild(text);
24	```
25
26	All text classes use options-object constructors; positional `(string, style)` from v7 is not supported.
27
28	Related skills: `pixijs-scene-core-concepts` (leaves, transforms), `pixijs-assets` (font loading), `pixijs-performance` (BitmapText tradeoffs), `pixijs-color` (`FillInput` for fill/stroke), `pixijs-scene-graphics` (gradients and patterns reused via `FillInput`).
29
30	## Variants
31
32	\| Variant \| Use when \| Trade-offs \| Reference \|
33	\| ----------------- \| ------------------------------------------------------------------ \| --------------------------------------------------------------------- \| ------------------------------------------------------------------ \|
34	\| `Text` \| High-quality static or infrequent-update labels \| Expensive to update (canvas re-draw + GPU upload) \| [references/text.md](references/text.md) \|
35	\| `BitmapText` \| Scores, timers, gameplay labels, anything that changes every frame \| Limited styling; fixed glyph atlas; requires MSDF for crisp scaling \| [references/bitmap-text.md](references/bitmap-text.md) \|
36	\| `HTMLText` \| Rich formatted text, mixed styles, real HTML tags \| Async rendering (one frame delay); similar update cost to `Text` \| [references/html-text.md](references/html-text.md) \|
37	\| `SplitText` \| Per-character animation with rich styling \| Each char is a full `Text`; expensive for long strings \| [references/split-text.md](references/split-text.md) \|
38	\| `SplitBitmapText` \| Per-character animation on long strings or dynamic content \| Inherits BitmapText limitations (glyph atlas, no MSDF-free crispness) \| [references/split-bitmap-text.md](references/split-bitmap-text.md) \|
39
40	## When to use what
41
42	- "I need a styled static label" → `Text`. Use for titles, menus, dialog, error messages. See `references/text.md`.
43	- "I need a score or timer that updates every frame" → `BitmapText`. Updates only reposition quads; no canvas re-draw. See `references/bitmap-text.md`.
44	- "I need mixed formatting with `<b>`, `<i>`, `<br>`" → `HTMLText`. Real HTML/CSS rendering via SVG. See `references/html-text.md`.
45	- "I need inline colored tags like `<red>Warning:</red>`" → `Text` or `HTMLText` with `tagStyles`. Both support it.
46	- "I need to animate each character individually" → `SplitText` for short strings, `SplitBitmapText` for long strings or many instances. See `references/split-text.md` / `references/split-bitmap-text.md`.
47	- "I need CJK / Arabic / emoji-heavy text" → `Text` or `HTMLText`. `BitmapText` fails because the glyph set is too large for a single atlas.
48	- "I need a custom font" → Load via `Assets.load({ src: 'font.woff2', data: { family: 'MyFont' } })` first, then set `style.fontFamily: 'MyFont'`. Works for `Text` and `HTMLText`.
49
50	## Update cost comparison
51
52	\| Update trigger \| Text \| BitmapText \| HTMLText \| SplitText \| SplitBitmapText \|
53	\| ------------------- \| ---- \| ---------- \| -------- \| ----------------------------- \| ------------------------ \|
54	\| Changing `.text` \| High \| Very low \| High \| Very high (N text

People who liked this also viewed

6 picks

Type