Text

<Text> draws words over the world in white with a thin dark edge, so they read over a bright sky and over night ground alike.

Its props are in Text.

style takes a colour or a place that comes from data, such as an item’s rarity colour; a look that is the same every time is a class.

title is what the browser shows in a tooltip while the pointer rests on the words, such as what a stat does, as Godot’s tooltip_text is on every Control. A phone shows none, so a hint a player needs there belongs in the words themselves.

import { Hud, Panel, Slot, Text } from "@spawnite/engine";

export function Score({ coins }: { coins: number }) {
    return (
        <Hud>
            <Panel slot={Slot.TopRight}>
                <Text size="lg">Coins {coins}</Text>
            </Panel>
        </Hud>
    );
}

Over an entity, a Text goes in an anchored Panel, bare so the words stand on the world with no pane behind them:

import { Anchor, Entity, Panel, PanelVariant, Text } from "@spawnite/engine";

export function Signpost() {
    return (
        <Entity model="signpost">
            <Panel anchor={Anchor.Above} variant={PanelVariant.Bare}>
                <Text className="font-bold">To the well</Text>
            </Panel>
        </Entity>
    );
}

The game’s canvas gives the same white and dark edge to everything drawn over the world, so a label with no colour of its own reads like a Text rather than in the page’s black, as Godot’s Label3D defaults to white with an outline. A pane over the world that should not carry the edge, such as a card with dark words, sets [text-shadow:none].

Nothing in Text animates: a number that changes every frame should not move as well. Pass tabular for a number that counts, so every digit draws the same width and the text beside it stays still. With a minimum width on the Text too, the pane around it keeps its size when the number gains a digit.