Welcome back everybody in this series of videos we are going to set out to create our HUD and some menu screens, we're not going to make them fully functional yet just simply create some layouts for a HUD and some menu screens. And that means we need to turn our attention to something called Widget Blueprints inside of Unreal Engine four. Now the goal of this initial video is just to give you an idea of what Widget Blueprints are, what they are used for, and to give you a brief overview of the different areas of the Widget Blueprint Interface. So with that, let's come under a new folder. By that I mean our content first project UI folder, which is currently empty, and right click in some empty space. And in your right click menu, you want to find the user interface option.

It is usually at the very bottom here, and in your flyout menu, you can find that widget button blueprint asset type that I was just talking about. Let's name this w BP short for Widget Blueprint underscore overview. Double click on this guy document across the top, and let's see what we've got. Firstly, I'd like to point out the two tabs over in the right hand portion of our interface. We've got a Designer tab, which we are currently on, as well as a Graph tab, which we will explore in just a moment here. The Designer tab This is where you can lay out an interface such as your HUD or menu screens, and the bounds in which this is done within is currently indicated by either this dashed line right here or if I'm within those bounds, that blue line, the Graph tab.

This is where any scripting elements take place for your menu screen or your HUD things What Well, maybe over in your Designer tab, you know, you're creating a main menu and you've got a start button. Well, something is meant to happen if you click on that start button right, that functionality that script lives over in the Graph tab. Let's quickly discuss how we can navigate our way around the Designer tab here. Firstly, your scroll wheel will zoom you in and out of your view here. right mouse button will pan your view around left mouse button will select widgets to move them around your intended screen size here we'll talk about screen sizes in just a moment. To help demonstrate this I'm going to bring on a widget over here from my pallet panel.

This over here the pallet panels where you can find all your widgets and I'm going to bring on a common one by left clicking and dragging in a button. And you can see how I can simply use just left click on it and move it around as I see fit wherever I want it to go. onto my screen. Other things to know here is up in the upper right hand portion of your viewport you can set your intended screen size by default, we are set to a screen size of 1280 by 720, that is 16 by nine as indicated right down here in the lower left. However, we all know games are made for different platforms. You can choose your intended screen size here to be an apple iphone, a tablet of sorts, a laptop, a monitor any of these different television dimensions as well, so that when you're laying out your screen or your HUD, you are actually designing it for the actual dimensions of that target platform that is super handy to know about.

Another good button to know about up here is this zoom to fit button. If you ever find yourself where you're just like man, I just want to get back front and center and have that whole story. In view, you can just click on this and that'll just bring you right back front and center. I like that one a lot. You also have some snap settings here for when you are moving widgets around your layout here. Currently, I have this button placed on what is known as my canvas panel, and it is add to this position of X 848 and position y of 612.

Notice that if I was to move it right or left, it is moving in increments of four look carefully at this position x button right over there. And the reason it's moving in increments of four is because up here I have it set to move in increments of four four to me is a weird number. I prefer either 510 or one. So if you want to move it in increments of 10 set it to be 10 right there and then when you're moving it left or right by simply using those arrow keys, it will move With in increments of 10. Of course, you can just punch in some values over here as well. And that will set it as well.

So as you saw me do earlier, I currently have a button widget out here in my canvas panel. Other ones that I really like are the text widget. That is this guy right here. This allows you to put some text out onto your screen. The image widget super useful. You can have this fill up your whole screen and I know this is just a white box right now.

But over in the Details panel, you can actually slot in a background image of sorts if you want image of a character. You can make it actually pretty and not this white box. Progress Bar. This is super useful for things such as meters. Again, this just looks like a gray box, but it actually can fill up like so to indicate things like health. We will be using that later.

Horizontal Box and I always have trouble Finding this you can search for it up here, Horizontal Box. This is a container of sorts. And what you can do with this particular widget which looks empty is you can drop things inside of it such as text, you can drop one bit of text in here and another bit of text in here. And you could have one of these reads something like score. And the other one of these to read whatever your score value is, and these can be driven by variables. So there is a horizontal widget which is a great for formatting container of sorts.

And of course, if there is a Horizontal Box, there is also a vertical box and I will search for that appear in my palette tab. And this would function very similar to the Horizontal Box only, instead of say, my tech We're going left to left to right, it would go up and down. And it doesn't have to be text, it could be a button. And then it could be some text and then it could be an image, just a way to organize your widgets. Now if you were paying really close attention while I was dragging these widgets from my palette, onto my canvas panel here, I've also been populating something known as my hierarchy tab over on the left hand side here, and this shows the relationship of all the widgets to one another. And you can see here with something like my Horizontal Box, I've got things contained with inside of it, such as a couple of these text widgets.

Let me just delete all these out really quick by selecting them and deleting them to show you a few things related to the hierarchy over here. Now you've seen me make it so that I simply can drag and drop a button onto my canvas panel area right here and you can see that button populates down here in the hierarchy. But I can also do this by just simply drag and drop my button directly down into my hierarchy. Now all things get added to this thing known as the canvas panel, which is kind of like your blank background here. And so now you can see I've got a button option here. And it's just got this weird default name, I can name it something like my button, it cetera.

But I can also put something inside of it right, so I'm just gonna make my buttons super big here. I'm going to drag and drop this text widget. on top. You see how there's a yellow outline around the my button widget on top of it like this. And so now, my text block is attached to my button. So with this text block widget, I can simply come over to the Details panel.

Don't change the text, this text right here to say, my button, like so maybe I'll change that to I don't know a black color to make it a little bit more legible like so. And so now if I move my button around, the text comes along with it because that text is attached. Now if I want to detach that text, all we need to do here is in the hierarchy, I could select my button the text, you can see how it's highlighted here as well. Left click and drag it back on top of my button like so. And that will just attach it like that. Now you can lock and unlock objects as well.

So if I lock my button here, that is this guy. Now I've just made it so I cannot select it, nor can I move it around. And also I've got this little eyeball icon which, if I toggle that off, it'll just make that particular widget unseeable, there are uses for that in scripting as well where maybe you want to hide a button. And then when a player does something useful through scripting, you can reveal that button. Note that all these different widgets when you select them, and I just got unselect, or unlock my my button here. Anytime you've got a given widget selected, there are some details associated with it.

And one of the most important details associated with a lot of these different widgets is something called the anchor. So let me just draw your attention to that very quickly. If I click this anchor button drop down right here it shows where I can quote unquote, anchor a given widget to various parts of the screen. I'm just going to choose this middle option right now. And so now these positional x and y coordinates are going to be relative to this anchor, the sort of flower looking icon that is my anchor point for this one. widget so if I set my position x to be zero and my position y to be zero, you can see that the upper left hand portion of my button here, which I'll just resize is set to be right smack dab in the middle of my canvas panel is anchored to that section.

So note that upper left of that particular widget with my anchor in the middle that is position x of zero position y of zero. Now note my alignment settings here, it's currently also x of zero and y of zero if I set x to be 0.5, that's basically splitting that in half right there basically saying go halfway, as well as y being 0.5. That is going to move it to the true center of my screen. There are certain types of widgets that you will find over in your pallet panel here, progress bars, one of them, let me just bring one of those guys In that we'll have a section within the Details panel, a little button, if you will, that will allow you to bind something to it. What does that mean? Well, you can bind certain variable certain pieces of information about your game to widgets to make it behave in a certain way.

For example, we've got this progress bar. progress bars are often meant to indicate things like health experience points, etc. On our character, we have a health percent value. Well, with this particular progress bar, we could create a binding over here in the Details panel to talk to our character's health percentage variable in order to drive how full this progress bar should be. Alright. Note that with a lot of different widgets over here on the left hand side to you can also animate various aspects of that For example, we've got this button.

We could slide this in from the left, we could slide it in from the right, we could have it start out at an infinitely small size and scale it up. We could twirl it around, we could do all kinds of fun things. We could make some text flicker, that kind of thing. How do you do that in Widget Blueprints? Well, there's a whole area called animations down here that's got a timeline where you can do some of that kind of stuff. Now, that's gonna be a little bit outside of the scope of this class.

I've got other classes that teach how to do this kind of stuff. But I just wanted to make that known right now that you can animate certain aspects of your widgets. Okay. Lastly, before we wrap this discussion up, I just want to jump on over to the Graph tab really quickly. Again, this is gonna seem very familiar with all the blueprints that we've created. Over here, along the left hand side, you've got an area where you can create some variables.

There's an area where you can create some functions, all the same sorts of things. That you could find when we were working with our blueprints. Anyways, that is gonna do it all for this one guys I just wanted to talk about what Widget Blueprints are give a quick overview of the interface, I don't actually want to keep this asset. So I'm going to jump back to my level one here and in my content first project UI folder. I'm just going to select this particular asset and delete it out. We will say yes, forced delete it.

And guys, that is going to do it all for this one. In our next few videos. We are actually going to go about creating some useful Widget Blueprints or HUD and some screens. We'll see you there.