Radial Layout Group for Unity

A lightweight and customizable radial layout group for Unity UI.

This component automatically arranges child UI elements in a circular layout and updates dynamically in both Edit Mode and Play Mode.

---

Features

• Automatic radial positioning of UI elements
• Adjustable radius
• Angle offset support
• Optional element rotation
• Elliptical distortion using skew
• Dynamic layout updates when children change
• Works in Edit Mode with [ExecuteAlways]
• Built-in direction-to-element lookup
• Custom Unity Editor menu item: GameObject/UI/Radial Layout Group

---

Preview

Image shows a horizontally distorted radial layout group. Distortion was created by settings the skew variable to a negative number.

---

Installation

Clone or copy the RadialLayoutGroup.cs script into your Unity project.

---

Usage

1. Create a Canvas
2. Add an empty UI GameObject
3. Attach RadialLayoutGroup
4. Add UI children (Buttons, Images, etc.)
5. Adjust settings in the Inspector

Or create it directly from:

Hierarchy Create Menu → UI → Radial Layout Group

The script automatically creates a Canvas and EventSystem if needed.

---

Inspector Properties

Property	Description
Radius	Distance from the center
Angle Offset	Rotates the entire layout
Skew	Distorts the circle into an ellipse
Rotate Elements	Rotates children to face outward

---

Example

Standard Circular Layout

• Radius: 100
• Angle Offset: 0
• Skew: 0

Elliptical Layout

• Radius: 100
• Skew: 1 to -1

Rotating Elements

Enable rotateElements to orient children along the radial direction (tangent to ellipse/circle).

---

API

void UpdateLayout()

Rebuilds the radial layout.

Automatically called when:

• Values change in the Inspector
• Children are added/removed
• The object starts

---

int GetIndexFromDirection(Vector2 direction)

Returns the index of the child element closest to a given direction vector.

Returns -1 if the direction is zero.

Example:

Vector2 direction = Input.mousePosition - centerPosition;

int index = radialLayoutGroup.GetIndexFromDirection(direction);

if(index != -1)
{
    Debug.Log($"Selected Index: {index}");
}

Useful for:

• Radial menu selection
• Analog stick navigation
• Input systems
• Custom selection logic

---

Transform GetElementFromDirection(Vector2 direction)

Returns the child Transform closest to a given direction vector.

Internally uses:

GetIndexFromDirection(direction)

Returns null if the direction is zero.

Example:

Vector2 direction = Input.mousePosition - centerPosition;

Transform selected =
    radialLayoutGroup.GetElementFromDirection(direction);

if(selected != null)
{
    Debug.Log($"Selected: {selected.name}");
}

Useful for:

• Weapon wheels
• Radial menus
• Ability selection
• UI navigation systems

---

Technical Notes

Edit Mode Support

The component uses:

[ExecuteAlways]

to update layouts directly inside the Unity Editor.

---

Child Change Handling

Child modifications are delayed in Edit Mode using:

EditorApplication.delayCall

to avoid Unity hierarchy update issues.

Because Unity occasionally decides that modifying transforms during hierarchy refreshes is a war crime.

---

Potential Use Cases

• Radial menus
• Weapon wheels
• Ability selection UI
• Dialogue choices
• RTS command wheels
• Inventory selectors
• Stylized UI layouts

---

Requirements

• Unity with UGUI support
• UnityEngine.UI

---

License

MIT License

Feel free to use and modify in personal or commercial projects.

---

Author

Created by Belal Saad.