Inside Unreal: Introduction to Common UI

WHAT
What is one of the most fundamental pieces of any project? If you guessed UI, you’d be right! Even though it’s a necessary step there are a lot of questions around some of the best ways to create and implement it, so this week we’ll be discussing with our own technical writer Michael Prinke some of the best tips and tricks, do’s and don’ts, and a general introduction to common UI.

WHEN
Thursday, July 21st @ 2:00 PM ET - Countdown

WHERE
Twitch
YouTube

WHO
Michael Prinke - Technical Writer - @Mike_Prinke
Tina Wisdom - Community Manager - @TheUnWiseTina

If you’re unable to make the livestream, all episodes of Inside Unreal can be viewed afterwards on-demand .

29 Likes

Hi @Tina_Wisdom
Great topic. I have two questions:

  1. It seems that movement input is disabled by default whenever a common UI is activated. Is there any way to change this logic? Perhaps it’s Lyra’s specific setup.

  2. How can I use the built-in UI gameplay tag system to toggle visibility of any other custom UI? For instance, if I have a visible minimap on screen, I want to hide it whenever a pause menu is activated. I know that can be done with gameplay event tags, but I have no clue how to properly do it.

I’d appreciate if the devs can help me out.

3 Likes

Thank you so much for this Talk! I was just questioning how to implement multi-platform Controls and this came in perfectly. Very well explained, together with showing how to solve problems Live, which I really enjoyed :D! Have a nice 2 week break to y’all!

1 Like

The Common_UI is really good, but a couple features are missing.

  • Overwrite Navigation Keys (Keyboard Arrows, Gamepad D-Pad) This Keys can’t be used if selection focused.
  • Gamepad Thumpstick Floating (for left and right custom Navigation)
  • Multi-Key or alternative assignment (ESC + P + Pause = Execute)
  • CommonUI_BaseButton (Dispatcher with Pressed and Released Events)
3 Likes

Hey!

There is an option to tie an input action to a UI button in Common UI, but it needs to be based out of an arbitrary table.

Is there a way to tie an input action defined in an input mapping context to a UI button?

Hey, in Common UI documentation they explain how to enable/tweak input interaction, check this out:

5 Likes

Hi
thank you for sharing. I’ll try it out.

1 Like

More UI and UMG talks and tutorials.

2 Likes

Heya, thank you for the livestream! Really helped to clear up some usage on commonUI, specially on the layer stack, it’ll make LYRA much easier to navigate now!

I have a question: How would we go around building rebindable keymappings utilizing the methods shown in the livestream?

Whenever I save or compile my InputData Blueprint (CommonInputBaseControllerData), all of the Input Brush Data Map array elements are removed and leaves me with 0 Array Elements. I’ve tried adding them one at a time and all at once. I’ve also tried just adding elements and leaving them blank too.

Maybe a bug or am I doing something incorrectly?

Version: 5.0.2-20280985+++UE5+Release-5.0

1 Like

During the presentation the speaker had a project in which when navigating the selected button had the key configured for “select” action to the right of the button, and it moved while navigating. it would be great to have that project to see how to do that and also manage to configure UI properly to get buttons triggered when triggering an action (project hang twice during the presentation).

2 Likes

This needs a Battle Royal, & much more this has potential to truly open doors for multiplayer because Epic isn’t creating enough EOS Tutorials to learn that from attaching servers to monetizing

Whenever I save or compile my InputData Blueprint (CommonInputBaseControllerData), all of the Input Brush Data Map array elements are removed and leaves me with 0 Array Elements. I’ve tried adding them one at a time and all at once. I’ve also tried just adding elements and leaving them blank too.

Maybe a bug or am I doing something incorrectly?

Version: 5.0.2-20280985+++UE5+Release-5.0

I’m seeing the same issue. I wonder if it’s because I didn’t put in an image in the brush for each element. That shouldn’t make it empty though.

I was having the same issue, but discovered that you need to fill in the image in the KeyBrush for it to save the Input Brush Data Map element.

Would be nice to have in the documentation the way to configure this using arrow keys instead.
There is another alternative to Common UI which is the UI Navigation plug-in, this plugin received funding from Epic games and has good support and documentation.
I hope selecting styles (CSS like) make its way to the main engine, leaving developers the freedom to choose between different alternatives.

Hello,
I looked for infos about using overlay over canvas for efficiency purpose. Tutorials on youtube and official documentation of Epic broadly focus on using canvas, and not on overlay alone. This way of doing things is a bit tricky to learn with so few support about it. Is the efficiency gain really worth it ?
It would be great to have more info about why avoiding the canvas, when so many people do otherwise.

Thanks for the video.

Awesome intro video. I have some questions

  1. How to get keyboard navigation behave like gamepad, same problem was on 1:26:30

  2. How to get actions bar work? So I created CommonBoundActionButton and used it in CommonBoundActionBar but its only displays “back handler” button, other buttons with “Display in action bar” turned on not displayed, explored some sources but still can’t get

  3. Looks like Common UI really powerfull, but even Lyra not utilize its features much. Is there any example project that uses Common UI mostly. With complex routing(something like switcher in stack), actions bar, modals and so on.

2 Likes

Just a redundant post, but I’m also interested in point 1 from @Ciberus

To explain it a little more: I had the same problem with normal UMG widgets, with understanding how to implement consistent navigation wether it be with a mouse, keyboard and gamepad. I did not find the informations. There are Navigation properties for button widgets, but I found no informations on what they do and how to use them. And just as in the video (point 1 mentioned above), I didn’t understand how to select a default input for keyboard or gamepad navigation.

I ended up making my own navigation system, overriding defaut selection system, focus system behavior to accomplish this. It’s a pain.

Then, when you mentioned it in the video (how to select a default input), I thought I would a last hear an explantion and solution. And no. You just said you would tell in this anouncement thread, but neither the video nor the forum explains at all.

Now, I feel embarrassed as I’m afraid I’ll just sound (or read, idk) mean, and I don’t want to be, but to be honest I find the whole video being not great quality. It’s very confused, not clear at all, with very poor informations for a very long video. Compare this to Matthew Wadstein video and you get what I mean.

UI is really important and we’re all confronted to menus whatever is the game we make. This deserves some love.
I would really appreciate this one is remade in a playlist, with a plan, a script, straight to the point (not cluttered) and detailed infos. And maybe if oher people are interested we could help work on the points we would like to be treated. I would gladly volunteer to alpha/beta test the script and give feedback from a noob POV.

As a start, I would suggest a chapter concerning navigation:

  • How can we set a defaut input on a frame,
  • How can we navigate coherently and simply between inputs (like pressing tab in windows) wehter we use keyboard only or gamepad (mouse seems obvious)
  • What about the 50 shades of focus, or rather, how can we get rid of them to just have a simple coherent system between different kind of input devices: you’re focused / you’re not => true/false.

For other chapters, for me, organising, clarifying and detailing what is in this video would be great.

If, for some reasons (time or whatever), unreal team wouldn’t want to get involved in this project, I would gladly give it a try though I’m not sure I would give accurate infos (or I’m sure I wouldn’t xD).
But it could be a start for feedback.

@E_PepeGamer

Thanks for the info. I’ll check it and see if it could be an alternative
Here is the link to the marketplace: UI Navigation

3 Likes

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