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): number
import { drawUiTree } from '@driftengine/ui2d';

Parameters

ParameterTypeDescription
batchSpriteBatch
rootUiNode
whitenumber
sinkUiContentSink | 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.