Skip to content

Layout

Tick UI describes layout with a stack of rects. Every push gives the next draw a smaller working area, and Pop (or an Auto() scope) returns to the previous one.

The Auto scope

ui.Auto() returns an AutoLayout (an IDisposable) that captures the current rect-stack depth and restores it on Dispose. This is the preferred way to push layout rects in Tick UI. Chain operations inside the using block, and the matching Pop() calls are implicit.

using (ui.Auto().Top(64))
{
    ui.Fill(headerColor);
}

Single-rect helpers

  • Edges: Top(Size), Bottom(Size), Left(Size), Right(Size). Each pushes a strip inset from that edge. Negative values inset from the opposite edge. For example, Right(-menuWidth) means everything except the right menuWidth pixels. For a fixed strip and the rest of the rect together, use PushSizedVertical or PushSizedHorizontal. Refer to the schema rules below.
  • Halves: TopHalf(), BottomHalf(), LeftHalf(), RightHalf().
  • Centring: Center(Size), Center(Size, Size), CenterHorizontal(Size), CenterVertical(Size).
  • Insets: InsetTopLeft, InsetTop, InsetTopRight, InsetLeft, InsetRight, InsetBottomLeft, InsetBottom, InsetBottomRight. Each pushes a sized rect anchored to a corner or edge.
  • Padding: Pad, PadHorizontal, PadVertical, and the per-edge variants.
  • Transform: Offset(float, float), PushScale(float), PushRotate(float), ScaleFromPivot(float, Vector2).

Size accepts int (interpreted as pixels) or float (interpreted as percent of the parent's relevant dimension).

Multi-element schemas

These push a container plus, for most schemas, a current-element rect. Use Next() (or Next(size) for stack mode) to advance, Pop() to terminate.

  • Series: PushSeriesVertical(float size, float gap = 0) and PushSeriesHorizontal(...). N elements of equal size.
  • Stack: PushStackVertical(float step) and three direction variants. Variable-size elements with a fixed gap between them. Each element's size comes from its own Next(size) call, including the first.
  • Sized: PushSizedHorizontal(params Size[]) and PushSizedVertical(...). Explicit per-element sizes; mix pixels and percent. The *WithGap(Size gap, params Size[] sizes) variants insert a uniform gap between every pair of slots so you don't have to interleave it by hand; Next() skips the gaps automatically.
  • Split: PushSplitHorizontal(int count, int gap = 0) and PushSplitVertical. N equal-sized elements.
  • Grid: PushGrid(int countX, int countY). 2D row-major grid.
  • Radial: PushRadial(float minAngle, float maxAngle, float radius, float itemSize, int count). Items distributed on an arc.

Coordinate systems

All layout in Tick UI is in layout space, typically your reference resolution, for example 1920×1080. Rendering happens in screen space. Convert with LayoutToScreen() and ScreenToLayout().