Guides UI Lay Out UI with Anchors and Parenting

UI 2 min read Updated Apr 2026

Lay Out UI with Anchors and Parenting

This guide walks through building a small UI hierarchy under a `Canvas` and placing elements where you want them in the editor.

If you want the layout mental model first, read What Are Anchors, Pivots, and Rect Transforms?.

What You Will Build

By the end of this guide, you will have a small HUD tree like this:

Canvas
  HUD Root
    Score Label
    Pause Button

You will:

  • create a small UI hierarchy
  • rearrange parent-child relationships
  • choose anchor presets
  • position a label
  • place a pause button in the corner

Step 1: Start with a Canvas

Create or select a Canvas in your scene.

Under that canvas, add the elements you need.

For a simple HUD, a good starting point is:

  • one parent container such as HUD Root
  • one Text element for score
  • one Button element for pause

Step 2: Arrange the Hierarchy

Use the Hierarchy panel to place related UI elements under the same parent.

That makes it easier to reason about the layout and move related UI together.

Typical cleanup includes:

  • moving a button under a different panel
  • grouping labels under one HUD root
  • pulling a child back to the canvas root

From PHP, you can do the same thing with setParent(...):

use Lenga\Engine\UI\Canvas;
use Lenga\Engine\UI\Button;

$canvas = $this->findCanvasByName('Canvas');
$hudRoot = $canvas?->findElementByName('HUD Root');
$pauseButton = $canvas?->findButtonByName('Pause Button');

if ($pauseButton instanceof Button) {
    $pauseButton->setParent($hudRoot);
}

Step 3: Place the Score Label

Select the score label and open its Rect Transform card in the Inspector.

To place it at the top center:

  1. click the Top Center anchor preset
  2. adjust Position downward from the edge
  3. set Size to the width and height you want

This gives the label a stable top-center attachment point while letting you tune the visible layout box.

Step 4: Place the Pause Button

Select the pause button and use the Top Right anchor preset.

Then:

  1. move it inward with Position
  2. set Size to the button size you want

That keeps the button attached to the corner while still giving you a predictable offset from the edge.

Step 5: Recheck the Parent-Child Structure

Once the layout is in place, make sure the hierarchy still reflects your intent.

For example:

  • HUD-wide elements under HUD Root
  • menu-specific elements under a menu root
  • grouped UI that should move together under the same parent

This matters because layout is easier to maintain when the hierarchy matches the design.

What Comes Next