Dynamic Radial Menus for Interactive UIs

1. The Anatomy of a Radial Menu

A dynamic radial menu isn't a single UI component, but a collection of elements working together. We will break down its construction into three main parts:

1. The Entry: A single button in the menu, containing an icon and a label. We'll create this as a reusable prefab.
2. The Controller: A script that spawns the entries, arranges them in a circle, and manages the menu's state (open/closed).
3. The Interaction: Logic to handle clicks on an entry and trigger a specific action.

2. Building the Menu Components in Unity

We will be following a comprehensive video tutorial to guide the hands-on implementation. Your experience with the Unity Editor will be very helpful here.

First, let's create the visual template for a single button in our menu. This will be a prefab that we can instantiate for every available interaction.

With the entry prefab ready, our next task is to write a controller script that can spawn these entries and, crucially, arrange them in a circle. This involves a little trigonometry to calculate the position of each entry.

The position of a point on a circle can be found using the formulas:

• $x=r\cdot \cos (\theta )$
• $y=r\cdot \sin (\theta )$

Where $r$ is the radius of the circle and $\theta$ is the angle. By iterating through our menu entries and increasing the angle for each one, we can place them evenly around a central point.

The next video segment demonstrates exactly how to implement this.

At this point, you should have a basic but functional radial menu that appears when you trigger the Open method. The entries are all identical, but they are arranged correctly.

3. Adding Polish and Interactivity

A static menu is functional, but polish is what makes a UI feel good to use. We will now add unique icons, animations, and click functionality.

First, let's give each entry its own icon.

Next, let's add animations for hovering over an entry and for the open/close sequence. The video uses a popular, free Unity library called DOTween, which simplifies UI animation. You can get it from the Unity Asset Store.

Finally, and most importantly, we need to make the buttons do something when clicked. The best way to do this is with delegates and callbacks. A delegate is essentially a type that references a method. We can give each menu entry a delegate variable, and when the entry is clicked, it can call the method that the delegate is pointing to. This allows us to assign a different action to each button.

4. Integrating the Radial Menu with Selection

You now have a self-contained, beautiful radial menu. The final step is to link it to the SelectionManager from the previous lesson. The menu should appear when an object is selected and disappear when it's deselected.

1. Create an instance of the menu. Drag your RadialMenu prefab into your scene's Canvas. Make sure it's initially disabled so it's not visible on game start.
2. Modify SelectionManager.cs. We need to get a reference to the RadialMenu and call its public methods.

Update your SelectionManager.cs script with the following changes:

using UnityEngine;

public class SelectionManager : MonoBehaviour
{
    public LayerMask interactableLayer;
    public LayerMask walkableLayer;

    private Transform _currentSelection;
    private PlayerMovementController _playerMovement;
    
    // Add a reference to the RadialMenu
    private RadialMenu _radialMenu;

    void Start()
    {
        _playerMovement = FindObjectOfType<PlayerMovementController>();
        // Find the RadialMenu in the scene
        _radialMenu = FindObjectOfType<RadialMenu>(true); // 'true' to find inactive objects
    }

    void Update()
    {
        // Deselect if we right-click
        if (Input.GetMouseButtonDown(1))
        {
            if (_currentSelection != null)
            {
                _currentSelection = null;
                _radialMenu.Close(); // Close the menu on deselect
                Debug.Log("Deselected.");
            }
        }
        
        if (Input.GetMouseButtonDown(0))
        {
            // First, check if the mouse is over a UI element. If so, do nothing.
            if (UnityEngine.EventSystems.EventSystem.current.IsPointerOverGameObject())
            {
                return;
            }

            Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
            RaycastHit hit;

            // 1. Check for Interactable objects first
            if (Physics.Raycast(ray, out hit, 100f, interactableLayer))
            {
                _currentSelection = hit.transform;
                Debug.Log("Selected: " + _currentSelection.name);
                
                // Open the menu at the mouse position
                _radialMenu.Open(Input.mousePosition);
            }
            // 2. If no interactable was hit, check for Walkable ground
            else if (Physics.Raycast(ray, out hit, 100f, walkableLayer))
            {
                // A movement click should also close the menu
                _playerMovement.MoveTo(hit.point);
                _currentSelection = null;
                _radialMenu.Close();
                Debug.Log("Movement click at: " + hit.point);
            }
        }
    }
}

3. Modify RadialMenu.cs. You'll need to adapt the Open and Close methods to be public and to handle positioning. The Toggle logic from the video can be split into public Open and Close methods.

// In your RadialMenu.cs script

public void Open(Vector2 screenPosition)
{
    // If already open, do nothing or reposition
    if (transform.childCount > 0) return;

    // Set the menu's position to the mouse position
    // Note: This requires the menu's parent Canvas to be in "Screen Space - Overlay" mode.
    transform.position = screenPosition;

    // --- The logic from the video to instantiate and arrange entries goes here ---
    // For example:
    // for (int i = 0; i < numEntries; i++)
    // {
    //     AddEntry(...);
    // }
    // Rearrange();
}

public void Close()
{
    // --- The logic from the video to destroy entries goes here ---
    // For example, iterating through children and animating them out before destroying.
}

After these changes, run your scene. Clicking an interactable object should now pop open your radial menu right at the cursor! Right-clicking or clicking the ground to move should make it disappear.

Conclusion

Fantastic work! You have successfully designed, built, and integrated a dynamic and visually appealing radial menu. This is a huge step forward for your game's user experience.

Key Takeaways:

• Prefab-based UI: Building UI components as prefabs is a powerful and scalable approach in Unity.
• Procedural Layout: You can use trigonometry (sin, cos) to create complex UI layouts like circles programmatically.
• Delegates for Callbacks: Delegates are a clean, type-safe way to make UI elements trigger specific, assignable C# functions, decoupling the UI from the game logic.
• Input Management: A central SelectionManager that routes input (selecting, moving, UI interaction) is critical for avoiding conflicts and creating predictable player controls.

In this lesson, the menu options were still hard-coded for demonstration purposes. In our next lesson, Define interactions as data-driven entries in JSON, specifying their type and associated need changes, we will remove this hard-coded logic. You will learn to define interactions in external JSON files and dynamically load them into the radial menu based on which object you select.