Text & Image

Text

Renders styled text into a Sprite texture automatically via TextPlugin.

Setup: Add Transform, Sprite, UIRect, and Text to an entity.

Property	Type	Default	Description
content	string	''	Text content
fontFamily	string	'Arial'	Font family name
fontSize	number	24	Font size in pixels
color	Color	{r:1, g:1, b:1, a:1}	Text color RGBA
align	TextAlign	Left	Left (0), Center (1), Right (2)
verticalAlign	TextVerticalAlign	Top	Top (0), Middle (1), Bottom (2)
wordWrap	boolean	true	Enable word wrapping
overflow	TextOverflow	Visible	Visible (0), Clip (1), Ellipsis (2)
lineHeight	number	1.2	Line height multiplier

Note

You don’t need to configure the Sprite manually. TextPlugin creates and updates the texture from the Text content.

Modifying Text at Runtime

import { defineSystem, addSystem, Query, Mut, Text } from 'esengine';

addSystem(defineSystem(
    [Query(Mut(Text))],
    (query) => {
        for (const [entity, text] of query) {
            text.content = 'Updated!';
            text.fontSize = 32;
        }
    }
));

Image

Displays images with support for slicing, tiling, and fill modes.

Property	Type	Default	Description
texture	number	—	Texture asset handle
color	Color	{r:1, g:1, b:1, a:1}	Color tint
imageType	ImageType	Simple	Simple (0), Sliced (1), Tiled (2), Filled (3)
fillMethod	FillMethod	Horizontal	Horizontal (0), Vertical (1)
fillOrigin	FillOrigin	Left	Left (0), Right (1), Bottom (2), Top (3)
fillAmount	number	1	Fill progress 0–1
preserveAspect	boolean	false	Maintain aspect ratio
tileSize	Vec2	{x:32, y:32}	Tile size in pixels (used when imageType is Tiled)
layer	number	0	Render layer
material	number	0	Custom material handle (0 = default)
enabled	boolean	true	Visibility toggle

Example: Score Display

import { defineTag, defineComponent, defineSystem, addSystem, Query, Mut, Changed, Text } from 'esengine';

const ScoreDisplay = defineTag('ScoreDisplay');
const GameState = defineComponent('GameState', { score: 0 });

addSystem(defineSystem(
    [Query(Mut(Text), ScoreDisplay), Query(Changed(GameState))],
    (displays, stateQuery) => {
        if (stateQuery.isEmpty()) return;
        const [, state] = stateQuery.single()!;
        for (const [, text] of displays) {
            text.content = `Score: ${state.score}`;
        }
    }
));

Uses Change Detection to only update text when the score actually changes.

Next Steps

• UI Layout — anchors, flex, and grid layout
• Interaction — pointer events, focus, and drag
• Bitmap Text — GPU-rendered bitmap font text
• Sprite — sprite rendering details