UISplitText

Defined in: ui/src/UISplitText.ts:88

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).

Extends

UIElementBase

Constructors

Constructor

new UISplitText(props): UISplitText

Defined in: ui/src/UISplitText.ts:113

Parameters

props

UISplitTextProps

Returns

UISplitText

Overrides

UIElementBase.constructor

Properties

_transform

readonly _transform: ElementTransform

Defined in: ui/src/UIElementBase.ts:20

Internal

Inherited from

UIElementBase._transform

displayObject

readonly displayObject: DisplayContainer

Defined in: ui/src/UISplitText.ts:89

Overrides

UIElementBase.displayObject

isBitmap

readonly isBitmap: boolean

Defined in: ui/src/UISplitText.ts:94

Whether this renders with a bitmap font (SplitBitmapText).

splitText

readonly splitText: SplitText | SplitBitmapText

Defined in: ui/src/UISplitText.ts:92

The underlying Pixi SplitText / SplitBitmapText.

yogaNode

readonly yogaNode: Node

Defined in: ui/src/UISplitText.ts:90

Overrides

UIElementBase.yogaNode

Accessors

charAnchor

Get Signature

get charAnchor(): SegmentAnchor

Defined in: ui/src/UISplitText.ts:277

Returns

SegmentAnchor

Set Signature

set charAnchor(anchor): void

Defined in: ui/src/UISplitText.ts:274

Transform origin (0–1) each character rotates / scales about.

Parameters

anchor

SegmentAnchor

Returns

void

chars

Get Signature

get chars(): (Text | BitmapText)[]

Defined in: ui/src/UISplitText.ts:193

Per-glyph display objects, in reading order.

Returns

(Text | BitmapText)[]

lineAnchor

Get Signature

get lineAnchor(): SegmentAnchor

Defined in: ui/src/UISplitText.ts:293

Returns

SegmentAnchor

Set Signature

set lineAnchor(anchor): void

Defined in: ui/src/UISplitText.ts:290

Transform origin (0–1) each line rotates / scales about.

Parameters

anchor

SegmentAnchor

Returns

void

lines

Get Signature

get lines(): DisplayContainer[]

Defined in: ui/src/UISplitText.ts:203

Line-group containers.

Returns

DisplayContainer[]

rotation

Get Signature

get rotation(): number

Defined in: ui/src/UIElementBase.ts:50

See LayoutProps.rotation.

Returns

number

Set Signature

set rotation(value): void

Defined in: ui/src/UIElementBase.ts:54

Parameters

value

number

Returns

void

Inherited from

UIElementBase.rotation

scale

Get Signature

get scale(): Readonly<{ x: number; y: number; }>

Defined in: ui/src/UIElementBase.ts:41

See LayoutProps.scale.

Returns

Readonly<{ x: number; y: number; }>

Set Signature

set scale(value): void

Defined in: ui/src/UIElementBase.ts:45

Parameters

value

number | { x: number; y: number; }

Returns

void

Inherited from

UIElementBase.scale

segments

Get Signature

get segments(): TextSegments

Defined in: ui/src/UISplitText.ts:208

The current segments as one object — handy for onSplit callbacks.

Returns

TextSegments

transformOrigin

Get Signature

get transformOrigin(): Readonly<{ x: number; y: number; }>

Defined in: ui/src/UIElementBase.ts:32

See LayoutProps.transformOrigin.

Returns

Readonly<{ x: number; y: number; }>

Set Signature

set transformOrigin(value): void

Defined in: ui/src/UIElementBase.ts:36

Parameters

value

number | { x: number; y: number; }

Returns

void

Inherited from

UIElementBase.transformOrigin

visible

Get Signature

get visible(): boolean

Defined in: ui/src/UISplitText.ts:302

Returns

boolean

Set Signature

set visible(v): void

Defined in: ui/src/UISplitText.ts:305

Parameters

v

boolean

Returns

void

Overrides

UIElementBase.visible

wordAnchor

Get Signature

get wordAnchor(): SegmentAnchor

Defined in: ui/src/UISplitText.ts:285

Returns

SegmentAnchor

Set Signature

set wordAnchor(anchor): void

Defined in: ui/src/UISplitText.ts:282

Transform origin (0–1) each word rotates / scales about.

Parameters

anchor

SegmentAnchor

Returns

void

words

Get Signature

get words(): DisplayContainer[]

Defined in: ui/src/UISplitText.ts:198

Word-group containers.

Returns

DisplayContainer[]

zIndex

Get Signature

get zIndex(): number

Defined in: ui/src/UIElementBase.ts:59

See LayoutProps.zIndex.

Returns

number

Set Signature

set zIndex(value): void

Defined in: ui/src/UIElementBase.ts:63

Parameters

value

number

Returns

void

Inherited from

UIElementBase.zIndex

Methods

_inspectState()

_inspectState(): object

Defined in: ui/src/UISplitText.ts:346

Internal

What the Inspector reports for this split text: whether it takes part in focus navigation, which is off unless the game asked for it, and whether it holds focus right now. A test reads this instead of a screenshot.

Returns

object

focusable

focusable: boolean

focused

focused: boolean

applyLayout()

applyLayout(): void

Defined in: ui/src/UISplitText.ts:298

Follow the box layout gave this block, which is what the outline rings.

Returns

void

applyTransformProps()

protected applyTransformProps(props): void

Defined in: ui/src/UIElementBase.ts:27

Apply the four transform props present in props. A present key holding undefined resets that prop to its default. Throws before writing anything if a value is not finite.

Parameters

props

LayoutProps

Returns

void

Inherited from

UIElementBase.applyTransformProps

destroy()

destroy(): void

Defined in: ui/src/UISplitText.ts:351

Idempotent — a second call is a no-op.

Returns

void

Overrides

UIElementBase.destroy

onSplit()

onSplit(listener): () => void

Defined in: ui/src/UISplitText.ts:223

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

listener

SplitListener

Returns

() => void

resplit()

resplit(): void

Defined in: ui/src/UISplitText.ts:267

Re-split now (only needed when constructed with autoSplit: false). An empty text has nothing to split and leaves the segments empty.

Returns

void

setStyle()

setStyle(style): void

Defined in: ui/src/UISplitText.ts:249

Parameters

style

Partial<TextStyle>

Returns

void

setText()

setText(s?): void

Defined in: ui/src/UISplitText.ts:239

Parameters

s?

string

Returns

void

update()

update(p): void

Defined in: ui/src/UISplitText.ts:310

Parameters

p

Partial<UISplitTextProps>

Returns

void

Overrides

UIElementBase.update

Coding agents: fetch https://yage.dev/llms.txt first and prefer the Markdown references it links over these HTML pages. This page's Markdown counterpart is /llms/packages/ui.md.