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

foreign so I decided to make another video because you guys liked my Series so far so I just want to continue with that basically um so I'm this is a new video for the multiplayer tutorial series and in this video I basically want to continue on where hello guys and explain you guys some handy tips so there's gonna be a lot of information covered in this video that I think is useful um so yeah let's Jump Right In it so basically what we did in last video is that we set up a function here inside of the game mode that will find us a random player spawn and then it will spawn our player there and then as soon as our player controller starts here then from the local Player version of that player controller we call that spawn on the server here and then the server will basically spawn our character with ourself as the reference of that player controller who wants to possess that character so that's a very nice basic to understand of course and then in a previous video before that I I explain to you guys some basics of the multiplayer framework or more so the basics of the enroll engine framework and the core classes that are required to build your games basically so what do we talk about here about managing connected players things like on post login on Swap player controllers and basically we talked about the whole stuff that explains what the relationship between all of these core classes are so somewhere in this video here I explained that to you yeah so I see that it's here in the beginning of this video actually but I did not explain it in this video apparently I explained this in a video before this one but yeah here I basically explained like what is a game State what game mode where does the game State exist on the server and client what is a player controller for example and then what are widgets in relationship to that so where I want to continue today is to basically talk about now that we know the relationship between these and how to spawn a character the next thing in your game might be to add some UI and for adding UI I want to use some very interesting Basics that you should know when you're using Android engine and some of those things are called a function Library so if you right click in the content browser and go to blueprint you'll see a blueprint function Library and what that does is it's a library of functions that you can use throughout your entire project so whether you are inside of the player controller class inside the game mode or inside some widgets for example you can always call those functions wherever you are throughout your project so they're very nice when you're making functions that have reusability or if you're using a utility type functions so I get into that a little bit later in this video I also make a little separate video about that yeah and I'm basically also here under blueprint we have something called a blueprint macro library and that's also very interesting so what I'm going to cover in this longer video is how to use these to your uh Advantage basically when spawning things such as UI and sharing data across your UI in a replicated Manner and then I'll also make some separate videos just for people that are just looking to see how these classes work and overall I will make more tutorials like that so let's get right into it before I do too much talking so the first thing right now is if we click play we will spawn the player so let's click play and Tada respawn the player and typically what you see is that you go here to your world settings and then inside of your game mode you have a player defined to spawn but that's what we skipped here basically because in multiplayer obviously you can die with your character or something like that so you just want to spawn the player with code now let's go on to the next thing and that is how to get your base user interface up so as many of you know you can right click and go to user interface and then go to widget Blueprints and I always like doing that in a separate phone folder so when you look at typical projects of mine this project contains many tutorials you will see a blueprint folder a map folder and a widgets folder so in here we're going to go right click and click on widgets and then we're going to click on user widget you can also select it over here and then we're gonna type the the shortcut for it so that's WB which stands for widget blueprint and then let's type in a core Hood so I want to have some core Hood basically and Hood stands for heads up display and inside of this widget we are simply going to put a little Crosshair right now so let's make this core Hood a canvas panel that way it covers the whole screen and then what we're going to do here is we are going to add a simple little Crosshair so for me an image will suffice and I will call this one over here Crosshair image um I'm going to Anchor it so hold Ctrl and shift to the middle and then we're gonna make it a size of five by five so that's five pixels by five pixels so it's just a little dot like this and it's a square Little Dot um this does not have to be a variable so let's click that out because we do not want to have a huge list of variables over here that are not necessary um so yeah we got that over there and now let's do something else let's make sure that we add a player name so we want to see the name of us as the player um so let's put that here in the top left corner let's make the phone a tiny bit smaller like 15. and let's give it some offset let's do 50 not 50 down like this and let's slice it to the content and then we're going to call this the username and we're going to make it a variable so we call it username underscore text and make this a variable so that we got it here in the list and what we can then do with it is that we can pull it and type off of it set text and then the bottom one is the one you need so this way we can now with code control the content of this text here basically this one so that's ready for us let's go ahead and spawn this UI into our game so what most of you that are kind of starting out with our engine will probably do is that you would in this case just spawn your widget here so typically what you guys will do is create a widget and then what you would type in here is or the one that you would select is the one that we just made so it's a core widget and then basically the owning player you would typically type or typically this is what you would actually do it would get player controller and then compile save and then you create a widget but then you want it to be viewed in the screen of course so this just makes it into existence in the level but then what you want to do is that you want to type adds to viewport to basically be able to see it and then what you guys would typically do is that you would just run this right off of a begin play and right now if we test this in a new editor Pi window you can also play selected viewport if that's what you prefer then you can basically sell it to one player with net mode Standalone and then if we hit play then we see over here that we now have a username in the top left and a dot in the middle the reason in the in the ground right now is because I'm not spawning the character so um let's make it a little secret so I hold s and click a sequence so I want to spawn my character and add my UI so let's hit play and there we go so now we see a Crosshair and we see a username so actually now that I think of it we're in a third person project here so I'm going to quickly delete that Crosshair we don't need it so let's just get rid of it but at least we see the username in the top left right now so we added some UI and now we want to have data in there but before we do that I want to basically do the correct setup of this so this is what you would probably typically do but what I recommend that you do is that you make a separate class instead of having all of your user interface here inside of your player controller promoting these with digits to variables and controlling them from here I recommend that what you do is that you put that widget stuff inside of what is called the hood class because that's there for a reason and it's easy to manage it from there so if you look at your at your game mode here you can do that by going to the world settings you would typically or you would you always see here the hood class and it's set to hit which is the default hit class that a game mode comes with so what I recommend is instead of managing your UI here inside of the player controller which is fine by the way I recommend just doing it in the class that it's supposed to be in so if you right click here then you can go to Blueprints and then you can type in HUD and then you will see this Hood class over here so if you select that then you can give it a name so I'm going to call mine BP hood and then let's just call it a base setup because that's what I call all of these classes these are my base setup classes if you want to be if you want to do it the same way that I actually do it in our own project so we we're making a game right now then what I call these types of classes is core so I always call it BP core game mode core game state core Hood so um so what are we gonna do inside of that hood class well we're gonna open it up and then first of all we're gonna assign it to the game modes over here we're gonna assign it now so all of these are my base classes I'm gonna hit save and then inside of here in the viewport you can set up all your UI here so let's do that first let's move the code from this player controller inside of here so we're gonna basically copy these two of these and delete it over here delete this sequence and just make sure that the player controller only spawns our character then inside of the hood we're gonna make our first heads up display here so our first UI part so right now this because this is assigned this will basically spawn my UI so if I click play we still see in the top left our username and this works in multiplayer as well important thing to know about the hood class just like any UI it only exists on the owning client so there's no replication going on in here it's just for you and for your offline computer to handle this class so how do you want to go about handling this stuff well I can show you guys how I do it in my game here so this is our game I can click on on play I mean first person I can walk around with my character just like this and as you see I got some UI because when I press I I got a little like inventory here to select clothing and when I press M I can do some hosting of games for example so how do I manage something like that well let's take a look actually so inside of the hood class here we can go to the event graph and the first thing that you see me doing is calling to focus my input on the game I always like doing that because in our game we want to just focus the input on the game actually and what is that handy for well as soon as you start inside of your level if you do that you can then have direct focus on the game without having to click the game first so what you sometimes see is if you click play here I have still my mouse here and then I need to click for the game to consume well if you install that part that you can have direct focus on the game then that's what you will have so let's go ahead and do that so in here we're gonna type set input mode game only with the owning player controller so in here in the player controller here you would typically type get player controller and then this is the player controller for you but inside of the hood class the way that you do it here inside of the hurt class is that you basically have to type get owning player controller so if you type in get player controller you this is the one that I recommend using here in the hood because this is the the local the owning player controller of this Hood class so this one is the one that we want to have it on this uh this widget that we create as initial widget and now what I also recommend doing is storing a variable to it because we might want to change stuff inside of this widget so always call your variable name just whatever your actual widget is so that you know what you are using basically so this one we want to add it to the viewports so let's do it like this so here we create it and here we add it and that's essentially it so this way we can now click on play and as you see I don't have a mouse because it immediately focuses my game and I have my hood and that's the way that I want my game to work now how do we communicate from our player controller to that hood class so let's say that we have a widget that we want to toggle then how can we do that well let me explain that so first of all let's make a little widget and this would be your typical panel it might be your inventory panel or or pass menu for example so what you would do is that you make another widget and let's call it inventory just as an example um and then inside of here we are going to have ourselves a canvas panel and inside of the canvas panel a little vertical box that I'm gonna wrap with a border so here's that little box of ours and then we're gonna make it a different color so let's make it something like this and we're gonna size it a little bit let's do like this and that's anchored to the middle of our screen and then a bit to the right here so this is our fake inventory panel inside of the vertical box let's put some text doesn't look the prettiest let's just call it inventory all right so um how can we basically toggle this panel well what you can do and what a lot of people do is that they would basically just call create widget again um so how do they remove it so they would typically get a reference to the widget that's currently on the screen and then to remove it they would type remove from parent but this way you basically create widgets all the time inside of unreal and then you each time you have to actually clear them that's not the most performant way of doing things so what I recommend doing is basically creating a widget that is standard set to collapse and then making it visible as soon as you need it so let me show you how that's done so um basically what we're gonna do off of here is that we're gonna type create widgets um and the widget that we want to create is our inventory widget and we want the owning player controller to be the owner of it and now we're gonna add a variable here again so we're gonna promote it to widget blueprint inventory um and then we're also directly going to add it to the viewport but now I want to talk about some separation here so inside of a game you typically have widgets that are game widgets and then you also have widgets that are game menu widgets and then you might have some actual widgets that are menus and in your typical game you would see widgets that are modals modals so let me explain what each of these is this is going to be quite a long video but there's interesting stuff in here so um basically game widgets that would specify something like your hit that's a widget that's inside of your game in that you would see in your hood you would see how much health you have you would typically see things such as um your uh your ammo account and if you're reloading things like that that game menu widgets I categorize those as things like an inventory manual a panel in which you can see your achievements for example a character panel um things like that that you that are menus inside of the game so actively using gameplay then we have menu widgets those are typically widgets that would be a main menu or some kind of a settings menu inside of the main menu maybe inside of your name and you have like server browser those types of things are menus so you're not inside of a gameplay level you're in the main menu level and you have different types of menus there and then we also have modals and modals are basically pop-ups and notifications so we have all these different types of widgets so I would specify your hood over here as a game widget basically so let's call this game and then over here we're gonna make things that are game menus so aim story we specified as a game menu well you might have multiple game menus so as an example in our game here um what is Hood well hood is this Crosshair right now and the chat that you see on the bottom left I have that as my hood basically we will also have some health in the in the near future but then what are game menus well this panel over here is a game menu because with this I can make my if story this panel over here is a game menu because with this I can basically host games here that's how we've implemented it and I can press escape and then have my pulse menu for the game so I have settings I have uh yeah things like that basic stuff and then I have some modals so if I click here on exit game we have a pop-up that says are you sure you want to quit or not with which we then quit the game um so yeah so so basically uh let's say that we have another game menu so let's create that real quick um with your blueprint and then call this one uh not inventory but call it mounts this is our mounts menu so actually I'm gonna duplicate this one because I want to use the same type of logic so we're gonna do with your blueprint mounts okay and then inside of here we're gonna put this border let's put let's put our mounts panel it would spawn over here and then this is called Mount boom mounts panel okay um so uh the first thing so what you do with this is that you see that we add the game menu as the first so only gameplay game and use first now what this does is that game menus all the way in the background it's in the in the first layer when you talk about something like a set index and then the additional widget if I would add this one to the viewport the second one it would be basically laid on top of this game menu on top of this game Hood layer basically so what I want to do is that I want to create these widgets and then add them to the viewport here after I add my hood so there is actually like an order to it like this a chronological order so right now we're also going to pop up this one create another widget basically and this widget is going to be our where is it our mounts widget and we're going to promote these two variable and call it widget blueprint mounts okay let's go and then what we can do is that we can add these widgets to what we can call an active widget list and then if we pop up the inventory panel panel we want that one to show but then if we want to click a button like M and then display Mount panel we might want that if story panel to remove and only that Mouse Mount panel to show so how would we go about something like that well we would make a little widget here called a widgets list and then we can promote this to a variable and call it user Widgets or sorry we promote it a variable called widget list and this is of the type widgets sorry what the type widgets and then it is also type user widget object reference and then we want to have this be an array so this array here will contain all of our game menus so I'm calling it widget list but you can also call it maybe a better name game menu widget list so as you see if I compile this this one is empty but now we're gonna add these guys to this list so the way that we do that is as soon as we create our inventory panel we're gonna get this array here and we're gonna say add and the one that we want to add to this array of game menus is our inventory boom so let's do it like this and then the second one that we want to add to this array is going to be our mounts panel so that's also widget that we want to use in our game so here we go mounts okay so after creating the inventory and the mounts we now have them both inside of this array of our widget lists so at the end when we're done actually creating them we haven't added them to the viewport yet then we can go ahead and add them to the viewport so the way that we can do that is that we can say hold f for for each Loop you can also type in you can right click anywhere right click and type in for each Loop there you go and now we're going to hook up this array of ours that contains those game menu widgets and each of them we want to Simply add them to the viewport so of course as you can understand what's going to happen right now is we get hit on top of that we will have then our inventory and on top of that we will have the amounts and they will get added in that order as well because we create them in that order so in the first index here is inventory second one is mounts so those two are of course in different positions because that's what you saw when I made them so if we hit play right now you see on the left Mouse panel and on the right an inventory panel um so why do I do it this way well we only want to toggle them because that's more performant than creating them and removing them from the parents so that's what I recommend doing that's what I actually do in our actual game title for Steam so um yeah but now you can see them obviously if you hit play so we need to fix that so the way to fix that is that you go into these classes so first you're going to do your inventory so how do you fix that how do you make sure that this one is not visible by default well you go into your graph here and then you go into class defaults then you scroll down a little bit and then you see the default visibility so that's the visibility for the whole widget currently it's set to not hit testables that means it's it's visible but you can't click it but we want it by default to be collapsed and we're going to do the same for our mounts panel so we're going to go to graph class defaults and by default we want this panel to be collapsed there we go and then we hit play and then currently you don't see them but performance wise they are already on the screen so they don't have to be created and removed all the time that saves a lot of performance all you have to do right now is collapse or make them visible and some of you might have to question well if it is collapsed does it run in the background does it still cost me a performance well the answer is no when widgets are collapsed it's essentially the same as that they are not in existence so if you have things that are ticking inside of a widget like that for example you can test that that way if you if you collapse them you will see that your tick doesn't run and I have that here in our game as well so if I click on M you see that this is a slider and it it goes like this so it has progress if I click this away that tick on that slider is basically disabled and then if I click M again it continues where it was because it basically it gets passed and it gets back again so it is very performant this way okay so how do we now get them to be visible or or not how do we go about that well basically we can now click these widgets away here because we don't need them at the moment we can all handle that in one simple manner here inside of this Hood class and then we want our player controller class to handle the input and we want to hit class to handle toggling them to visible or invisible so first of all let's make some inputs here inside of the player controller so we're gonna do keyboard and let's do I so when I press I find it where the heck is it here so the eye we wanted to pop up our in-story and then we want to do keyboard M and we want that to pop up our Mount panel to toggle it essentially so how do we go about this well I'll show you an example of how I did it in my own project basically as you see here I create game widgets so I add them to the viewport and then what I do is over here I create the menus here I use a sequence to create the menus instead of popping them all next to each other because the order of these doesn't matter because when I talk older one it switches out the other so when I press I it pops up this and M toggle style one away and pops up this as you see I also immediately got a mouse that is instantly focused on it and if I click away then Mouse is gone again so how do I do that well basically I made a function and I called it toggle widget so if we go here to toggling we see toggle widget as a function and what does that function do well it asks for a widget to focus on and then we validate that we actually input a valid widget and then we set that to be the current widget in Focus so if we look here at runtime category I have my widget list and I have my widget to focus so that's the first thing that we're going to set up here in this project as well so we're gonna have here an active widget and it's still of the user widget type but is not going to be an array so it's just going to be like this boom and then we're going to make that function so let's call it toggle widget we're gonna compile and save that now over here we want to pre-make an event that will will do this for us so we want to have a custom event that will toggle our inventory so let's just call it toggle inventory and we want a custom events that will toggle our Mount panel so let's call it total mounts like this um and then these events can basically be called from this player controller when we press this so how do we do that well we want to have a reference to our hit class so how do you get a reference to your herd class inside of your player controller you type in get hoods and here you go and then you can simply cast it to your BP Hood base setup so this is my hit class and then inside here we can then obviously call those events so we can call toggle inventory right now and this you could then basically attach here and have it run that but what you want to do is that you don't want to do too much too many casts that's not performant so you want to promote this to a variable and have this be your cast basically now as some of you might know casts can fill because when you click play the whole game needs to initialize and that works from in in hierarchy orders so first the level initializes well first your game instance initializes then your level then inside your level things like a game mode go first then a game State player State player controller and kind of in that order so it might be the case that your player controller is initialized but your hood class is not so then there's a couple things that you can do you could run a nice and sketchy delay note here and plug it in here and every time it fills you just delay and you go into it again and I'm gonna make a separate video on this little topic here as well but what I recommend doing is that you make something which is called a macro and that that macro does something until a specific timeout is hit so the way that we can do that is that we go here to Blueprints and we go to macron library and then you can make a library for each specific class that exists inside of the engine and you have to make them for all these specific class classes so unlike a function Library this one that you can use throughout any class inside of your whole project a macro library is class specific and you have to set one up for each class but it's still a lot easier than having to write this type of code inside of every individual class because what if you get parent classes and or child classes and stuff they need to do that stuff all over again so or not not in child classes necessarily because then you can use the parent class function of course but if you get other types of classes that are also of the player controller type that are not child classes you have to do it all again so for that purpose I recommend using macro libraries so over here we click on macro library and we're going to make one right now for the type player controller so we're going to click on it and then we're going to call it PML player controller so that's basically called bloop blueprint macro Library player controller if we open this up we see that this looks like your typical macro just like how in the player controller you can make functions and make a macro and then it looks like this so I'm gonna delete this again it looks exactly the same here inside of the blueprint macro Library so the macro that we're gonna make um is gonna check uh basically if if something is valid or not so I use this in our actual project here as well and you can see them over here so if I go here to my macro libraries you see I got a quite a bunch and this is a the typical function that I'm going to teach you right now to make that will verify if you have a valid cast or something or not with a timeout installed so let's click this away or actually I'm going to put this on my second screen so what do we need here first of all we need an execution pin and this function is going to check whether or not because we're going to use it here whether or not our Hood class is valid but we're going to use these types of functions for other classes soon too so I'm just going to make the first one now so this wall one we're just going to call it in because this is where we go inside of the macro and down here we're gonna install a float that will specify our timeout period and we're gonna set it if you click on here to a default timeout period of 10 seconds then what we're going to do is pop up a sequence so hold s and left click and we're gonna get that first class so we're gonna do get hit and then we're gonna do that cast to our BP Hood Base Class this cast is going to go in here and then two things can happen so first of all it can be a direct success in that case we want to return it and then we're gonna want to call it success and in case it's a success we also want to give it a reference but I'll do that in a little bit we also can have another outcome and that is that we fill that's the second outcome that we can have so let's add another pin of the execution type and call this failure or actually filled um so it can fill or it can have a success and if it has a success we also want to give it the reference of the class that we're trying to cast to um so if it is a field what do we do well we basically delay for not 0.2 seconds but for a whole second and we're gonna do that a couple of times until we hit that timeout period and why do we want to do this a couple of times well it's a bit sketchy to do it like this and to have this delay node here because let's say that your game rinsed this in a scenario and that it will always keep fading to cast to that specific cast or that specific class that you expected to cast to well let's say it will always keep fading you will have this leaking inside of your project basically you have this running inside of your project all the time without you understanding that that happens so this is dangerous that's why you want to use this technique here that I uh came up with myself actually as a very nice tactic to to solve these types of challenges so what we're going to do here is we're going to basically set the amount of times then we want to try this before we say never mind to the amount to the timeout time here so we're gonna do this end times and then when the counter is equal to the amount of times that we want to try it so let's make this like this and then we're gonna plug it in here now we're gonna do it like this let's add another Point here to the line look this one in here looks a bit better so basically we fill we wait a second we do it an amount of times at Max and that's standard set to 10 and then we're gonna check if if we basically hit 10 or not so if um the amount of times that we did it is already equal to 10 in that case we're going to say done with field because then we basically hit the timeout period so then we're not gonna try anymore we're not gonna go risk that we keep looping it like this but if it didn't hit the 10 yet then let's try it again so then basically you can plug this straight back into here um let's do it like this and then oh we're gonna get this line like this boom so if we didn't hit 10 we're gonna try to cast again and we're gonna try it for 10 seconds uh and then yeah if you want to call the macro Library again you can do that and then you can reset it like this so the reset will go into here so basically once you call this macro once it goes into the loop boom boom boom it either successes or fills and if you call the macro from anywhere else in the blueprint then that is a separate macro of its own and that will reset this and and we'll try it again essentially so this new macro here let's call it get and then the name of what are Hood classes so in this case BP hoods oh it's a base setup it's what it is so now we got one Global macro and we can call this in any player controller class inside of the blueprint net so now we can replace this what I call trash with uh this new get uh BP Hood based setup class and look how beautiful this looks so when the player controller starts we're basically get the beautiful function and if it's successes we're gonna store that reference of the hood class now that we have that reference of the hood class we can simple simply draw it out here and then we can call those events on it and we know that this is already a valid variable so we do not have to convert it to a validate it for example we also do not have to type is valid like this no we already did that with our beautiful macro over here so now you can call here Togo inventory just like this and that's all the code you will see inside of your nice player controller class and then over here we can oh shoot over here we can then call Google mounts plug this in line it up just like that so that's what this will do and then here we can print so we can say local inventory and here we can say toggle mounts right so now if we hit play I hit I we see it prints don't go in we hit M toggle Mount very nice logic now let's actually make it so that it toggles the actual widgets so for that we have a widget here to toggle and then we're going to put a reference inside of here so here we're gonna make it of the widget type again the user widget type so type in widgets go down to use your widget boom and then this is our our Target widget so that's the widget that we want to toggle so essentially we're gonna call this when we want to do the inventory one and then the widget that we want to toggle is this one and then we're gonna do the same when we want to do the mount one and then the widget that we want to Target is that Mount widget this one and then inside of here we're gonna write some logic so first of all we're gonna see if we actually properly hooked up a widget to this let's say we accidentally call this somewhere without a Target and it's going to be invalid so the first thing I'm gonna do is is valid um just to make sure and once we called that we're going to set that active widget that we made so it's just a reference here a variable that contains the target widgets to be the active widget so this is the one we want to show basically um and then then what we're going to do is that we want the one panel to remove the other panel in this example that I'm showing you so we're gonna get our game menus hit F left click together for each Loop and we're gonna Loop through all of these so first of all we're gonna check if every widget in here is valid so for the first one because that's the one that comes out now it's just how I explain my examples we're gonna check if this one let's reroute it if it is equal to the one that is already in Focus basically so this is the active widgets let's rename this actually to the widgets to focus widget to focus so let's see if the toggle is equal to the widgets that is currently in focus just like this and then we're gonna say well if it is active to the one that we are going to focus that we that that is in Focus right now then we can basically conclude that it is already in the screen and that we want to remove it if it is not already in the screen then we can make it be in the screen so there's a couple of different logic things that we're going to do right now first thing we're going to check is is the widget that we find is it visible so is visible just like this and then we're gonna say off of the false here so if this is a a widget that is not currently in Focus but it is visible that means it's uh let's say that the mount panel is currently active so that's the one that's in my screen that's not the one that I want to focus because I clicked on inventory then the first thing that we can conclude is that we want to basically collapse that we want to make that current Mount panel invisible so that's what this little logic here is going to do so that mount panel that comes through here as an example we're gonna set the visibility on it and we're gonna make it be collapsed in the scenario that is visible so if it is visible we want to collapse it just like this and in the scenario that it is uh equal to the current widget so if if my inventory is already in the screen and I click the inventory button again that means that the which that means that I did this event again while this widget was already visible then we're going to toggle that widget so basically um uh yeah I'll show you that right now so we're gonna get that widget that is currently in our Focus we're gonna see if it is visible because it can also be not visible now we're gonna do two things let's do it like this so if it is feasible we want to collapse it because then we press I again and we're already seeing if sorry now we want to collapse same story so basically what that means is that we then want to focus back on our game so we have a function called Focus game that we do here or otherwise we want to basically Focus that widgets because then we're trying because if wait I hope I explained this right to you guys so uh that you understand what I mean so if that widget that we want to focus is not in Focus yet so let's say I have zero widgets in my viewport and I want I click this for the first time it means that the widget to focus is currently not visible then we want to focus that widget so let's make a little function called Focus widget and we do that in this scenario so now we have three uh three functions here toggle widget Focus game Focus widget um the focus the widget let's do that one first so basically the way that we do that is that we get the widget that we aim to focus for example my inv story and first of all we want to toggle that visibility because remember by default we set these guys to be collapsed and now we want them to be visible well to set one to visible you don't click on visible because then you can actually click it and you don't want to click all the parts of the widget so the standard visible method is not hit testable so only that one makes it visible and then the next thing that we're gonna do is that we want to instantly have our UI Focus that widget so the way that we do that is that we get our owning player controller of this Hood class and now we're gonna type in set input mode and we want our import mode to be on the game and on the UI and the player controller that we want to do this with is owning player controller of this hood and then the widget that we want to focus you guessed it is this widget then we do not want to lock the mouse and we do want a high-tech Mouse during capture that looks nicer and now what we also want is once we pop up an inventory panel we obviously want to see our Mouse so out of here we're gonna type set show mouse cursor and we're gonna set this to be true well let me check the recording times already 45 minutes but it's a it's a nice tutorial so I'm just gonna keep doing it so this is what we want to do when we focus the widget then let's say that that widget's already visible and want to focus the game again then we're going to go into that scenario so how does that look uh like basically what does how does that work well then we're gonna get that widget to focus and we're gonna say then reset its visibility essentially so set visibility to collapsed so we want to have this one gone again um and then what we do once we set it to collapse is that we get our owning player controller again and in this case we want to set the input modes to game only we want to focus back on our game once that inventory panel is out of the screen and then we also want to hide that mouse cursor again so what do we do right now let's do a quick little recap we have created these widgets we added them to the viewport all of them just like this boom and then we have these events installed inside of this Hood class we got one little function here toggle widget it asks for a Target widget that we want to show so in-story or mount uh and then basically we looked through it if the widget is the first widget that has found inside of the list is valid so that means that we we actually created it here then what we're going to do is that we basically say is it equal to widget that we want to focus if that's not true then we're going to check if the widget that we found is is visible if it is visible then it means there's just a visible widget in our screen that we want to get rid of basically because the only one we want visible is to which to focus so all other widgets fonts will be set to Invisible if they are visible and then the widget to focus if if the widget that we're trying to toggle is the widget that we are trying to focus then we're gonna see if that one is already visible if it is we're gonna Focus back on our game so we're gonna set that one to be called apps to focus back on our game and if it is uh not visible yet that widget that we're trying to focus then we're gonna make that widget visible and set our focus and our Mouse to it so let's go ahead and test this noise system so we can walk around I can press I I get my mouse and we got the inventory panel here I can then press I again to get it away get my focus directly back on the game remove that Mouse I can also press M to get my Mount panel I can directly click it and get it away and I can click I to have an usury panel and then if I click M it replaces theme story panel with the mounts panel and that's a beautiful setup now of course you can use this for something like a pause menu and stuff like that right so that's how I do it in my game and this is a beautiful example for you guys to understand how to handle this type of stuff I think this is actually becoming a rather large video so I'm gonna quit it here and call this video something like how to create widgets in an efficient way in our engine I hope you guys enjoyed this video in the next video I'm gonna explain to you guys how you can actually set data in these widgets so we're gonna extend this uh stuff like the blueprint macro library to also verify our player State and then once the player state is verified we can then basically have the widgets safely set in for information on themselves so if we have something like this core widget with a username we want it to set that username to the player name and we're not just gonna cast here on the construct to that player State and have the cached fill now we're gonna make a beautiful widget blueprint macro library and once it's verified that that a a class exists such as for example the player State class at that point we're gonna then initialize this with widget to set its username so let's talk about that in the next video I hope you guys like this give it a like And subscribe also check out our patreon and our Marketplace products we make great products if you guys are new to our engine or are trying to learn our engine you can check it out here Link in the description all these games are top tier they're all made with the with the best blueprint practices and stuff all multiplayer ready as well so uh yeah I appreciate it okay bye guys see you in the next video [Music] foreign

Channel: Kekdot

Views: 83,672

Keywords: Blueprints, Unreal Engine 5, Unreal Engine 4, Steam, Multiplayer, Game, Marketplace, Game development, Unreal Engine, UE, Multiplayer game, Tutorial, Online, Multiplayer Unreal, Replication, MMO, Game Engine, Devlog, Dedicated Server, Game dev, Learning, Vlog, Video games, make games, Unity, HUD, Widgets, HUD class, Create widgets, Manage widgets, Macro Library, User Interface, UI, Handling, Interfaces, Sessions, Advanced Sessions, UE5

Id: 7b7a20j0azc

Length: 47min 21sec (2841 seconds)

Published: Sun Jan 01 2023