 Hey there, welcome back to Game Dev Academy. I'm Shane. Make sure that you let me know you're here by leaving comments and stuff down that way and you will see your name on screen next time, like these lovely people here. Here they are. Last time we got the blocks to be different colors and have different points values. Now we're going to need to start thinking about what we're going to do with those points and a big part of it's going to be displaying it on screen. So this video is going to be about getting the heads up display created and displayed to the player. So after the title card let's get stuck in and do that. Moving forward we're going to be adding some more game style mechanics to this so we're going to make it so when the ball falls out of the level we're going to lose a life and as we hit the blocks we're going to start collecting points and we need a way to communicate that to the player. I'm going to do that through the use of a heads up display or HUD which will be creating and adding to this screen in this video. So let's get stuck in. I'm already in my blueprints folder which is where I need to be and I'm going to right click in here and at the bottom of this create menu you can see that there's a user interface section. There it is and at the bottom of that menu you can see there's a widget blueprint and that's what we're going to be creating. So we'll click on that. The first thing Alaska's to do is give it a name. We will. We're going to call it HUD for heads up display and then we need to get that open so we can work on it. So double click and here it is. So at present you can see this rectangle here represents the sort of shape of our heads up display and we know that we're currently building for a portrait style phone screen so this this is not going to work really. So in the top right of the screen you can see it says screen size here we're going to go down there we have phones and I'm just going to stick to the Samsung Galaxy S4 preset because it kind of fits in with the the shape I want without being too high res. So that's what we're going to do. This still leaves it in landscape mode though which is not what we're looking for. So this little choppy up here switch between landscape and portrait is what we're going to use to get this facing the right way. And then just as we do in any blueprint we can move this around so I'm going to center it just by clicking with my right mouse button and dragging it into place. Now we can start bringing in the elements that we need from over here which is called the palette and the first thing I'm going to create is something called a horizontal box. So I'm just going to start typing this horizontal box there it is and I'm going to drag that in like so I'll zoom in on it a little bit and I'm just going to expand the size of it so that I've got room to do what I need and I'll get its contract back down to the size I want in a minute. So this box here doesn't do too much on its own we'll need to add some text to it to allow it to display what we want it to. So I'm going to use this text here which is just a block of text so I'm going to put one in there and you can see it kind of snaps inside it knows where we want to put it and I'm going to put another one so I've got two text blocks side by side and I've kind of aligned them to the left as well and then I'm going to select this first text block and you can see the details are over here and here's the text and it currently says text block so I'm going to change this to points not popings points and then I'm going to add a colon and a space so that it has that little bit of extra room before I actually put the score in and then when I press enter you can see that that updates and then for the next text block I'm going to just put in like a dummy score for now so let's say that the highest sort of score might be 9,999,999 maybe if they score more than that they break the game so there we go that's kind of set up as we want it to be and now I want to do we've got a lot of this original box here this horizontal box that we don't want so let's click on it and there's a tick box over here that is size to content so when I click on that you'll see that that snapped it back to size and I'm now not using any more of a horizontal box than I need to so what I want to do now is get this box positioned so I want to kind of plop it up here in the top left so you can see the position X and Y currently have values I'm going to set those both to zero and that'll stick it right in the top left of my screen but I don't want it to be right up there because there's no sort of buffer so I'm going to bring it in by about 30 on position X and 30 on position Y and that just brings it in a little bit now this is where my points are going to be I also want how many lives we've got left to be displayed top right and I could go through the process I've just gone through again by creating the box putting the text in or I can duplicate what I've already got so here's horizontal box here uh and I might just call this I'm going to rename this so I know which one it is this is going to be points and then I'm going to right click and duplicate this and you see it gives me another horizontal box I'm going to rename this one two lives and then with this selected what I'm going to do is change the anchor position to the top right and you see we get a little flowery icon and that's telling us that everything we do with the size and position is in relation to that anchor point so I'll show you what I mean about that if I now make it zero and zero it anchors it over here whereas this one you see the anchor point for that one is in its original position and its position is in relation to that so back onto this lives one I do know that what I want on position Y I believe it's Y is 30 and that gets them at the same height and I'm also just going to do position minus 30 to give me some of this just to bring it in a little bit and then I'm going to align this on X I think if I make it one that should align it up about consistently which looks good and we see we get points and a number again we don't want those anymore so from a hierarchy this time I'm going to change it to lives look at but it's and then the number doesn't need to be as big at all it's only going to be one digit really so what I'm going to do is just put one in there for now and you can see that's moved across as well everything's nice and aligned it didn't stay too far over so now we've got the points positioned in the top left and the lives positioned top right so at this stage we've pretty much created our heads up display but it's not going to appear in game yet we need to set it up so that it will appear in game so let's compile and save it and I'm just going to dock this up here and then I need to get into my game mode that's where we're going to load in the hood so we'll open it a little like this we need to get into the full blueprint editor to get at all the properties so let's open this up and the hood is something that we are going to want to create um on begin play as soon as the game starts running so that's this is the event we're going to be using so from begin play let's create widget it's a widget that we created for our heads up display and then the class from here we can select the hood that's what we called it so it's going to create that for us and later we're going to want to talk between the hood and the game mode so that the hood can get the information to display on screen how many lives have we got left what's the current score so what we're going to do is get the hood out of the return value we're going to promote it to a variable and we're going to call it hud and that will help us to get that working later to get the functionality into the heads up display so it's not actually just displaying static values it can change dynamically based on what's happening in the game and one other thing that we need to do with this heads up display is add it to viewport so we can create it but we've actually got to get it into the viewport for the game so we can see it otherwise it would be useless okay so what i'm going to do now is just comment this up um and we're just going to call it add hud so we know what that's doing and then we'll compile save and now it's time to test so what i'm going to do is i'm going to test in two ways so you can see you don't get confused by it so i'll play first of all and you can see let me just release my mouse lives up here and here which is not in the aspect ratio that we created originally and that's fine because it's taken up the whole window so if instead of doing that i use this drop down and we do new editor window you can see this is kind of the size and shape that we're working with and it looks to me like our points and lives are pretty much where i want them to be so i'm happy to wrap up at this stage if you want to though you might want to go back into your hud maybe change the font colors positioning make it so that you're happy with it make it your own you know be creative with it uh and then moving on in the next video we'll get the lives counterworking so we're going to set how many lives we want the play to start with spoiler alert it's going to be three and then we're going to get this part of the hud to dynamically show that we're not going to start taking lives away just yet i don't think we'll see um but we are going to get the hud to display that for us so that's what's coming up next thanks for watching and i'll see you next time in it i believe that quality education should be available to everybody and for that reason all of the classes at game dev academy are completely free and we're supported by our very generous school governors over at patreon if you'd like to become a game dev academy governor and support our work as well as helping us to steer the channel in the right direction then use the link in the description to be taken to the patreon page