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
for rich markup.
SplitText
and
SplitBitmapText
wrap the first two classes and expose per-character, per-word, and per-line containers for animation.
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.
Quick Start
const
text
=
new
Text
(
{
text
:
"Hello PixiJS"
,
style
:
{
fontFamily
:
"Arial"
,
fontSize
:
36
,
fill
:
0xffffff
,
stroke
:
{
color
:
0x4a1850
,
width
:
5
}
,
dropShadow
:
{
color
:
0x000000
,
blur
:
4
,
distance
:
6
}
,
}
,
}
)
;
text
.
anchor
.
set
(
0.5
)
;
text
.
x
=
app
.
screen
.
width
/
2
;
text
.
y
=
40
;
app
.
stage
.
addChild
(
text
)
;
All text classes use options-object constructors; positional
(string, style)
from v7 is not supported.