Inside Unreal: Introduction to Common UI

General Announcements
,
1

UI_072122
UI_0721221920×1080 109 KB

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 .

28 Likes
3

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
4

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
5

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
6

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?

7

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

5 Likes
8

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

1 Like
9

More UI and UMG talks and tutorials.

2 Likes
10

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?

11

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
13

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
14

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

15

Hi,
I’m on UE 4.27 and I’m facing an issue here @1:21:50 There is no function called Get Desired Focus Target when I search for it

is there any way for me to fix this in blueprints?

I tried to fix it with “NativeOnActivated” in code by creating a child class of the activatable widget and overriding “NativeOnActivated” and adding the following

if (GetDesiredFocusTarget())
	{
		GetDesiredFocusTarget()->SetFocus();
	}
1 Like
16

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.

17

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.

18

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.

19

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.

20

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
21

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