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
richText	boolean	false	Enable rich text parsing
strokeColor	Color	{r:0, g:0, b:0, a:0}	Text outline color
strokeWidth	number	0	Text outline width in pixels
shadowColor	Color	{r:0, g:0, b:0, a:0.5}	Drop shadow color
shadowBlur	number	0	Shadow blur radius
shadowOffsetX	number	0	Shadow horizontal offset
shadowOffsetY	number	0	Shadow vertical offset

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;
        }
    }
));

Rich Text

Enable the richText property to use inline formatting tags:

text.richText = true;
text.content = '<color=#FF0000>Red</color> and <b>bold</b> text';

Supported tags:

Tag	Description	Example
<color=#RRGGBB>	Text color	<color=#FF0000>red</color>
<b>	Bold	<b>bold text</b>
<i>	Italic	<i>italic text</i>
<img src="path"/>	Inline image	<img src="icons/star.png"/>

Tags can be nested: <color=#00FF00><b>green bold</b></color>

Stroke & Shadow

Add outlines and drop shadows to any text:

// Outline
text.strokeColor = { r: 0, g: 0, b: 0, a: 1 };
text.strokeWidth = 2;

// Drop shadow
text.shadowColor = { r: 0, g: 0, b: 0, a: 0.5 };
text.shadowBlur = 4;
text.shadowOffsetX = 2;
text.shadowOffsetY = 2;

Stroke and shadow work with both plain text and rich text. In rich text mode, strokes render correctly across all text runs (all strokes are drawn before any fills to prevent visual overlap).

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