Best Practices for Creating and Managing Widgets | UI | Widgets | HUD | Unreal Engine 5 Tutorial

👨‍🏫 My Patreon link:
/ kekdot
Download Project Files | Premium Tutorials | Courses
💦 Get our Game on Steam | Kekdot Center:
store.steampowered.com/app/14...
---
In this video we take a look at how we can properly create and manage our UI Widgets inside of the Blueprint HUD class.
We take a look at the upsides of using the HUD class and how we can have a nice general spot to manage our UI from. We also see how we can communicate from the Player Controller class with this HUD class in order to toggle the UI.
In this video I also explain why it's better to toggle Widget visibility to on/off versus Creating and Removing widgets from their parent.
We also checkout Macro's, Functions, and why the Macro Library is a huge time saver
🛒 Checkout our awesome Marketplace products and learn more about Unreal Engine:
www.unrealengine.com/marketpl...
#unrealengine #Widgets #tutorial #UI # HUD
---
Welcome to Kekdot!
👨‍🏫 Our Patreon - Download Project Files | Premium Tutorials | Courses:
/ kekdot
🛒 Our Unreal Engine Marketplace Templates:
www.unrealengine.com/marketpl...
👾Join our Discord:
/ discord
📆 We upload videos on a weekly basis
📰 Follow us on:
Instragram: @kekdotyoutube
Twitter: @kekdot
Reddit: @kekdot

[@Kekdot]

Hey guys, 👨‍🏫 My Patreon link: www.patreon.com/kekdot Download Project Files | Premium Tutorials | Courses 💦 Get our Game on Steam | Kekdot Center: store.steampowered.com/app/1487180/Kekdot_Center/

[@lolaswift111]

Tutorials teaching best practices and actually used in real game are rare. For that, I thank you very very much. Want to learn more from you

[@TheFlyingEpergne]

this has got to be one of the greatest ue5 tutorials of all time

[@hugolandreville853]

Thank you so much for making video that explains how to do thing "correctly" in a real development situation and not just the basic way. That is really useful.

[@joeanrachelmiller6529]

This is the organization that I was looking for. This made enough sense that I can now stream line all the tutorials I've watched.

[@kylemason01]

Just to say one tip. The UE guys in the Common UI tutorial on their channel said using canvas panels for all your widgets will be a CPU bottleneck. You should not try and use canvases if possible or if you do very little.

[@Fractal2D]

the reference - kzbin.infoTTB5y-03SnE?feature=share&t=2880

[@maxwellprince5742]

How can we use less Canvas Panels? I seem to have seen multiple times that for example, a Text Widget needs a Canvas Panel to act as the root

[@semerjon]

@@maxwellprince5742 I used SizeBox UPD: Inside SizeBox placed Overlay where can be many children

[@kylemason01]

@@maxwellprince5742 You just use other things like Overlays. It means altering how you construct your widgets but you deffo dont need canvas panels. I only use one in my whole project for my HUD and thats it

[@nfrancisj2122]

@@maxwellprince5742 Think of a canvas panel as a glass window over your game. It's transparent, but it's still calculating. Then you add more canvas over that, making a multi layer transparent shader. It can get pretty expensive and will drop your frame rate. The BEST is to use a material shader to build ur UI, but if that's not possible, then standalone modal widgets are the way to go. It's best to profile and then see if you can budget canvas into your game.

[@noname_2108]

That's amazing. I really love that you show the principles behind your decisions first, because when you understand principles you can begin coding! Thanks! HUD Class + Player Controller is super setup)

[@stephenmurya]

Thank you for this. Finding tutorials that teach best practices are rare. Most tutorials just teach game jam level implementations. This right here is a gem of a video. Thank you ❤

[@xaxao649]

I love this kinds of tutorial! Makes me feel more ready to persue the industry by follow best practices, please make more, (perhaps about organization of assets, or packaging?). Thanks!

[@dmytrogladkyi]

Crisp and clear. Love your videos on this topic!

[@danielexceed6882]

Wow extremly good code man! I did / used some of the concepts in the video but some are very new to me. Keep it up!

[@GiulianoVenturo]

So well explain. I love the tutorial!! I hope you continue the Multiplayer series

[@4tee2]

Better than a beautiful example, it is an excellent example! Man, thank you, I am so much clearer now on this use of widgets.

[@Flowerpot2905]

Awesome - I couldn't find my macro because I was using your player controller that you built in previous videos. My parent class was "character". But I was delighted to figure that out! I've learned more in this tutorial than in any other.

[@Cursez]

Love the vid. Learned a lot watching this. Enjoy how you explain the WHY you are doing what you’re doing. Keep it up!

[@Unyverses]

outstanding Video. Definitely am using this process going forward for our UI

[@baziztsahy3927]

Thank you for a wonderful tutorial. It is amazing how much new stuff I've learned

[@CosmicComputer]

Very cool and very helpful thank you so much!

[@Smile1oasis]

I can watch your videos WHOLE DAY!! They are so useful and informative. I've learned a lot from each of them 👏👏👏 you are a great tutor.

[@Mr.K.Johnson.]

How did you make a health progressbar in this way?

[@WubbsBubbs]

I've been looking for a tutorial like this for half a year now because I was floundering with how to handle my UI systems. I've seriously been doing everything inside of the individual widgets' blueprints and it got so incredibly messy. A nice framework like this was the jumping-off point I needed to get everything working the way it should. You're saints man, hats off.

[@brunskiy]

Thank you for the work you've done. Great solution.

[@AidenIlkhani]

Thank you for this. There is a lack of information around this topic.

[@speedwaylabsdev]

24:00 mind blown! :D Thank you for sharing this. Loved the long form content!

[@javisartdesign]

thanks! very well explained. Really like this kind of Best Practices videos

[@junschannel4911]

Great, this is the best multiplayer game tutorial in the world, we need more tutorials of this level, the idea is very clear, looking forward to more videos about managing multiplayer games, subscribed and liked!:)

[@trollgasm]

Revisiting this video. The Hood Class joke is actually pretty funny. Cheeky. Glad you have all these videos. They have really made me re-think how I approach setting up my projects.

[@kuro2ck]

Best widget video on youtube!

[@ezphantom]

Thanks for showing how it could be done better. Cheers

[@davideblonda6159]

Thanks for this videos, i have seen many people making unreal tutorial channels and than give up half way, so is kinda difficult to find a channel that push until the end of i project, i hope this is not the case, i have learned a ton today, thanks a lot.

[@DeeOdzta]

Thanks for the talk and chalk.

[@SpaceWorks_Studio]

Thank you so MUCH!!!

[@tentmantv2203]

really phenomenal tutorial

[@gouravkd8545]

INCREADIBLE!!🤯

[@sym9266]

Fantastic Tutorial, subscribed!

[@shadowryugamer7349]

By far this is the best widget tutorial i have seen thanks for this video brother

[@pavellysenko8278]

Thank you for a cool middle-level tutorial! It is very hard to find such staff covering proper organisation (split logic between PlayerController and HUD class, and so on...)

[@prudentibus]

Actually very nice tutorial

[@jdia.]

You can use the arrow on the add to view port to open it, and use the border to arrange certain widgets in custom zorder

[@lululu6102]

wow should have know you earlier, great work you are doing.

[@Porikor]

Thanks for the tutorial, I understood only a half of it yet. But I was able to include a pause game state with an Enhanced Input Action instead of a keyboard event. I wished the menu had a close button or an x, just to learn the right alternative way to exit the menu from a widget blueprint with the solution from this tutorial.

[@HiddenWorldsLLC]

I am glad you clarified to set the widget as collapsed, I was about to comment saying "Dont set the widget as hidden." xD

[@FrozenAssassine]

Love the tutorial, thanks for sharing. Where can I find the next video, because currently I am lost at how to update my UI from my Player?

[@punchline1729]

Awsome tutorial

[@adamkareem]

Excellent excellent tutorial :)

[@sizzonnz]

Hey great video! I have question about managing, how would you setup UI that have alot of depth, for example menu button opens class widget that can open many class widgets, and those widget can open another multiple widgets. Thanks for any suggestion, once again i want to say amazing videos!

[@blackivy011]

Have you used the CommonUI classes? I feel like pushing on and off the widget stack is a more built-in way of doing this. You should check it out!

[@saeedzamani1503]

I like it! thanks a lot! It would be better to do it in two parts.😊

[@shannenmr]

If you are making a game to release and others to play you should probably look at using the "Common UI" plugin provided by EPIC since late UE4 which is also used in Lyra as it allows for theming, handling different / swapping inputs and alot of the "core" / "common" logic most people end up always doing in UI development.

[@Kekdot]

Unfortunatly it’s highly limited in blueprints. I recommend it more for C++ projects. It’s rather complicated and undocumented last time I checked. For me it saved more time not to use it.

[@GoodguyGastly]

​@@Kekdotis it still like this? Ui is so annoying in UE. This video was a great help though. Thanks a ton!

[@Kekdot]

Still like it unfortunatly

[@shannenmr]

@@GoodguyGastly In 5.2 they have updated Common UI to work with Enhanced Input and have fleshed out the documentation more but its still lacking. Some YT'ers have recently released some videos on the topic + there was a recent'ish EPIC released video too.

[@dreambadger]

CommonUI is still garbage unfornately. Even the CommonUI demo map in Content Examples project is broken. For example if you press your close/back button twice on a game pad when a pop up widget is inside its animation fade, it completely breaks focus.

[@MarekZeman91]

Sooo that is where the HUD goes, not in the controller, game instance or game mode like everybody else is showing 🤔 Watching your vids for a while now and it's always a pleasure when something new shows up.

[@Kekdot]

That is indeed where your UI is truly supposed to be managed. Just as seen in the UE docs. More videos coming this week. One for each day of the week

[@shriwastavshoryas]

Really amazing, I personally miss this level on in-depth tutorial. Love you guys. I hope to see similar in-depth techniques in future. Any one reading this comment First Subscribe!!!

[@zigglyDev]

Great Tutorial. I have one doubt. What about options, selection menu where game needs to switch from one Widget to another. How will i control that, Macro you create is not callable in Widget Graph. how will I switch between widgets from widget?

[@luiscarlosealo]

Great tutorial! though, its amazing how UE make such a simple functionality a long and tedious task! this will take less than 5 minutes to implement in Unity :). Keep the great work man!

[@amadeuszittel8910]

I enjoyed the video very much! Could you explain to my why you don't have to check if the HUD class is valid before the initialization has completed?

[@jonathanmadeira]

I had the same question. I was wondering what would guarantee the HUD class being valid? What if the counter expires and we never get the valid class? Not checking if it is valid again would error out. Edit: I may have spoken too soon. At 37:15 he does check if it is valid again, so it shouldn't error out

[@steveCCan]

Love it! any ETA for sequel?

[@alexpoc]

is there any way to use the visibility way for a widget that must be created on mouse location for example an item details panel ?

[@aleksandrstukalov]

Hey, I could't figure out what's the point of trying to cast to our custom HUD class several times in a row. Like, is there such a great difference in time between the creation of Player controller and our HUD class? If there's not, then it's us who didn't set the proper HUD class, and hence nothing will change in runtime, hence it's pointless to check. So why are we doing this? 🙃

[@Mr.K.Johnson.]

Very good explained Video. But since i do all exactly like this all my progressbars only works on server and nomore on client side😢

[@morelloreanode]

You are powerful

[@sebabuce]

Hi, what should i do in case if i have multiple pawns and each one of them can dispaly information using same widget. Should I create one widget per pawn and add to array, or should I create one widget and then regarding which pawn I click populate widget with data of given pawn?

[@tommyfournier3138]

I am unable to find an answer to this question, How can you control the visibility of only one component inside a widget/canvas. My example has a text that I need to appear when I get close and a progress bar underneath it to only appear as I press E, I first had them separated into two different widgets which worked great until I zoom in game and the distance between the two changes depending on proximity. I added the progress bar into the same widget to have it distanced properly and I am unable to control or even get access to the progress bar object from a blueprint to toggle visibility seperately. Any help is appreciated.

[@Mr.K.Johnson.]

Maybe you can make a Video for this series how to create Health and Stamina Bars.

[@Mr.K.Johnson.]

Health Variable replicates right from Char BP but in WPB i only get it from Server, so healthbar don´t work for clients. What can i do?

[@kfrz]

Around 25:00 you are using inputs directly in the graph - isn't it more appropriate to use an InputDataTable and mapping, so that there are not direct coupling between the menu classes and the input map? Then the user could ostensibly remap input as well as having abstract interface for gamepads, etc. I'm a noob, trying to learn, but it seems that Enhanced Input allows for this type of paradigm in-editor, and then you could GetEnhancedInput action from the graph, instead of the explicit key.

[@stevenhoffmann5457]

I think He doesnt use 5.1.1 In 5.0 there isnt the enhanced Input

[@Kekdot]

True

[@stepylee]

@@Kekdot as i followed your steps when i changed the player controler class to BP_PC_BaseSetup in BP_GM_BaseSetup i lost my movement in game. Using 5.1.1 version. its this the case discussed above ? any idea how i could fix it pls ? i started 2 days ago so noob explanetion would be nice. thank you. Also do you have any tips what to do if i dont want when i toogle a widget like mounts to the inventory widget been close ?

[@user-ccgames]

Hey Kekdot, I implemented your BP Macro Library in Unreal 5.3 and I'm getting this error: "Delay generated from expanding Get BP Game Mode 01 contains a latent call, which cannot exist outside of the event graph". Did something change in the newest version of Unreal? When I change the Delay node to something else I no longer get the error but I cannot find a suitable replacement for delay. Set Timer by Event or Set Timer by Function don't seem to work very well in macros.

[@exenihilo]

How would this sort of thing handle some sort of UI that should be seen on every client, like a ping in the world space, or overhead healthbars? Since the HUD class is always run on the client, would those things become impossible without an additional class?

[@Kekdot]

The HUD class as the name intends is only intended for the Heads up Display of the player. So basically only the 2D UI that an individual player sees. In case you wish to use world UI then basically spawn an actor that has a UI component attached to it set to either screen or world space. Checkout my player name above character head tutorial.

[@Mr.K.Johnson.]

Very good explained Video. But since i do all exactly like this all my progressbars only works on server and nomore on client side😢 Please give me an answer to that. I'm on your Discord but nobody's answering me there either! I just can not manage it. Either the progress bar only works on the server side or only on the client side. No matter how I turn it. I'm really getting desperate and giving up! That really takes the fun out of programming.

[@arthurspears8477]

Should I be trying to use the same HUD for the main menu, lobby, and game? Or should I use a different HUD for each, setting it in the gamemode?

[@Kekdot]

Different child class for each

[@arthurspears8477]

@@Kekdot My main menu wasn't appearing until I set a custom event to create all the widgets, then called the custom event from the main menu level on beginplay. Begin play wasn't hitting in the HUD class.

[@RMC_]

Is player controller the same as a player blueprint like BP_FirstPersonCharacter? because I don't have the "get HUD" option at 27:14

[@Kekdot]

No a player controller and a character class are two different actors

[@RMC_]

@@Kekdot ok thanks. I will have a look at it. Great video, but might be too advanced for me just yet :)

[@djrj9367]

very good Tutorial , keep up the good coding , you deserve more likes ! Liked 126

[@rockygingerstudio]

Hi I have a question, the system is really great, but my concern is that I want to create a main menu but it does not work. Because for the main menu I have to create another level than the base level game, and I think it messes with everything. So what would you do ? Sorry if I did not explain well I am very confused as well :)

[@Kekdot]

The main menu is an exception that has its own game mode and simple HUD logic. This tutorial is intended for handling in-game UI

[@rockygingerstudio]

@@Kekdot Thank you very much

[@baziztsahy3927]

Newbie here: Why does the Macro for creating the widget are a Player Contoller Macro and not a HUD macro?

[@h3rnaldo]

Hi there Kekdot. I'm desperate. For some reason my widgets are not being activated when packaging the game in shipping configurarion. There's just little information about this Idk who else could help me.

[@y0t4]

can we get an updated version for 5.2. it seems the way you set up the toggle widgets is different in 5.2

[@ilollipop1009]

i did all step by step in 5.2 and i had no problems

[@y0t4]

@@ilollipop1009 in that case I'll have to give it another go, thanks!

[@Mr.K.Johnson.]

@ilollipop1009 how do you get a working healthbar with this system? No matter how I do it, I only get the progress bar to run on the server side. But the hud for the progress bar is also shown to me in the clients. They just don't work.

[@aethylwulfeiii6502]

Why does nothing ever work in UE5? When I re spawn the character the health is reloaded but the user interface displays zero health?

[@RebusMoebius]

(*Supporting your channel with any messages))))

[@whitefish-id]

At 30:18 you are showing bad thing. HUD already has Owned Player Controller and it will be instantiated after local player controller, so it is okay to subscrube on player controller events from HUD class intead of dirty hacks. @Kekdot, what do you think about that?

[@gendalfgray7889]

What better: One HUD class that contains main menu and game widgets Two HUD classes, one for main menu, another for game?

[@alejandrodoradom]

Using a delay node to cast a variable seems like a really bad practice. What happens if your defined timeout works now but one year into development is not enough time and the cast begin to fail? Do you just manually increase it over time? In this particular case, wouldn't it be better to wait until the player has initialized completely and then cache all these variables? You have the OnPostLogin event in the GameMode that is triggered only after the player has received a player controller and that event returns the player controller, it could then call a "PostInit" custome function in the player controller, for example. There must be other ways to do this caching using events and delegates. I really like your tutorials, some of them have some great points well thought and presented but other tutorials are inconsistent and sometimes even go against previous ones were a particular subject was better explained and closer to what the right solution or approach must be. Keep up the good work and thanks for sharing your knowledge!

[@polysiens]

Yea, sometimes getting an error is a good thing, especially for critical classes like player controller. Making a fail safe with a delay that can timeout sounds like something you never want to do. If I have a class that if it fails, bunch of the things in my project would not work, do I ever want to have timeout and just let it be?

[@bobbyr]

Good tutorial, showing good and bad examples.

[@MadaraBleepface]

As a ue noob but expeirenced programmer, I can say that calling things like "Get Owning Player Controller" separately every time you need it must be a bad practice. As even if it get's a local variable, it must still be a more heavy function to run than to just run it once and save it as a local variable.

[@ethanwasme4307]

it's always got a reference to a controller hence always in memory

[@mythicaldata6297]

Just because the menu is not in the viewport, and not ticking, this doesn't mean it isn't using resources. It it's loaded it's load Plenty of widgets don't even use tick

[@zackakai5173]

Concerning best practices, you should only use canvas panels when you really need to. In most cases you should favor overlays and use child widgets to arrange things. Like so many other things in Unreal, the easy/nooby way of doing things isn't really going to affect performance in a small tutorial project, but at production scale can start causing problems. Best to get in the habit of setting things up to scale early on (within reason of course, but in this case it's not a lot of extra work).

[@NicolasGagne]

You better implement common ui

[@Kekdot]

You used it?

[@NicolasGagne]

@@Kekdot Yes, I'm using it in a production that has just started. There are a few subtleties that I don't fully understand yet, but it's really well done for focusing on the right widgets at the right time, and controller support is very well implemented.

[@Kekdot]

Thats good to hear. I myself have found it to be more bottlenecking and lacking of options and hence created my own setups that serve my needs well. Good to hear that you do find it handy to works with. Do you work with blueprints or cpp? In blueprints I experienced quite a bit of difficulties working with the plugin.

[@NicolasGagne]

@@Kekdot I'm currently implementing the core systems in C++, and 80% of the game remains in Blueprint to iterate more quickly. There will likely be a pass at the end to optimize and convert the performance-heavy Blueprints to C++ if necessary.

[@scottmaxwell1927]

The vowel for HUD is not correct. Even your timestamp reads "hood". Lovely descriptive video otherwise.

[@jjjjjjjjjjjjjjjjjjj804]

HUD: ("H-Uh-D") VS ("Hood")

[@ArcaneX999]

Couldnt stop laughing everytime he said "hood" :p

[@Mr.K.Johnson.]

@ilollipop1009 how do you get a working healthbar with this system? No matter how I do it, I only get the progress bar to run on the server side. But the hud for the progress bar is also shown to me in the clients. They just don't work.