Widget Navigation Does Not Work Diagonally

When navigating widget focus Up / Down / Left / Right:

it is possible that navigation fails to find a widget positioned diagonally towards that direction.
Can this behavior be configured anywhere?

Currently this is a problem because a change in widget layout design, or disabling a button, can break navigation in Slate.

afbeelding

*Update, additional info:

Panels are dynamically generated, navigation rule “Escape” is used.

Imagine the following panel, this is a path of navigation which makes sense:

I think this path makes sense too:

Except the second path fails. This is the problem. Note that a smaller angle to “Up” still fails until a widget is almost directly above it.

Select a widget, then look at the Details panel on the right side. Scroll to Navigation. There you can manually set navigation. For example, you can use Explicit to tell your Widget where to go.

image

1 Like

Thanks for your quick reply. I am aware of the navigation rules, but “Escape” is the option I want to use. I want Slate to automatically detect what widget to navigate to in a direction, which is what Escape does. However, The next widget is not detected properly if it is not exactly Up / Down / Right / Left but positioned slightly diagonal in which case navigation does not occur.

My panels are generated dynamically, widgets are added to a VerticalBox inside a ScrollBox. Setting up a rule to point at specific widgets is not desired.

What I am hoping for is that there might be some configurable Slate parameters, either to control its navigation sensitivity towards directions or to control its navigation behavior. Or something like that.

At this point I’ve tried a few things (See the linked post) which made clear Slate is not perfect but I don’t think anything else is interfering with it on this basic panel.

2 Likes

There is no such thing, as far as I know. Your widgets should be somewhat aligned in the list for the sake of ease of readability. Maybe you can wrap them up with another focusable widget, and then make sure all of them are of the same size?

If you are talking about Add new, or Back button. You can easily add manual navigation there. Create custom method that will focus to the custom widget in the list.

I tried this, the parent panel will be focusable and redirect focus to one of its inner widgets but then you lose the directional data and just go for one inner widget, not optimal.

Imagine the following panel, this is a path of navigation which makes sense:

I think this path makes sense too:

Except the second path fails silently.

1 Like

Yeah, unfortunately that is expected. Gray buttons are really far far away from green on, in order for it to know where to go when “Up” is pressed. It’s not even logical to do that in this case.

Well, even 45 degrees or less in the desired direction fail. I’m looking for a solution.

Bump

bump

:parasol_on_ground:

Just wondering, did anyone ever get diagonal navigation working without having to use the Previous / Next (Tab) navigation button? No one uses a tab button on a gamepad, they rely on the navigational arrows.

When you focus the circled widget, you’d simply want the “up” navigation key to go either diagonal left top or right top if the direct top is not enabled. The actual behavior is that there is no navigation at all possible. This is simple UButtonWidget to UButtonWidget navigation, nothing fancy, nothing else is focusable or hit testable.

afbeelding

Hi @Cody.Albert , thank you for posting this snippet:

Custom Hit Testing | Unreal engine Code Snippet

Is there something UI designers (non programmers) can implement in UserWidgets to make these diagonal buttons hit testable with the up / down arrow?

We can’t apply the code snippets where the button panel generation is mostly procedural but the button placement is up to the designer. We run into a situation where navigation keys simply can not shift focus from one to another automatically even when the buttons are close to one another as on that image.

I expected that there would be a simple fix, for example to make the parent panel hit testable, but this does not work.

Side note, I have been collecting a bunch of Slate bugs in UE4 and UE5 I hope the team will take a look at some day.

WIP Guide to Slate / UMG + dealing with current issues.

I think it could be a solution to have the directional keys act like the tab key (Slate NavNext) if they are not handled, since that action does support diagonal navigation somehow. Gamepads don’t have a tab key so they get totally stuck on most menus.

Meanwhile I scanned the code of Slate, the hittest grid, widget paths and of the slate navigation config and found now way to “inject” diagonal navigation without modifying engine source, even then it is not exactly what I want.

For now I use a UserWidget wrapper for unreachable buttons and make that UserWidget hit test “Visible” and focusable. When it receives focus it passes on focus to one of its inner enabled buttons. This is really not something I’d want to bother designers with and this type of navigation logic should not be present in a UserWidget, but it seems to be the cleanest way to get things done without an engine mod. I would love a general 1 for all soltion to get it done with the hit test system.

1 Like