Introduction to Common UI | Inside Unreal

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.

ANNOUNCEMENT POST:

[saifalam]

17:30 Required engine settings setup
21:00 Setup data table for input actions
26:20 Generic data input blueprints hold info about button icons
36:00 Common input data blueprint
39:00 styling assets
45:00 UI
48:00: Don't use the canvas panel
50:00 StackCommonWidget
53:00 CommonButtonBase
1:10:00 MainMenu
1:16:00 PlayerController
1:31:00 PromptMenu

[agj]

17:30 - required engine settings setup
21:00 setup data table for input actions
26:20 generic data input blueprints hold info about button icons
36:00 common input data blueprint
39:00 styling assets

[LukasPirkl]

Watch out! You don't want to have UCommonActivatableWidget as a base class of the UI_Base (47:34)! Base class should be UCommonUserWidget. This is the reason why focus is not returned back to the main menu when the yes/no dialog is closed (1:54:54).

[f.xinglese]

It's faster, more concise and straight to the point. It saves us a lot of time.

Ok, I know it's not possible to ask question and have an answer "in real time", but it's much more easier to digest.
Why not have a short and fast presentation in the format I 've mentioned, and then, a few weeks later, a stream to ask questions live and answers those already asked in the forums ?

[chod]

A huge thankyou for doing this from scratch on camera! I find this very helpful vs some videos where you just talk about things you made earlier!

[Xetttt]

I wish we could get some written documentation of this stuff, instead of nearly 3 hour long streams that haven't been planned out beforehand, with a host who talks super slowly.

[ardenstonestreamer]

As mentioned by Michael at 1:41:21, a way of doing this with interfaces would be to create a UIPromptConfirm Interface with a function called "OnPromptConfirm" that passes an ID name parameter. Then any class that needs to listen for prompt confirmations can just implement this interface. Then do a simple name comparison on the id and if the id's match, that class can execute it's logic.

[REDSIDEofficial]

Amazing work, i shift from cinema 4d to unreal engine 5, my first month on UE 5 and is crazy powerful ! I love everything on it, nanite is a powerful weapon, lumen and everything! great work guys 🙏

[blackivy]

These videos are so valuable dude. For us who are serious about unreal, we need to see whats available and the best ways to do it. This is a great way to do it. Thank you!

[blackdevilcreations]

ok.. weeks into this topic now.. and CommonUI clearly is ten steps backwards in Userfriendly UI development..

Since there are no InputEvents like with Legacy Input.. you can't have multiple triggering Action triggering Events in a Button or an Inventory Slot.

Like Diablo..
FaceButtonBottom = use
FaceButtonLeft = move 1
FaceButtonLeft (hold) = move stack
..etc

not possible with CommonUI.. cause it only allows one TriggeringAction per CommonButtonBase. And there is 0.0 documentation of anything related to that topic.. so.. i think this won't change.. which is a huge NoGo for RPGs with Gamepad Support..

They added Enhanced Input (=EIS) support a time ago.. But not even at the beginning of being fleshed out. The InputActionWidget can't bind EIS Inputs if a CommonInput is available too, making the Widget stay invisible or blank white with an "unable to bind" error. If 10 Buttons have an EIS Confirm as Triggering Action, the CommonBoundActionBar has 10 times the same Icon shown.. even the ignoring of duplicated inputs is set to true..
sometimes EIS Inputs get not registered or make Widgets losing focus.. etc..

again.. Epic Games hide themselves in their own comfort zone, just doing FPS Plugins..cause CommonUI clearly is not Common.. it better be called ShooterUI, cause it is clearly made with lyra in head only..

If epic continues with their speed in updating this plugin, as they do now, CommonUI will still be in a pre-alpha state for the next years.. with nonsense documentation and zero development benefits, compared to the legacy Input system..

And if you say "But it has better gameoad support".. i think there are many plugins in the marketplace, handling that topic better than CommonUI...

Epic should add the experimental / beta Tag to this.. cause it clearly is not ready to be public!

too bad..

I'd to write my own Subsystem to handle focusing better than CommonUI, cause it sometimes has a button hivered, sometimes teo at the same time.. and sometimes it has a button in focus but triggers the action if a different one.. it was so frustrating...

[raddymastergames]

For the mouse over issue, around 2:09:18, where you can still interact with the main menu when the prompt appears if you use a mouse, you can solve by:

1. In BP_GenericPrompt, set Activation > Activated Visibility to "Visible." (I know this is the default, but it is key to actually select it for some reason)
2. In BP_MainMenu, set Activation > Deactivated Visibility to "Not Hit-Testable (Self Only)." This prevents the main menu from being interacted with, but it is still Visible.

You have to do these two things together to lock interactions to the prompt when it is present.

[joeanrachelmiller]

1:45:43 I think the "cheat" is where you create a dispatcher called click button. Then in the generic button you bind the dispatch call to the function click button. Then in the parent ui when you use an instance of the button you create the function in the parent ui.

[iam_Raavanan]

Michael's stream is always informative...

[BeeBlueBubble]

Great video!
Are there any videos or tutorials about adding dynamic buttons to a scroll box?
I don't fully understand how CommonUI detects any buttons you add to be able to use gamepad.

[JoaoVictor-fkno]

At 1:59:45, actually i'm still able to go over to the main menu options even with quit game prompt enabled, i followed everything exactly like this video, how do i fix this?

[joeanrachelmiller]

2:09:40 I find it good that it needed the override on what the back button expects. My favorite games as a kid was the Golden Sun series. The back button in a conversation was taken as a no or bad frown face. Many games have this so being forced to see it here is a reminder to think about this.

[Elmarath]

Does anyone know how to disable the feature that sets mouse position to middle of the screen when switched to a controller? This also makes the cursor disseapers.
I have a topdown game that gamepad can control the mouse, so I need to disable this.

[mrxcs]

52:32 I would recommend create an Interface with those two functions, and add in the Blueprint. So you don't need to 'cast to' to used it.

[TimvanHelsdingen]

Great presentation! Learned a lot. CommonUI seems a big improvement over default UMG. I really didn't like needing to make arrays for every button I want to use to be able to use it with my controller. Good job

[ritusakhalkar]

How to get the details and world setting panel on the right side of the screen ??? My UE5 interface has changed and viewport 1 is taking the entire screen. Please help !!!