Inside Unreal: Introduction to Common UI

I’ve been searching for this a while and it led me here. Echoing the disappointment. There is nothing obvious in CommonUI or in Lyra. The guy doing the video made it sound like this is an uncommon use, but keyboard menu navigation is exceptionally common and for a lot of games it’s really not sufficient to not have it in a production-ready game.

Unlike the guy who made this video, I’ll actually come back and reply if I find the answer. Or maybe he never found it. You’d think with access to Epic’s staff and the plugin developer that shouldn’t be an issue.

I went and sifted through the CommonUI event handlers until I found one that triggered every time I changed the current menu item with a gamepad (and confirmed keyboard doesn’t trigger it). Had to build Debug Editor (source engine only) to debug it adequately.

If I set the input mode to Game or Game and Menu the input events trigger correctly, but to have mouse showing I have to set it to not capture.

Therefore, the correct option is “Game and Menu” with mouse “Not Capture” or “Capture During Mouse Down”, if you want keyboard input events to be detected.

Now I’m getting events for key presses but they’re still not navigating, because it’s using the mouse cursor for focus.

Changing Common Input Settings DefaultInputType to Gamepad and disabling SupportsMouseAndKeyboard allowed the keyboard to be detected as gamepad input. But this is no good if we want to have the option to use the mouse. It also means gamepad icons displayed for actions instead of keyboard keys which is also no good. Probably has more issues too if you proceed.

Every time the mouse/keyboard is reactivated, the UI gets it’s focus from what’s under the mouse cursor. This is the source of the issue, we need to tell it if the last input device was a navigable key press, to NOT get focus from mouse, if we could do that, we would not have any more issues.

I’ve been at it for a while and I’m now too brain fried to continue. If I come back to this I’m sure I will find the correct solution, but my game doesn’t need to have it, but it should have it, as should most games I think.

Hopefully if someone else finds the solution they will post it here too.

TLDR: Set input mode to “Game and Menu”, set mouse to “Not Capture”. Now you get navigation key events for the keyboard. The remaining issue is that when the keyboard and mouse is active the focus is taken from what’s under the mouse cursor which overrides the key events (I do believe it’s probable that they change it, but in the same frame it is just changed back, or more likely rejected because mouse is currently used for focus).

One place worth looking may be void UCommonInputSubsystem::SetCurrentInputType(ECommonInputType NewInputType) where it calls SlateApplication.UsePlatformCursorForCursorUser(true); every time you reactivate the mouse.

1 Like

I’d like to echo the previous posters in that I have also not been able to get keyboard navigation to work with Common UI.

Also, I find the Data Table approach a huge step back in UX for me as a developer. For example, how do I achieve the following with Common UI?

image

2 Likes

I decided to give up on keyboard nav because it wasn’t essential for my game, it can make do without it, but I still want it.

And yes, now echoing what you have posted, I find it really odd that they bothered with a solution that doesn’t support multiple inputs - the most obvious scenario is WASD+Arrow keys for menu nav haha. Sensing a pattern.

This is one of the best plugins ever developed for Unreal, together with GAS.

But there is one pending issue, I think: clicking with the mouse outside the widget it loses the focus, and even gamepad doesn’t work anymore. Is there a way to handle this, different of polling frequently to check the focus state?

@Vaei @eobet @BlenderGamer @Ciberus @E_PepeGamer

I hope my tutorial helps and would welcome your feedback!

2 Likes

add an empty border that covers the whole screen and you wont lose focus on click

edit: an overlay may work too

1 Like

Btw I also solved it in similar way for ItemSlot’s and added selectable support for CommonTileView’s/other “lists” widgets

1 Like

This is great, but how do you solve keyboard navigation?
Do you have to run a OnTck and check every button if keyboard is focused and then trigger the hover state manually? Very painful.

Do you have to run a OnTck and check every button if keyboard is focused and then trigger the hover state manually

Yes as example i have equipement screen, cant use “list” here. On Construct I just save all buttons in array :upside_down_face:

On click “Change” i searching for selected “ItemSlot” in buttons array and “do something”(in my case navigate to another screen)



If its possible better to use “lists” like CommontTileView/ListView/TreeView its easier to take selected item for example I have EquipItemScreen on press “E” you can get selected item


Hope it will helps a bit

Found how to solve issue with keyboard navigation - mouse click in random space should not remove focus from buttons

1 Like

Hello! I was wondering how I can use Enhanced Input instead of the inputs from the common UI input action data table? I believe this is possible and I know there’s an option to turn it on, but I can’t find a way to make it work on my own.

Check this link. Note it’s still flagged as experimental in 5.4 so this system structure may change in the future.

1 Like