Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice
  3. Join us on November 16th, 2023, between 1 pm and 9 pm CET for Ask the Experts Online on Discord and on Unity Discussions.
    Dismiss Notice

Question Running out of patience - How do I create a simple menu?

Discussion in 'UI Toolkit' started by rootCBR, Apr 25, 2022.

  1. rootCBR

    rootCBR

    Joined:
    Mar 10, 2018
    Posts:
    4
    I've been attempting to create a simple menu system using UI Toolkit, but I keep running into problems that shouldn't be problems.

    The goal is simply to have a localized menu page that can be navigated with keyboard & mouse as well as a controller in an intuitive way.

    Right now I have a central Menu Controller script that controls the menu flow which consists of generic menu pages. Each generic menu page is a GameObject that has:
    • a UI Document (which references the UXML to be used by all generic menu pages)
    • a Generic Menu Controller script (which populates a ListView with localized buttons data-bound to a list of menu items set via Inspector)
    • and another Controller script for menu page-dependent logic.
    Sadly, it's often impossible to tell why UI Toolkit does what it does.
    I can only navigate menu items with keyboard or controller after I have clicked on one of them using the mouse.
    And after navigating down past the last menu item (or left / right), instead of wrapping back around to the first one, it loses focus and I have to go back to using the mouse.

    I also tried adding the menu items directly to a VisualElement instead of a ListView, but it didn't seem to allow any non-mouse navigation at all.
    Only by adding buttons directly to the UXML I was able to achieve the intended navigation behavior, but this is not an option for various reasons including lack of localization support.

    Feel free to tell me that I'm doing it wrong. Though I'd also like to know where exactly I can learn how to do this correctly.
     
    monsterkid likes this.
  2. uBenoitA

    uBenoitA

    Unity Technologies

    Joined:
    Apr 15, 2020
    Posts:
    198
    While ListView item selection looks very similar to navigation in a regular hierarchy, it doesn't exactly work the same way. Like you saw, wrapping around, or jumping to other items outside the list, isn't possible in that context.

    What you want is having your menu items directly under a regular VisualElement, like you tried afterwards. You say it didn't allow non-mouse navigation? What version of Unity are you on? Also, are you using any kind of EventSystem in your scene (you don't have to, but if you do it can lead to some slight changes in behavior)? On final point, are you using the Input System package in your project (again you don't have to, and if you do it'll also make some slight changes in behavior)? Knowning that would help me find out what's going on in your project and whether or not we have a bug on our hands.

    Also, make sure your buttons are properly focusable: focusable toggled to true, and tabIndex >= 0. We have a bug right now where the buttons will have tabIndex = -1 by default, which makes them non-focusable, and a lot of users are having regressions because of that, so that might be your case too.
     
  3. rootCBR

    rootCBR

    Joined:
    Mar 10, 2018
    Posts:
    4
    Hi, thanks for your response.

    I'm on 2021.2.6f1, I am using the Input System and I have the corresponding Event System Input Module in my scene.

    I've now decided to basically start from scratch (again) and try a less generic approach. That is, adding my menu items directly to the container element like you said.
    This does now seem to give me the behavior I want, except there is once again some weird behavior where the single menu item (= button) of my initial menu doesn't want to accept any mouse click/hover, even after focusing on it manually using keyboard (yes it is focusable, and the tab index being 0 or 1 doesn't make a difference either, despite it using the same settings as all other menu items).

    So you see what my issue with UI Toolkit is, another day, another approach, different problems.

    Regarding the ListView navigation, how would I go about creating a menu with a bigger amount of menu items, like a graphics settings menu?

    EDIT: The mouse focus issue was being caused by toggling the menu screen's visibility instead of display from script. At least this one was preventable :)
     
    Last edited: Apr 26, 2022
  4. uBenoitA

    uBenoitA

    Unity Technologies

    Joined:
    Apr 15, 2020
    Posts:
    198
    > This does now seem to give me the behavior I want

    Good to hear, so with your mouse focus fix you're all set then?

    > my issue with UI Toolkit is, another day, another approach, different problems.

    I don't know what to say. UI Toolkit is actively being developed right now, some things are changing, hopefully improving but certainly changing, if only to accommodate the new features.

    > how would I go about creating a menu with a bigger amount of menu items

    Right now I can't really recommend anything else than having a regular good old hierarchy instead of a ListView, considering your use cases. I've let the tools team know about the need for better ListView navigation integration, but I can't say that it's going to be fixed anytime soon, so I'd rather not recommend to go that way for now. You can use a ScrollView to embed your large content into a limited visual space, and benefit from a bit of rendering virtualization for the elements that aren't actively visible. How much is a "bigger amount" for you? Less than a hundred I think shouldn't be that bad even with just a regular hierarchy, I suggest you try that first and see if it becomes a problem for you.
     
    rootCBR likes this.