UISplitText
Defined in: ui/src/UISplitText.ts:67
UI element that renders text split into per-character / per-word / per-line
display objects for animated text — typewriter reveals, per-letter colour /
wave, staggered line entrances. The UI sibling of @yagejs/renderer’s
SplitTextComponent; wraps Pixi v8’s experimental SplitText /
SplitBitmapText and lays the whole block out as one Yoga element.
Unlike UIText it does not support truncate or word-wrap to the
Yoga slot — pre-break long copy with \n, or use UIText for flowing
paragraphs. Animate the exposed segments yourself (e.g. with the engine’s
Tween / Process); onSplit fires whenever a setText re-split
invalidates the previous chars so you can rebind.
SplitText is experimental in Pixi; char spacing can differ
slightly from Text (kerning is lost once glyphs are split).
Implements
Section titled “Implements”Constructors
Section titled “Constructors”Constructor
Section titled “Constructor”new UISplitText(
props):UISplitText
Defined in: ui/src/UISplitText.ts:89
Parameters
Section titled “Parameters”Returns
Section titled “Returns”UISplitText
Properties
Section titled “Properties”displayObject
Section titled “displayObject”
readonlydisplayObject:Container
Defined in: ui/src/UISplitText.ts:68
Implementation of
Section titled “Implementation of”isBitmap
Section titled “isBitmap”
readonlyisBitmap:boolean
Defined in: ui/src/UISplitText.ts:73
Whether this renders with a bitmap font (SplitBitmapText).
splitText
Section titled “splitText”
readonlysplitText:SplitText|SplitBitmapText
Defined in: ui/src/UISplitText.ts:71
The underlying Pixi SplitText / SplitBitmapText.
yogaNode
Section titled “yogaNode”
readonlyyogaNode:Node
Defined in: ui/src/UISplitText.ts:69
Implementation of
Section titled “Implementation of”Accessors
Section titled “Accessors”charAnchor
Section titled “charAnchor”Get Signature
Section titled “Get Signature”get charAnchor():
SegmentAnchor
Defined in: ui/src/UISplitText.ts:221
Returns
Section titled “Returns”SegmentAnchor
Set Signature
Section titled “Set Signature”set charAnchor(
anchor):void
Defined in: ui/src/UISplitText.ts:218
Transform origin (0–1) each character rotates / scales about.
Parameters
Section titled “Parameters”anchor
Section titled “anchor”SegmentAnchor
Returns
Section titled “Returns”void
Get Signature
Section titled “Get Signature”get chars(): (
Text|BitmapText)[]
Defined in: ui/src/UISplitText.ts:145
Per-glyph display objects, in reading order.
Returns
Section titled “Returns”(Text | BitmapText)[]
lineAnchor
Section titled “lineAnchor”Get Signature
Section titled “Get Signature”get lineAnchor():
SegmentAnchor
Defined in: ui/src/UISplitText.ts:237
Returns
Section titled “Returns”SegmentAnchor
Set Signature
Section titled “Set Signature”set lineAnchor(
anchor):void
Defined in: ui/src/UISplitText.ts:234
Transform origin (0–1) each line rotates / scales about.
Parameters
Section titled “Parameters”anchor
Section titled “anchor”SegmentAnchor
Returns
Section titled “Returns”void
Get Signature
Section titled “Get Signature”get lines():
Container<ContainerChild>[]
Defined in: ui/src/UISplitText.ts:155
Line-group containers.
Returns
Section titled “Returns”Container<ContainerChild>[]
segments
Section titled “segments”Get Signature
Section titled “Get Signature”get segments():
TextSegments
Defined in: ui/src/UISplitText.ts:160
The current segments as one object — handy for onSplit callbacks.
Returns
Section titled “Returns”visible
Section titled “visible”Get Signature
Section titled “Get Signature”get visible():
boolean
Defined in: ui/src/UISplitText.ts:241
Returns
Section titled “Returns”boolean
Set Signature
Section titled “Set Signature”set visible(
v):void
Defined in: ui/src/UISplitText.ts:244
Parameters
Section titled “Parameters”boolean
Returns
Section titled “Returns”void
Implementation of
Section titled “Implementation of”wordAnchor
Section titled “wordAnchor”Get Signature
Section titled “Get Signature”get wordAnchor():
SegmentAnchor
Defined in: ui/src/UISplitText.ts:229
Returns
Section titled “Returns”SegmentAnchor
Set Signature
Section titled “Set Signature”set wordAnchor(
anchor):void
Defined in: ui/src/UISplitText.ts:226
Transform origin (0–1) each word rotates / scales about.
Parameters
Section titled “Parameters”anchor
Section titled “anchor”SegmentAnchor
Returns
Section titled “Returns”void
Get Signature
Section titled “Get Signature”get words():
Container<ContainerChild>[]
Defined in: ui/src/UISplitText.ts:150
Word-group containers.
Returns
Section titled “Returns”Container<ContainerChild>[]
Methods
Section titled “Methods”destroy()
Section titled “destroy()”destroy():
void
Defined in: ui/src/UISplitText.ts:271
Returns
Section titled “Returns”void
Implementation of
Section titled “Implementation of”onSplit()
Section titled “onSplit()”onSplit(
listener): () =>void
Defined in: ui/src/UISplitText.ts:175
Subscribe to (re)splits. The listener fires after every setText /
setStyle / resplit — i.e. whenever the segment objects may have
changed. A setText (content) change destroys and recreates chars, so
animations bound to the old ones must be rebound here; a setStyle change
reuses the same chars. Returns an unsubscribe function.
Parameters
Section titled “Parameters”listener
Section titled “listener”Returns
Section titled “Returns”() => void
resplit()
Section titled “resplit()”resplit():
void
Defined in: ui/src/UISplitText.ts:211
Re-split now (only needed when constructed with autoSplit: false).
Returns
Section titled “Returns”void
setStyle()
Section titled “setStyle()”setStyle(
style):void
Defined in: ui/src/UISplitText.ts:197
Parameters
Section titled “Parameters”Partial<TextStyle>
Returns
Section titled “Returns”void
setText()
Section titled “setText()”setText(
s?):void
Defined in: ui/src/UISplitText.ts:187
Parameters
Section titled “Parameters”string
Returns
Section titled “Returns”void
update()
Section titled “update()”update(
p):void
Defined in: ui/src/UISplitText.ts:249
Parameters
Section titled “Parameters”Partial<UISplitTextProps>
Returns
Section titled “Returns”void