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:
forums.unrealengine.com/t/ins...

[@agj383]

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

[@yohanhamilton7149]

Still, Epic's youtube team does not do its job in making the timeline

[@gabriellevesque2185]

Almost 2023, Almost 3 HOURS video, still don't get a damn Timeline. Come on...

[@xylvnking]

goat

[@saifalam1109]

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

[@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).

[@swatpupgaming9321]

Nice Tested with both ways and Yep your Solution is Perfect

[@shaqm0bile]

Any clue as to why my gamepad doesnt do hover focus properly (activate the button hover state when focused with controller)? I tried his fix for setting it as default but all it does is the blue outline.

[@roskelld]

I want to virtual hug you. Just been round in circles trying to figure this out. I even took note of the class comments and thought that UCommonActivatableWidget didn't sound right, but that's what was shown in the video so I went with it.

[@dreambadger]

Thanks for this. Absolutely never would have known.

[@f.xinglese6055]

As much as I like Inside Unreal streams, I think it would be preferable to have technical videos like this one in the same format as "Unreal Engine AI with Behavior Trees" : kzbin.info/www/bejne/n4qUm6F8q62amKc 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 ?

[@wdrago690]

I totally agree!👍

[@Tiger66261]

I agree. A "introduction to common UI" shouldn't take 3 hours. It feels like they can condense all this info into half the time.

[@gonoshift]

@@Tiger66261 yeah half the time or even less, like 30-40m

[@GankablePlayer]

I find it difficult to criticize free information like this, however I totally agree.

[@gonoshift]

@@GankablePlayer I'm sure that @F.X Inglese and the others (including myself) are grateful for the content created by the Epic Team, the suggestion to make shorter videos is intended to maximize help to the community

[@cho4d]

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!

[@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.

[@alienrenders]

My main menu disappears when the dialog pops up even if I set it to "Not Hit_Testable". I have no idea how to fix this.

[@dreambadger]

@@alienrenders 2h 1 min into the video, have you got the menu variable plugged in instead of the prompt variable?

[@alienrenders]

@@dreambadger You mean use a different stack? What's the point of doing that? I'm not gonna use a different stack every time I want to keep the old widgets around. Instead, I created my own stack that can do this. It can even blur the background.

[@UnrealKazu]

Thanks, great fix!

[@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.

[@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.

[@theothergameygamer]

I have trouble with Speed-English, so appreciate that he speaks at a normal pace (normal for me, anyway).

[@blackivy011]

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!

[@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 🙏

[@StepanHKA]

Hey awesome works on your channel. Can I ask how long you worked in C4D and why you switching to Unreal? I want to start Unreal too especially for cinematics.

[@hansdampf5679]

Funny it's the same for me. But many many problems have to be overcome in order to be successful in learning.

[@fallenhoenix1255]

What concerns me is, with the lack of online documentation, what little nuggets of wisdom might not have been mentioned in these videos. Edit: don't get me wrong, every single one of these training videos are like droplets of wisdom from God's savory lips! I appreciate everyone because I'd be without a prayer of not for them! Keep doing your magic, epic!

[@GankablePlayer]

You're right. We have to browse through a spaghetti library of videos to learn important information that should have been available in the documentation. Many times answers we are searching for in documentation are not found, yet might have or probably have been answered in a random walk through like this video. It's frustrating.. maybe someone at Epic will dedicate themselves to the documentation and maybe even put together a whole team to focus on it.

[@illyay1337]

I basically stopped working on my game's UI for months until a video on this stuff is made. I'm happy they finally made one. I kinda knew they would make one of these at least.

[@iam_Raavanan]

Michael's stream is always informative...

[@joeanrachelmiller6529]

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.

[@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.

[@supermerio]

Starts @ 13:30

[@joeanrachelmiller6529]

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.

[@GokdenizCetin]

Thank you! I learned new and necessary thing today

[@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...

[@DanPos]

Looking forward to digging into this video!

[@samething5258]

Me too kzbin.info/www/bejne/p5bafKiniN2tick love them

[@lukifah4900]

just watched your video

[@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

[@JoaoVictor-fk8no]

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?

[@GokdenizCetin]

1:29:24 I was expecting to see that hover state on keyboard

[@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.

[@user-xc8gg7yu6r]

Is there a github rep link of the demo project?

[@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.

[@KingcoolSam]

Nice tutorial!

[@ritusakhalkar2680]

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 !!!

[@grzegorz7097]

Hi! So I saw a question in the chat that I find interesting and I can't find an answer to it in the stream. Is there any benefit of using player controller to spawn UI over using a HUD class for it?

[@DronX_]

I use bouth, HUD to launch general UI (life, map, velocity, etc), and above it the Player controller to launch menu, because in player controller I can use keyboard mouse or gamepad input

[@jorgevallejodecastro9144]

2:01:37 you dont need two stacks , use only one to push and pop with deactivate and the system return to activate

[@ajibolaadewole-oyebokun4794]

Honestly, this is s frustrating, I tried using this, and I get confused the more I watch the video. I don't know the potential of Common UI because there are no many resources on how to use it extensively on the internet.

[@mrxcs]

1:08:30 Here there are two options, one set content and another set text (of Widget), that is the one he used, but this says this will wipe any bidding of 'text'. Each one should I use and why?

[@SerjSam]

Good evening. Please advise, How can I reduce the sensitivity/speed of the camera in the viewport?

[@joeycomtois2082]

In the top right corner of the viewport, there should be a camera icon with a number. Click that and that should allow you to change your speed

[@lambda_cat]

32:35 InputData_PC_Keyboard 51:15 StackCommonWidget

[@mrxcs]

When I add the FreeRoamHUD it consumes all the inputs, how I make ignore/pass throw?

[@crossmr]

For anyone, like me, who has been googling this trying to figure out how to do checkboxes, it's around 1 hour mark that he talks about it. All a checkbox is in commonui is a button with the 'selectable' option enabled. This information was way too hard to find.

[@Mantikator]

no matter what I configure in the CommonUIInputData, Unreal seems to want only FaceButtonDown(A) as the click action 😿 what could I be missing?

[@even311379]

me too, it just wont work...

[@KavanBahrami]

2:18:00 - Common UI in VR (per the time of this video)

[@Dahvidownz]

Am I missing something? It doesn't highlight the button when I set the focus on activated..

[@evogarciagaming6791]

21:21 That manufacter will be Microsoft, right? Because SNES controller already had A in the right and B in the bottom. Microsoft change it to evade copyright issues.

[@zackakai5173]

In terms of what the buttons are labeled, sure. But it's become pretty well established convention between Microsoft, Sony, and basically everyone else using a gamepad at this point that the bottom button is confirm or select, and the right button is to cancel or go back. Nintendo is very much the outlier there.

[@mikebrave-makesgames5365]

at around 1:46:20 the (set text) option can't be found, alternatives?

[@AntrygJones]

no space (SetText)

[@ilcanalechenonce]

The problem with the back handler was most likely the system trying to find the root and not finding one which was fixed by using IsModal. No need to override any function

[@DarkoSubotin]

I think he forgot to compile after setting modal, then went back to override then compiled.

[@DevGods]

He has improved so much as a public speaker. Thanks for the info!

[@rohanbhimra6952]

I'm on UE 4.27 and I have two problems 1. @1:20:21 I don't see my UI on screen 2. @1:21:50 There is no function called Get Desired Focus Target when I search for it

[@YoutubeAccountMan]

This is for UE 5.0. Using an old one is likely not going to be supported

[@rohanbhimra6952]

@@KZbinAccountMan he does say it's available for UE 4.27 @8:18 so I don't see why it shouldn't work

[@jonathanwestcott6594]

Get Desired Focus Target is an overridable function, so you may have to click on the "override" tab on the left window and scroll through

[@AdamMooreGameDev]

The closed captioning on this video is broken.

[@SomeNerd361]

Can't get the main menu to show despite being pushed. Not sure if it's a Linux thing at this point.

[@SomeNerd361]

tried same build on windows, definitely not a windows issue but can't seem to find out where I went wrong in the video. Is this yet another video that immediately gets broken or am I just broken?

[@SomeNerd361]

For those who may be stuck, try adding UI_Base to viewport BEFORE pushing the main menu

[@jorgevallejodecastro9144]

1:43:24 - You can use an enum insted index for more readable code

[@zackakai5173]

Depends on the situation. For a few menus that each do specific things, absolutely. But for a menu that's intended to be reused in dozens of different situations, trying to come up with a naming scheme is probably more trouble than it's worth.

[@yusufyusuf-es4sv]

I don't have the default tab like he has at 1:13:04 to change the name of each button. Can someone help me please

[@theFirstAidKit]

In the button he made, he added a variable and set it as instance editable. Then on pre-construct on the button he set the button text to be what ever the variable has as a text.

[@jeka84278]

Almost 3 hours watching a man strugling to remember anything. Such a waste of time

[@pro.giciel9084]

the first hour is intersting, after that it's a complete mess

[@ErrRationale]

UE in a nutshell

[@JaydenX]

The only thing I want is to be able to import footage

[@lukifah4900]

I CAN'T CREATE AN INPUT ACTION DATA BASE TABLE

[@hirudo881]

You skipped ahead and missed the part at 16:36, didnt you? Just like me...

[@lukifah4900]

@@hirudo881 Thank you!

[@swatpupgaming9321]

2:27:51 Talking about a Search bar I have done a Easy Filtering with a Input field Tutorial kzbin.info/www/bejne/aZizen6CrbiJp6s

[@variann6488]

what's up with the subtitles? Especially around 25 minutes

[@AdamMooreGameDev]

I love how the first 7:13 of the video is totally unrelated to the title of the video. :| Use the link to skip to the actual content.

[@elgrekko9634]

Epic please post us a professionnal video about Common UI, 2h40 in webcam here, seriously ? by the way, why is so hard to implement the gamepad navigation in widgets section ! I guess I would pay any expensive plugin in your market place to fix that ! Gamepad navigation in menu is a basic setting in video game industry ! Never see that !

[@eobet]

Is it just me or are the closed captions way out of sync?

[@lawendt]

same here

[@yorisongs9804]

47:59

[@OriginRow]

Please bring back HTML5/WebGL/WebGPU support for UE

[@CyberWolf755]

You can stream to a web client from a remote or local server. There is a template for it called pixel streaming

[@OriginRow]

@@CyberWolf755 There are some serious drawbacks for Pixel Streaming like webXR thing firstly, to get GPU for VM hit hard rock from popular cloud services, Inputs from custom API, multiplayer setups and documentation 🤦‍♂️

[@mateuszabramek7015]

Yeah, no canvas. But If you want more interesting menu with more complex animations you still go back to canvas.

[@workflowinmind]

6:20 much better the tone mamen ;)

[@isbushka-oji]

Hey, if this video is confusing, check out my simple tutorial on Common UI, I made it for beginners, so it's much easier to follow: kzbin.info/www/bejne/q4LMpIyXqd6goMk

[@Outrack]

Thank you so much for this, it's infinitely more clear.

[@jorgevallejodecastro9144]

1:27:48 - How its possible that the teacher dont kown a very important thing like use arrows! This is core for the system

[@greg6020]

I love the content but please stop scream talking into your mic or adjust your levels.

[@eobet]

So now we have GAS and CommonUI, all hidden away and very advanced to use but better than what’s default… Unreal is starting to smell like Unity, I’m afraid… 😟

[@lawendt]

It's actually like that because it's a layer on top of the engine. They are plugins because they're opt-in/out. Seems to be the things Epic wants to sell to people, but still letting developers decide what they're going to do

[@ilcanalechenonce]

Why hidden? They are showcased in various videos and there is even docs related to Lyra. Also, here you can freely dive into source code and figure out how things work. That alone is invaluable

[@YoutubeAccountMan]

So far, I see very little extra functionality than normal UMG. And the extra work it takes doesn't seem worth it.

[@Demozo_]

Then you're not understanding the problems this solves for you. Tbh.

[@YoutubeAccountMan]

@@Demozo_ Such as? So far the only problems it solves is if I want to change the style of my entire UI (avoidable with good planning) and visibility on the stack (only useful if I plan on having a bunch of windows but there's already functionality for that in UMG)

[@karol30660]

@@KZbinAccountMan Try to build a keyboard and gamepad navigation based on a focus with pure UMG. It's a mess. I had to write a pretty advanced focus manager in code to get it working moderately well. Common UI seems to solve a lot of problems I had with it. You might not plan for a bunch of windows, but good luck if you'll need something as simple as a confirmation popup anywhere then. And as for the planning, no amount of it will ever prepare you for everything, including style changes. Of course you might fix those per case and do it with pure UMG, it worked for a lot of people. I see no reason NOT to use a more advanced system that will help me avoid massive headaches down the line if all it needs is a 30 minute setup upfront

[@zackakai5173]

Common UI has the built-in ability to navigate around things like buttons and sliders using the arrow keys or gamepad thumbstick/D-pad. That alone makes it worth using IMO (it's the entire reason I bothered rework my UI stuff with this in the first place). Trying to do that from scratch with basic widgets would be a huge time commitment.

[@nikitaenlil8374]

Useless. more 2hours make nothing

[@DeltaZavr.]

Bring back the previous community manager!

[@azizkurtariciniz]

Are you OK?

[@highdefinist9697]

I think either are doing a good job.

[@yonjuunininjin]

I too miss Alex, Chance and Dana! But life goes on ¯\_(ツ)_/¯

[@xTHHxAimiForevr]

No.

[@iciervasotomayor]

LOL yeah, hosts in Unreal videos are getting so weird.... but we're living in the times of Peak Weirdness. OK. Just skip to the fullscreen technichal video. This wave of weirdness will eventually decay.

[@klovvin]

Please tell me this woman is gone by now 🐳 🤡

[@argosbrave6415]

Epic Games, you can’t tell me you can’t get AI to “summarize” these and timestamp for you. Look at software like “Gong”. This ain’t even hard

[@agj383]

Found a thorough annotation here: x157.github.io/UE5/CommonUI/Annotations/EpicGames-Introduction-to-CommonUI.html (I didn't make it)

[@gridtac2911]

the old community manager was a better fit