Skip to content

Introduction to immediate-mode GUI

Tick UI is an immediate-mode GUI. Every frame, your code describes the entire interface from scratch (what to draw and where), and Tick UI flushes those calls to the GPU. The model holds one method, it runs every frame, and what appears on screen this frame is exactly what that method drew.

What immediate-mode means

An immediate-mode UI builds the screen fresh each frame. The application calls into the UI library to describe the screen (if (showButton) ui.Button(...)). The library renders the button and returns whether it was clicked that frame. Next frame the application runs the same code again, possibly with different inputs and producing a different result.

The application's state is the source of truth. The UI is a function of it. Tick UI holds no scene graph, no widget tree that persists between frames, and no separate update or re-render lifecycle.

The Tick UI version

Tick UI's frame begins with BeginFrame and ends with EndFrame. Between them, your DoUI(UI ui) method runs once per frame and walks the screen top-down:

ui.BeginFrame(new Vector2Int(Screen.width, Screen.height));

using (ui.Auto().Top(64))
{
    ui.Fill(headerColor);
    ui.Text("Title", font, 24, Color.white, TextAlign.MiddleLeft);
}

if (ui.Button("save"))
    SaveDocument();

ui.EndFrame();

The Button call both renders the button and returns whether it was clicked. You register no event handler, connect no callback, and add no node to a tree. The button exists for the duration of this frame.

Benefits of the model

  • Linear top-down code. The screen reads in source order. No hunting through inspectors, prefabs, or hierarchy windows to find why something is the way it is. The rect, the colour, and the click handler are on adjacent lines.
  • No state synchronisation bugs. There is no widget tree to drift out of sync with the application's data. Your data is the truth. The UI is just a rendering of it.
  • Conditional UI is trivial. if (isEditing) ui.Textbox(...) is the entire feature. No "show this widget on this state" plumbing.
  • Iteration speed. A change is a code edit and a domain reload. No scene save, no prefab variant, no animator graph.
  • Easy to refactor. Pulling a chunk of UI into its own method or passing it different colours is the same refactor as any other C# code.
  • Memory-light. No persistent widget objects to allocate or pool.

Additional resources

  • Set up Tick UI. Subclass BaseGameUI, write your first DoUI, and wire the integration to your camera.
  • Frame lifecycle. What runs between BeginFrame and EndFrame, and in what order.
  • Stacks. Tick UI maintains five stacks per frame so your top-down code stays composable. Read this before you start writing widgets that nest.