How can I make the bottom button in a UI panel highlight the top button on down arrow?

Question

I have three buttons on a pause menu. Resume is set as First Selected in the Event Manager. Options is in the middle, and Quit to Main Menu is last. If I press down arrow or D-pad down on a controller, each button highlights correctly, but stops at Quit to Main Menu and doesn't re-highlight Resume. Any idea how to make Resume the "next" button in the menu to highlight after Quit?

I didn't expect anything. I just looked for tutorials on creating menus, and nobody seems to be addressing what is a very standard interaction pattern in games UI. Pressing down should continually highlight through a vertically aligned set of menu options, not stop at the last item. Pressing up should have the same effect in reverse.

score 0 · Answer 1 · answered Apr 04 '23 at 11:18

You can give them id's like 0,1,2 and each time you press down key, increase current id. Then get button with current id and highlight it. It would be something like this;

    Button currentButton;
    int currentButtonIndex;
    List<Button> buttonList = new List<Button>() { new Button(0, "Resume"), new Button(1, "Options"), new Button(2, "Quit") };

    public class Button
    {
        public int id;
        public string text;

        public Button(int id, string text)
        {
            this.id = id;
            this.text = text;
        }
    }

    public void OnDownKeyPressed()
    {
        if (currentButton != null)
            // Deactivate previous button here

        currentButtonIndex++;

        // Here is the loop you're looking for. After the last index(button), it goes back to first(button).
        if(currentButtonIndex >= buttonList.Count)
        {
            currentButtonIndex = 0;
        }

        // Get button with id == currentButtonIndex.
        currentButton = buttonList.Find(item => item.id == currentButtonIndex);

        if (currentButton != null)
        {
            // Highlight currentButton here
            Debug.LogError(currentButton.text);
        }
    }

score 0 · Answer 2 · answered Apr 04 '23 at 17:27

Assuming you're using default Unity Buttons, you can look on the "Navigation" if it's set to Automatic (which is by default) and under that property you will look a button called "Visualize".

If you press it you will look yellowish arrows that shows to you the default navigation that your "pressing keys" flow will do.

If you want to change some of them, you will unselect "Automatic" from Navigation, select Explicit, and link the selectables that you want.

How can I make the bottom button in a UI panel highlight the top button on down arrow?

2 Answers2