Introducing Improvements to Directional UI Selection on Gamepad

Updates Announcements
1

Hi Creators!

Today, we’re excited to launch significant improvements to the default Directional UI selection mode for Gamepad navigation.

TL;DR

Based on your feedback, we’ve focused on making gamepad navigation feel more fluid, precise, and intuitive for your players.

  • Thumbstick navigation is now truly analog, allowing for precise, fluid selection that no longer locks to cardinal directions.
  • We’ve also added major quality-of-life improvements, including smarter UI grouping, preventing selection of covered elements, and a more logical default selection entry point. These changes will be activated by default for all experiences using our default Directional UI selection mode.

What should you do?

  • If you are already using default Directional UI Selection in your experience, there’s nothing you need to do! The update is backward compatible and will improve player navigability on Gamepads, which can be connected to various platforms (e.g., Consoles, Handheld devices, PCs, etc.). Let us know if you spot any issues.
  • If you are currently using Virtual Cursor mode in your experience, this change will not affect you. However, we encourage you to check out our improved Directional UI Selection to see if this makes sense for your experience!

Keep reading to learn more about what this update encompasses.

Terminology

As a quick refresher, here are some terms we’ll be referencing throughout this post.

  • UI Selection mode: On a Gamepad, the mode where the left thumbstick and D-pad interact with the 2D scene rather than the 3D world.
  • Directional UI Selection mode: Our default UI Selection mode that depends
  • Virtual Cursor mode: Mouse-emulation cursor for Gamepad input. Read more about Virtual Cursor here.

Directional UI Selection mode (left) and Virtual Cursor mode (right)

Improved Thumbstick Navigation for Directional UI Selection

We’ve overhauled left thumbstick navigation to be truly analog. Selection is no longer locked to the four cardinal directions – instead, it precisely follows the angle of the thumbstick, allowing players to navigate your UI with greater speed and accuracy. This makes it much easier to select elements on a diagonal or jump across the screen to a specific button.

  • To select, players simply point the thumbstick toward an element.
  • To lock in the selection, they release the thumbstick.

Note: The D-Pad retains its classic, cardinal-direction navigation, which support quick navigation on grids and lists.

Overall Improvements to Directional UI Selection

We’ve also shipped several quality-of-life updates to make Default UI Selection smarter and prevent common pain points for players.

:see_no_evil_monkey:Covered elements are no longer selectable: Players can no longer select UI elements that are fully hidden behind other elements. This makes it easier to track the selection highlight.

:input_latin_uppercase: Smarter ancestor grouping: When players navigate through a list or grid using the D-pad, the selection will stay within that UI panel until they release the button they’re pressing. This prevents players from accidentally navigating outside of their current panel.

:sparkles:Logical selection entry: When a player enters UI selection mode, the system defaults to selecting the element with the highest Z-index, rather than the top-left element. This can be customized.

:computer_mouse: Simulated selection with R2: Players can now use the R2 button on Gamepads to select a UI element once it is hovered over.

Supporting Complex UI Using Directional UI Selection

With all the above improvements, our default Directional UI Selection can support complex UI without any developer hassle. For example, make use of UIDragDetectors to create powerful, cross platform UI components such as sliders, color pickers, or even a custom window system!

Check out these placefiles here for inspiration:

Customizing Directional UI Selection

While these new defaults will improve out-of-the-box UI Selection for all players, we will always support customizations that make your experience feel native. You can still customize selection by defining SelectionGroups or Up/Down/Left/Right selection behavior. Any customizations you make will take precedence over default algorithms.

:blue_heart: Made with Love

Special thanks to @ProtoValence and @MetaVars for their hard work in making this happen! Let us know if you have any questions or suggestions on how to continue to improve UI selection.

Thank you.

180 Likes
2

This topic was automatically opened after 9 minutes.

4

I really love this updates because of the thumbstick update! Thank you Roblox!

13 Likes
5

Very nice! I appreciate this update a lot. Switching input types often will feel so much smoother going forward. Good update!:call_me_hand:t3:

6 Likes
6

Nice update I often play console games with my friends because it’s fun for everyone to see the screen.

5 Likes
7

y’all are goated; gamepad/console improvements make me so happy :heart_exclamation:

8 Likes
8

Finally a good a roblox update in months, respect to the team!

5 Likes
9

Thanks a lot for this update, guys! :heart:

4 Likes
10

This is a great update! It’s going to be a lot easier to use this system in my games. However, is there a way to disable this cursor from showing? I like it, since it removes the confusion of where your selection is going, but for some of my UIs that utilize a custom SelectedImageObject, it looks strange as it’s clear where the cursor is going.

image

9 Likes
11

Love this!! I don’t have to map as many buttons to controller anymore LOL

3 Likes
12

We’ll see about adding an option to customize the cursor, this would likely apply to VirtualCursor as well. I’m thinking something like a ContentId property on GuiService, or another similar service. That being said there would need to be some restrictions:

  • Opacity of the ImageLabel/Frame would be set for you to keep it under a certain threshold. Users will always need to see UI elements underneath the cursor.
  • The shape will remain circular, in other words any full size square image would have a UICorner applied to it. This is because the algorithm we use for selection uses a circle.
  • The size would not be customizable, since we don’t want the cursor taking up the entire screen.

You would be able to make it disappear entirely with a transparent image, or add something more thematic. Considering the new analog stick behavior, you would likely want to stick to the latter to make sure users aren’t confused.

In any case, I’ll bring this back to the team for now, these are just my initial thoughts on a potential solution.

8 Likes
13

This is actually really good work. I really like how the UI selection ignores hidden GUI elements as that seems a bit complex to implement. Good work team! :heart:

5 Likes
14

Oh, and another suggestion!
I’d like there to be some sort of way to change the keybinds for moving the selection cursor

Like how you can currently move around with WASD, Arrow Keys, and the DPad
And something to change the keybind that registers as a MouseClick1 (which is currently “Return” or “Enter”)

I really love the work you guys have done with the UI Selection, keep it up!

2 Likes
15

I love this!!! This is gonna make UI creation so much easier, especially with the Covered elements update!

3 Likes
16

Such an amazing update this is something I was waiting for!!! thank you so much for this and for the hard work on this update! :growing_heart:

2 Likes
17

We’re not looking to adjust these shortcuts at the moment to keep things consistent across experiences for all users. What specifically is your reason for wanting to change these?

18

Honestly, I don’t have a use case for rebinding what moves the selection, just a suggestion. However, for the keybind that registers as a MouseClick1 (which is currently “Return” and “Enter” on keyboard), I would like the ability to change it so I can keep the controls consistent in my games.

I’m not sure how to explain this right, my apologies, but for example Robot 64 (which uses a custom selection system), you press space on the keyboard to jump, and the A button on a controller to jump.

When in the pause menu, or any sort of menu, you have to press the A button on a controller to basically click whatever GuiObject you’re on. Same thing for the keyboard controls, you have to press space to click it. Now you can just click it with a mouse anyway, but this is something I would like to be able to do with GuiService, changing the default “Return” or “Enter” keybind for clicking on a GuiButton with a keyboard, so I could keep the controls consistent with my game.

20

Omg! Finally a improvement to Console Cursor. This has been a much-needed update especially with a lot of UI that certain games may have. As a console player myself, I’m very thrilled with this update!

1 Like
21

This update made the default navigation much less intuitive and more annoying.
Also, the billboard selection still completely broken.

22

Can you give some specific examples so we can take a look?

We are aware that BillboardGuis don’t have the best directional support right now. There are still some bugs we want to fix with them. The best way to currently interact with them is to look at them more or less directly.

One of the main goals with this update was to avoid regressions and respect developer choice. We will be continuing to make adjustments and bug-fixes to all of our systems to make sure they work with as little need for developer fine-tuning as possible.

1 Like