Display widgets

Widgets that show information. Full method lists: Display API. XML attributes: tag reference.

Widget	What it is	Constructor
Badge	A small pill with a count or text, or a dot.	new Badge(name, family, size)
ProgressBar	A horizontal bar filled to a value, with an optional percentage label.	new ProgressBar(name)
MeterBar	A bar for a stat or resource, with a range.	new MeterBar(name)
RichText	Styled text from markup: bold, italic, colors, sizes, outlines, links, headings, lists.	new RichText(name, family, size)
AnimatedImage	Frames from an atlas strip, a list of regions or a GIF, played once, looped or ping-pong.	new AnimatedImage(name)
StatWeb	A radar chart of up to eight stats, optionally editable by dragging.	new StatWeb(name, family, size)
Toast	A short message that slides in and disappears. Shown through showToast.	(no constructor)
Spacer	Empty space of a fixed size, for layouts.	new Spacer(name, w, h)

Badge

setCount(n) (shows N+ above setMaxCount), setText, setDotMode(true) for a plain dot. Its variant (kind in XML) picks the color.

ProgressBar and MeterBar

setRange(min, max), setValue(v), bindValue(ref). ProgressBar.setShowLabel(true, family, size) draws the percentage, setFillColor(color) overrides the theme.

RichText

setMarkup("Press <b>Space</b> to <color value=\"#ffcc00\">jump</color>") parses the markup and throws on an unknown tag. setWrapWidth, setAlign, setHeadingScale(h1, h2, h3). onLinkClick gets the URL of a clicked <link>. The markup tags (from src/core/markup/markup.tks) are: b, i, u, strike, color value, size value, outline thickness color, span color size font, link url, icon value, br, h1 to h3, ul, ol, li. Inside an XML <RichText> element the same tags can be written as children, including the compact <icon=sheet.png:3/> form.

AnimatedImage

setAtlas(texture, frameW, frameH), setFrames(regions), loadGifBytes(bytes), setFPS, setPlayMode(ANIM_PLAY_ONCE | ANIM_PLAY_LOOP | ANIM_PLAY_PING_PONG), play().

StatWeb

setAxes([new StatAxis("STR", 0.0, 10.0, 7.0), ...]), setValue(index, value), setEditable(true) to let the player drag the points, onValueChanged.

Toast

showToast("Game saved", VARIANT_SUCCESS, [withDuration(2.0)]);

Options: withDuration, withDismissOnClick, withProgress, withOnDismiss. DEFAULT_TOAST_MANAGER sets the corner (TOAST_BOTTOM_RIGHT and the other three).

Example

import { Badge, DEFAULT_STAGE, LAYOUT_VBOX, Panel, ProgressBar, Ref, RichText, Screen } from "willowui";

const screen: Screen = new Screen();
const col: Panel = new Panel("col");
col.layout = LAYOUT_VBOX;
col.spacing = 12.0;
col.setPosition(40.0, 40.0);

const text: RichText = new RichText("intro", "default", 16.0);
text.setWrapWidth(320.0);
text.setMarkup("<b>Welcome back.</b> You have <color value=\"#ffcc00\">3 new quests</color>.");
col.addChild(text);

const xp: Ref<float> = new Ref<float>(40.0);
const bar: ProgressBar = new ProgressBar("xp");
bar.setSize(320.0, 18.0);
bar.setRange(0.0, 100.0);
bar.bindValue(xp);
col.addChild(bar);

const mail: Badge = new Badge("mail", "default", 13.0);
mail.setCount(3);
col.addChild(mail);
col.sizeToContent();
screen.add(col);

DEFAULT_STAGE.setScene(engine.root2d);
DEFAULT_STAGE.add(screen);
App.onFrame((dt: float): void => { DEFAULT_STAGE.update(dt); });