How To Build MENUS AND UI In UE5 | Unreal Engine 5 Beginner Tutorial

[Music] hey what's up creators in this video we're going to be going over an introduction to creating user interfaces inside of unreal engine 5. by the end of this video you will have created a simple main menu with buttons which can be hovered load up the game or exit the game you'll also learn to create a player health bar where we're going to be showing a variable binded onto the screen where we can see the health in the top left hand corner we'll break down how unreal motion graphics work and how we can import custom graphics for things like buttons and images we'll also show you how to tie common blueprint functionality to buttons so you can get started on your journey to creating bespoke user interfaces in unreal engine if you haven't seen my blueprint introduction video already i definitely advise you go ahead and check it out as it's going to allow you to take your unreal engine blueprint skills to the next level ready to apply to your user interfaces just before we get into our video we have a quick message from our sponsor zenslabs this graphics tablet offers a refreshing drawing experience with their 16x9 display it's highly customizable and allows artists to take a more natural approach to digital artwork if you're creating 2d artwork whether that be user interfaces or concept art this graphics tablet will very quickly speed up the process features include a programmable control button bluetooth cableless design multiple pens and more elevate your artwork today go ahead and check out zenslabs in the links in the description and if you want to pick one up use our coupon code for 10 pounds off during july for the prime day sales okay so the very first thing we're going to do as part of this is create a very simple blueprint project you're more than welcome to use your own project if you want to but for now please do use a blueprint project for me i'm just going to use one of the games and the third person and i'm just going to give this a name ui demo and then once i've done that i'm going to go ahead and press create while that's loading go ahead and make sure you download the ui kit that i've provided in the link in the description for you to use in this video okay now that we're inside of unreal engine let's go ahead and introduce you to the unreal motion graphics editor this is where we're going to be doing all of the magic for creating user interfaces inside of unreal engine we're going to be accessing this by creating what is called a user interface widget we can do this by going into our content browser right clicking going to user interface and creating a widget blueprint we're then just going to be creating a blueprint with the type user widget and we're going to give this a name now the first type of ui you might want to make is something like a menu so i'm actually going to be using this for the menu sample that we're going to be getting into later so i'm going to be giving this a name wb for widget blueprint underscore main menu once i've done that i can double click on this to open it up and it's going to take us into the umg interface and it's really straightforward so what i want to do is very quickly just break this down to help you understand the different elements the widget blueprint comes in two parts we have got the design view which we can see here currently and then we've also got the graph view which is going to allow us to see all of the blueprints that are actually driving this user interface and you can switch between these in the top right hand corner here by going between design view and graph view starting off with our design view then this is where we're going to be doing all of the visual aspects of our user interface we have got our viewport in the middle section here and within this we can start seeing things like our buttons and images and text and stuff like that and we can place them in this viewport but to actually place these we need to go over to the palette in the top left hand corner here and you can see underneath common we've actually got a whole bunch of different things we can place in here such as buttons images text and so on and if i just go ahead and drag something like a piece of text into this you can see we've now got that real view of what we're going to be working with now i'm just going to press delete on that just to go back to where we was before we do any editing we need to add a canvas panel into this to add that we go to our palette we search for a canvas panel and drag it in and this just gives us a canvas that we can start creating our ui on from there we can then go back into this palette and we can start taking things like buttons images etc so let's say i want some text i can now drag it anywhere i want in that canvas i can take images and i can do the same thing and what you're going to notice just like anything else in unreal engine if you click on it you're then going to be able to see the properties for that object in the details panel on the right hand side here so with the text that would be changing things like the font color the font size or the text itself with the image that would be things like setting a texture as the image so we can actually have real images that we've created put onto our user interface umg really is that straightforward and as we go through this video what we're going to be doing is creating different elements texts buttons progress bars and you're going to be able to familiarize yourself with how you can stylize them how you can set up the functionality and any blueprints that goes with it so what i want you to do for now just before we move on to the next section is i just want you to create a couple of buttons and then just get comfortable with sizing these up and placing them in our scene once we've done that what we're also going to be doing is very simply just taking some text and we're going to be placing it at the top here and just as a very useful exercise we're just going to select this text go to where it says text on the right hand side of the details and we're just going to set this to main menu if you want to you can then start playing around with things like the font size and the details or the fonts or even how thick this is lots and lots of settings for all of these what we're going to be moving on to in just a second is how we can display our user interfaces onto the screen and then we're going to be going through a couple of demos where we're going to be stylizing our user interface okay so we've created a very simple user interface widget here we haven't stylized it or anything like that but what we need to move on to now is actually getting it displayed on the player's screen so you can interact with it right now if i go ahead and press play you can see i can walk around and we've got no user interface whatsoever here we can create this widget and load it onto the memory using blueprints and we can do this in pretty much any blueprint actor that we like that could be the main menu that could be the character that could be the level blueprint it could be absolutely anywhere if you'd like to learn a little bit about blueprints and the different places you can do that be sure to go ahead and check out my blueprints video the link for that is in the description moving on from there what we're going to be doing is we're simply going to be opening up the level blueprint and we're going to be loading up this widget into the memory on our level blueprint so go to this little icon here open level blueprint and then inside of here what we're going to do is we're going to be using a node called create widget and what this is going to do is simply take a widget class and load it onto the memory it's not going to do anything else so we can set the widget class by clicking the little drop-down selection here and choosing wb underscore main menu we also need a event to actually trigger this and what we're going to be doing is just using the event begin play you could do all sorts of stuff such as um box collisions overlap events keyboard inputs absolutely anything the one we're going to be working with though is this begin play so what's happening here is when the player begins playing it is going to load wb underscore main menu onto the memory but what we also now need to do is actually display it on the screen to do this drag out from the return value and type in and search for add to viewport and what this is going to do is it is going to add this to the game's viewport and fill the entire screen if i go ahead and press compile now and then minimize this and press play we can see we've got our user interface being displayed on the screen it's as simple as that and the process is exactly the same for heads-up displays menus or any kind of ui widgets now with this being said you can see right now i can't actually click any of these buttons because i don't have a cursor displaying that is also easy all we need to do is in that level blueprint where we just created this widget what we need to do is get a reference to the player controller which controls all of the player information and with this we're going to drag out from the return value and we're going to set show mouse cursor to true and then if we connect this up to our execution line here what it's going to do is it's going to show that mouse cursor as we trigger this node and now if we go ahead and press play we can see our mouse and we can hover over all of these buttons and we can click them and interact with them just like that now there is going to be an element of us needing to go back to the game at some points which we will cover later on but that is how we can display our user interfaces on the screen with heads-up displays for player health and scores and that kind of stuff that mouse cursor option is entirely optional now let's go ahead and move on to the next section where we're going to be showing you how you can take images for our buttons and backgrounds and actually bring them into unreal engine and set up our main menu okay so let's go ahead and show you how we can stylize this main menu and then in just a moment we're going to be moving on to showing you how you can set up some of the functionality for getting buttons to load particular levels exit the game and do all of that kind of stuff in the link in the description i have included a bunch of ui elements that you can use for stylizing this just for educational purposes and inside of here i've got things like a background i've got a health bar i've got some buttons and we're going to be bringing all of these into unreal engine if you have your own assets you're more than welcome to use that taking these assets into unreal engine is really straightforward all we need to do is in our content browser we're going to right click and add a new folder and i'm just going to give this the name ui underscore assets can import all of these assets by simply selecting all of them dragging and dropping them in there unreal engine is really straightforward when it comes to importing these assets now with that being said there is a couple of things that you need to do ahead of time first things first there is a particular set of file formats that unreal engine works with for ui the best of which is png as it allows you to have that transparency so you can cut out things like the edges so you're not relying onto the white backgrounds in the background in terms of resolution you don't need to worry about going to the power of two or anything like that make these high resolution and make sure they come in and we can work with them now of course with unreal engine you don't want to make these assets like 8k 10k 12k or anything like that because they're just not going to be able to be seen but if you do build them with sort of 4k uh monitors in mind or 4k resolution of the whole menu then you're gonna have plenty of quality so we know how to bring these assets in now let's go ahead and bring those into our widget so double click on this to open it up let's start off with the background to do this we're going to go ahead and take an image and we're going to drag and drop it into our scene now to assign the image to this image what we're going to do is go down to details appearance brush and image and inside of here what we can do is we can actually go to our content browser select a particular image and then press use selected asset from content browser and what this is going to allow us to do is set that image and now we can rescale this resize it and we can change how this is going to look now a couple of settings you might want to change the first one is your anchor point your anchor point is where this is going to be moving relative to if we always want this in the center of the screen we're probably going to go up to the top where our anchors is and set our anchor to the center just like that and now it's always going to move to the center and we're going to be doing this with all of our assets if you want something to be relative to the side anchor it to the side really straight forwards so we've anchored this background but now what you're seeing is everything is actually underneath this and that's where we need to set something called the z order the z order is over here and we can set this to a value like -1 and what this is going to do is change the order in which our objects in this user interface widget are actually rendered onto the screen higher numbers being rendered last and therefore appearing on top so what i can do now is i can actually take this background and i can place it behind my menu there if i hit compile and then play we can see we have got this and what you're also going to notice is this background perfectly centered because we anchored it but all of these buttons in the middle here they are not because we didn't actually anchor those and that's why anchoring is so important i'm going to delete a couple of these buttons and just anchor this first one here and i'm also going to anchor the text and i'm going to press compile press play and you can now see that it's going to be dead on the center and no matter what the resolution is of the viewport or the player's screen it's always going to be in the center exactly where we want it to be so that's how we can bring images in let's go ahead and take a look at how we can stylize this button now to do this we're going to click on our button and again details and then style inside of here we've got styling for normal hovered pressed and disabled the ones that we really need to look at is our normal hovered and pressed so if i go ahead and expand my normal i can actually put an image into this for our normal state so with this what i can do is i can select my button underscore normal here and i can press to use selected asset for this and you can see now our button now looks correct what you might want to do is if you have any kind of tint you can go ahead and remove this by setting the tint value to one one and one and now it's exactly as it should be and also make sure your draw as is set to an image as well because that's exactly what it is so now what we have is a button here that looks the way it should do if we go ahead and press play we can see we've got that when we hover over this the image for our hovered state is still the default unreal engine button so we need to go in and we need to set that too so go to your button go to your hovered state and we're just going to be using that same button or in our case where we have a different image we can set this to button underscore hovered and then we just set our draw as to an image press compile press play and you can see now it's looking exactly as it should and the last thing we need to do is change how it looks when it presses and what we're going to be doing is the same thing we're just going to go to pressed and then this one we're going to set this to our button normal and again just remove any kind of tint by just setting your tint value to 1 one one and one there and if you had a tin on your hovered just do the same thing just remove any kind of tint so that way it just switches between the images exactly as it should and what you should end up with is something that looks like this if you're getting that little white outline there that is because our image is drawing as a rounded box and i believe that was in my press state so set that to image hit compile hit play and now we're good to go there we've got a button looking the way that it should so the last thing we're going to do with our button is we're actually going to put some text in it and then once we've got the text in there we can actually just start duplicating this button to do that we just take our text drag it into our button and you're going to see it's going to snap in there and what i can do now is i can actually take this text i can go to the details where it says text and i can set this to anything i like i'm going to set the first one the content for the text to be play and i can adjust the size to anything i like i'm going to set this to a nice solid 30 and then if i wanted to i can even change the color so what i'm going to do is i'm actually going to take the color of the background here so it kind of blends in a little bit or or this piece even and it's just that simple to change this so now we've got a button we've got text and we're good to go we can do the same thing with our main menu text up here too we could also change the color of that we can then change the font we can change this to be a bold instead of being light and we can just adjust all of these settings here so have a little play around with all of these different settings there's so many you've got everything from your justification your font size your font color all of this is available here and again make sure that everything is anchored if our text is parented to our button here we won't need to anchor it as it's just going to take the anchor from that but what you should have now is if we go ahead and press play we should have our main menu text there we should have our button text there and everything is looking really really nice what we're going to do just before we move on to the next section is we're just going to take this button and we are going to select it press ctrl c to copy it and then ctrl v to paste it and we're going to do that a couple of times there so we have three buttons we've got one button that says about we've got one button that says exit and when we move on to the functionality side of this in just a moment we're gonna have it so your exit button actually closes the game and our play button loads another level so go ahead and hit compile on this press play make sure it's all working and what you should end up with is going to look like this let's go ahead and move on to the next section in this next section we're going to be taking our stylized and customized user interface and we're going to be showing you how you can add the functionality to load a level when we press the play button and we're going to show you how to quit the game when you press this exit button as for the about button we're also going to be showing you how you can load up another user interface widget to display another page if that's something that we wanted to do so let's go ahead and start from the bottom with the exit button the functionality for this could not be simpler what we're going to do is select this exit button and what we can do is we can create an event for when we click on this so when the player clicks on this button we're essentially just going to be triggering some blueprint code really straightforward stuff to do this if you go ahead and press this button press unclicked in the details at the bottom and press the little plus icon this is then going to take us into our graph view and more specifically it has created this node which is called when the button is clicked if we drag out from this we can execute any blueprint code in this instance we're going to be executing the code which does quit game and we can find this underneath game and what this is going to do if we have this connected and i press compile and play we can see if i press that it then quits the game completely and closes it so if this is on pc it's going to close it even if it's sort of a packaged build that is all we need this button to do so that is the exit button really straightforward let's go ahead and take a look at the play button we're going to be doing the same thing where we take this and we're going to create an on clicked event but this time what we're going to be doing is searching for a function called open level by name and this is going to open up a second level within your unreal engine project and we can set this by simply typing in the name for this so what i'm going to do is i'm going to go ahead and create a brand new level here of the basic type and then i'm going to save this current level as and i'm just going to give this the name level 2 and then i can save that if i was to go ahead and open up the level i was in before which was this one here my third person example map there is no functionality right now because we've not put that level in there but if we go into this we can set the level name to exactly what we just created there we could set this to level two and this is case sensitive so do keep that in mind but if we go ahead and press compile and play now if we press the play button it loads up that next level so if you have multiple levels it could not be simpler to load those up from a button on the user interface and hopefully you should start to see how we can start adding any blueprints we want into this user interface on the event of a button it's really straightforward so we've done that let's go ahead and take a look at how we can open up another widget blueprint we're going to do this in the exact same way that we did before now there is other ways we can do this such as a widget switcher but if you wanted to do it a simple way with some simple code we can go ahead and press on clicked and for this one what we could do is we could create a widget again and then we could add this to the viewport and this could be anything you like i don't have any of anything else in here so if you do create one by all means you can go ahead and set that up what we also want to do is remove from parent the current widget which is the one that's open so just leave that to self and what that's going to do is create the new widget load that new widget onto the viewport and then remove the one that was here before really simple and really straight forward i'm gonna remove this code as we don't have an extra widget blueprint that we can work with but for now we have got our functionality for this coding functionality for user interface and blueprints and unreal engine could not be simpler let's go ahead and move on to the next section now where we're going to be taking a look at a player heads-up display in this last section we're going to be showing you how we can set up a player heads up display where we're going to be showing the health on the player's screen and this health is going to be coming from a variable within the player blueprint and we're going to be showing you how to show this as a progress bar and how you can show it as a text value so with that being said what we're going to do is we are going to go ahead and create a brand new widget blueprint just using the same type as before and we're going to call this wb underscore hud this is our heads-up display then inside of here we're going to be adding in what's called a progress bar progress bar is just going to allow us to fade between two different images depending on the value of a variable those images being a filled version of the bar and the other image being an empty version of the bar really straightforward and with this bar selected if i go to the details and then progress and then go from left to right you can see we are doing just that this is how our health bars work and if we go to style we can see we can have a background image and we can also have a fill image as well so let's go ahead and take this and start stylizing the background and the fill for our image to do this we are going to go to our assets where we imported our bars and we can see we've got health bar underscore background and health bar underscore fill let's start off with the background select that go to our background image and we're going to use selected asset from the content browser we're then going to make sure this is being drawn as an image and then if there is a margin go ahead and remove that you shouldn't really have that in there we're then going to do the same thing with our fill so select our health bar underscore fill in the content browser and press use selected asset under our fill image and again make sure we render this as an image and nothing else and what we can see now if i take this percentage and move it from left to right it's going between two images albeit we do have this ugly blue tint so go down to your appearance fill color and opacity and just set the values on all of these to one and what we have now when we take this percentage and move it from left to right you can see we've got the red version we've got the empty version and we can just go down just like that so progress bar really easy to customize just two options and if we wanted to you can also change the way it feels so left to right right to left and so on for us it's left to right what we're going to do then is we're now going to take this health bar and we're going to display it on the screen the way we're going to do that is in the exact same way that we did with our main menu we are just going to when we begin play we are going to create a widget and it's probably better to do this within the player blueprint but i'm just doing it from here just for ease of use right now and set this to wb underscore hud which is what we just created and then add this to the viewport once we've done that go ahead and hit compile hit play we can now see we've got our health bar in the top left hand corner but right now it's not tied to any kind of value or variable or anything like that that's where we need to set up our logic for this we need to set up our variable so what we're going to do now that we have this displayed on the screen we're going to open up the character blueprint and create a variable for our health so that's the stylizing out of the way let's navigate to our third person character or any character blueprint that you have for me this is content third person blueprints and then bp underscore third person character inside of here i'm just going to add a very simple variable called health and with this i'm going to be giving this the variable type float and then i'm going to press compile with the default value being one one being a hundred percent of the bar being full zero being absolutely nothing and what we can do from that if we create any kind of gameplay system later on we can just get this number to reduce and this is our health going down so we've got our health variable there within our character let's go ahead and open up our heads up display that we created and actually get these two to communicate now the way we're going to do this is by opening up that widget blueprint again we're going to select our bar and just like we did to test it earlier to get that percentage to move from left to right we are going to be creating a binding which is going to automatically update this value depending on the variable of something else so i'm going to create a binding for this percentage and we are going to need to communicate to our character and the way we're going to be doing this is by casting to our third person character so cast two bp underscore third person character and then what we can do is as our third person character we can get the value of that variable so we can search for health that's what we called it so we get our health and we put this into our return value with our objects you can see this is empty this is just the type of object so for me because this is a character we just type in get player character and with this what this is going to do now is it's going to constantly update the value of that progress bar to be equal to health there really really straightforward stuff there is a lot more that we can do for values that aren't going between zero to one but for that i definitely advise you go ahead and check out my blueprint courses and my seven day game creator program what we're gonna do is go ahead and press compile and press play and what we're gonna see straight away the health is currently set to one so the bar is completely full if i go into my third person character here set my health to 0.5 and press compile my health is going to go down to 50 percent and you can see that reflected on the bar there so there is a lot that we can do a lot of programming and blueprints to learn but that should be a really good intro as to how you can set up some very simple blueprints for our progress bar the last thing i'm going to do is within this heads-up display i'm just going to show you how to get that value that variable be displayed as text instead of a progress bar and it works very very similar in terms of the way that that works i'm going to add a text component and i'm going to drag it in just below my bar here and then for the content i can just create a binding so create binding that just does what we did there cast two third person character and as that third person character we can get the health and then change that from a float to text which can be displayed as text and then object get player character because that's the type hit compile and then hit play and just like that we can see we've now got that value we've got 0.5 of our health there there's lots more that we can do with this i have got a dedicated video that shows you how to set up a proper player health system i hope you have enjoyed this introduction to creating user interfaces in unreal engine 5. there is a whole lot more to learn but by now you should be on your way to creating interfaces using buttons images and other common components in there i'm really interested in seeing what you guys are able to create if you'd like to learn more about blueprints and user interfaces inside of unreal engine 5 be sure to subscribe for free weekly training just like this also check out our website and sign up for notification on our upcoming game creators course if you have any more questions related to unreal motion graphics or just unreal engine 5 in general be sure to go ahead and join our discord server with thousands of like-minded developers just like yourself if you'd like to support the channel and unlock exclusive perks such as early access to our videos live group mentoring and easy to use templates for your own projects be sure to go ahead and check us out on patreon the links for which are in the description down below for now though that's everything stay awesome keep creating vertus signing out

Channel: Virtus Learning Hub

Views: 88,287

Keywords: virtus creative hub, virtus learning hub, unreal engine tutorial, unreal engine 5, virtus education, unreal engine 5 beginner, unreal engine 5 tutorial, unreal engine 5 beginner tutorial, unreal engine, building user interfaces for unreal engine, ui design, building user interfaces unreal engine 5, user interface design unreal engine, user interface unreal engine 5, main menu in unreal engine 5, ui design tutorial for beginners, ue5 beginner tutorial, ue5, ue5 tutorial, tutorial

Id: 198AMGtdo-E

Length: 35min 39sec (2139 seconds)

Published: Fri Jul 08 2022