The 2D layer · function
drawUiTree
Draw a tree. Returns how many quads it came to.
Explained in Sprites and tilemaps.
function drawUiTree(batch: SpriteBatch, root: UiNode, white: number, sink: UiContentSink | null): numberimport { drawUiTree } from '@driftengine/ui2d';Parameters
| Parameter | Type | Description |
|---|---|---|
batch | SpriteBatch | |
root | UiNode | |
white | number | |
sink | UiContentSink | null |
In depth
Parents before children, siblings in order, which is the same rule the batch already has: there is no depth here, so what is drawn later is what is on top. A node draws its background first and its image second, so an icon lands on its own plate.
A clipping node bounds what its descendants draw. Each quad is cut to the rectangle every
clipping ancestor leaves, on the CPU, and an image's frame is cut in proportion, so a scrolled list
shows the rows inside it and nothing past its edges. Cut rather than scissored, because a scissor
is state a contributed pass would have to set and restore on both backends, and a cut is four
numbers per quad in the batch it already writes. Until 2026-10-02 clip was laid out, scrolled
and documented, and drawn by nothing: a list's rows drew wherever they had scrolled to. The tree is
in screen space, CSS pixels from the top-left, which is the space the cut assumes.
Allocates nothing. layoutUiTree must have run over this root, or every rect is whatever it was
left at.