Introduction to Common UI

Introduction to Common UI | Inside Unreal

Рет қаралды 124,210

2 жыл бұрын

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

Пікірлер: 142

@agj383 2 жыл бұрын

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 2 жыл бұрын

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 11 ай бұрын

goat

@saifalam1109 11 ай бұрын

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

@NoName-dg2hv 9 күн бұрын

@2:10:07 : Controller Data Binding (Platform-Specific UI Elements)

@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 7 ай бұрын

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 7 ай бұрын

Thanks for this. Absolutely never would have known.

@f.xinglese6055 2 жыл бұрын

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" : kzfaq.info/get/bejne/n79hndF3267Lknk.html 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 2 жыл бұрын

I totally agree!👍

@Tiger66261 2 жыл бұрын

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 2 жыл бұрын

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

@GankablePlayer 2 жыл бұрын

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

@gonoshift 2 жыл бұрын

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

@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 5 ай бұрын

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

@cho4d 2 жыл бұрын

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!

@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 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

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

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

@blackivy011 2 жыл бұрын

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!

@raddymastergames 9 ай бұрын

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 7 ай бұрын

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 7 ай бұрын

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

@alienrenders 7 ай бұрын

@@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 6 ай бұрын

Thanks, great fix!

@supermerio 2 жыл бұрын

Starts @ 13:30

@iam_Raavanan Жыл бұрын

Michael's stream is always informative...

@GokdenizCetin Жыл бұрын

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

@GokdenizCetin Жыл бұрын

Thank you! I learned new and necessary thing today

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

@joeanrachelmiller6529 11 ай бұрын

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 4 ай бұрын

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.

@joeanrachelmiller6529 11 ай бұрын

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.

@DanPos 2 жыл бұрын

Looking forward to digging into this video!

@samething5258 2 жыл бұрын

Me too kzfaq.info/get/bejne/p8unftiiuN7eg5s.html love them

@lukifah4900 2 жыл бұрын

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

@BeeBlueBubble 8 ай бұрын

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.

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

@Elmarath 6 ай бұрын

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.

@StorytellingStyle Жыл бұрын

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.

@777redhood 29 күн бұрын

The plugin says its in beta and not ready for shipping. Can i still use this to make a ship-able game?

@fallenhoenix1255 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

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.

@hassanalhobail8084 2 ай бұрын

Can you explain how we're supposed to use the Q and E or R1 and L1 to navigate the UI??

@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 6 ай бұрын

me too, it just wont work...

@TheFirstOnesUEMarketplace Ай бұрын

If anyone else is left feeling a little puzzled by the implementation of activatable widgets, the Cropout sample project has some really clean examples on how to make that work properly

@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

@Mittzys Ай бұрын

This'll come in very handy!

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

@KingcoolSam Жыл бұрын

Nice tutorial!

@mrxcs 4 ай бұрын

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

@pro.giciel9084 Жыл бұрын

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

@ErrRationale Жыл бұрын

UE in a nutshell

@mrxcs 4 ай бұрын

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?

@Dahvidownz 5 ай бұрын

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

@AdamMooreGameDev 2 жыл бұрын

The closed captioning on this video is broken.

@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

@joshuasanders4302 Ай бұрын

Erm this is old but.. at 1:12:30, is using spacers for padding really a good idea? You could just go to Vertical Box and add padding above and below right?

@mertbiceroglu1949 21 күн бұрын

I might have heard something about spacers being little to no cost performance wise. I might be wrong about this. My general use case of the spacers are when i want equal distance between items basically using their fill option.

@joshuasanders4302 21 күн бұрын

@@mertbiceroglu1949 yeah but in complex structures it's not so much about performance its that wrangling a bunch of spacers becomes very difficult, and you often need padding anyway. It just turns your widget trees into a mess lol. IMO rule of thumb, do not use spacers for padding, use spacers when you have things that need to stay far apart from each other by way of consuming space

@mikebrave-makesgames5365 Жыл бұрын

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

@AntrygJones Жыл бұрын

no space (SetText)

@user-xc8gg7yu6r 11 ай бұрын

Is there a github rep link of the demo project?

@jorgevallejodecastro9144 Жыл бұрын

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

@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 10 ай бұрын

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

@evogarciagaming6791 2 жыл бұрын

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.

@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

@jeka84278 Жыл бұрын

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

@rohanbhimra6952 2 жыл бұрын

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 2 жыл бұрын

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

@rohanbhimra6952 2 жыл бұрын

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

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

@lukifah4900 2 жыл бұрын

I CAN'T CREATE AN INPUT ACTION DATA BASE TABLE

@hirudo881 2 жыл бұрын

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

@lukifah4900 2 жыл бұрын

@@hirudo881 Thank you!

@JaydenX 2 жыл бұрын

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

@variann6488 2 жыл бұрын

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

@AdamMooreGameDev 2 жыл бұрын

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.

@DevGods 2 жыл бұрын

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

@isbushka-oji 2 жыл бұрын

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: kzfaq.info/get/bejne/q7eZpryS2d_Rmps.html

@Outrack 5 ай бұрын

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

@eobet 2 жыл бұрын

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

@lawendt 2 жыл бұрын

same here

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

@swatpupgaming9321 Жыл бұрын

2:27:51 Talking about a Search bar I have done a Easy Filtering with a Input field Tutorial kzfaq.info/get/bejne/ac2AfK593bm6oX0.html

@KavanBahrami 11 ай бұрын

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

@lambda_cat 4 ай бұрын

32:35 InputData_PC_Keyboard 51:15 StackCommonWidget

@OriginRow 2 жыл бұрын

Please bring back HTML5/WebGL/WebGPU support for UE

@CyberWolf755 2 жыл бұрын

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

@OriginRow 2 жыл бұрын

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

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

@yorisongs9804 Жыл бұрын

47:59

@workflowinmind 2 жыл бұрын

6:20 much better the tone mamen ;)

@greg6020 2 жыл бұрын

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

@nikitaenlil8374 2 жыл бұрын

Useless. more 2hours make nothing

@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

@eobet 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

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

@Demozo_ 2 жыл бұрын

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

@YoutubeAccountMan 2 жыл бұрын

@@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 Жыл бұрын

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

@fidel_soto Ай бұрын

This is useless if it doesn't work with enhanced input. Not to mention the severe lack of documentation and just overall confusing design.

@lukej7745 15 күн бұрын

its called enabling it in the settings lol

@fidel_soto 15 күн бұрын

@lukej7745 yea now it kinda works with enhanced input now (it didn't back then) but still has many more shortcomings. That being said, you can make it work if you put effort into fixing the shortcomings. The system has a lot of potential. If it gets fixed and perfected it might get to be great.

@DeltaZavr. 2 жыл бұрын

Bring back the previous community manager!

@azizkurtariciniz 2 жыл бұрын

Are you OK?

@highdefinist9697 2 жыл бұрын

I think either are doing a good job.

@yonjuunininjin 2 жыл бұрын

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

@xTHHxAimiForevr 2 жыл бұрын

No.

@iciervasotomayor 2 жыл бұрын

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.