‫Hello and welcome.
‫In this lecture, something somewhat overdue.
‫We are going to have a crosshair in our game which will allow us to more easily do aiming.
‫We're also going to remove that crosshair, which is part of a general heads up display.
‫With that we have and we're going to be able to remove that when we're displaying our lose or win UI.
‫Let's dive in and see how that happens.
‫So we'd like some UI to be in our world to show us how much health we've got, but also to give us a
‫reticle.
‫Because at the moment or reticle or a crosshair, because at the moment when we're trying to shoot at
‫someone, it's really hard to do without that reference point.
‫So we're going to go over to our UI folder.
‫We're going to right click in here to create a new user interface widget elements, and we're going
‫to be a WP prefix and we're just going to call Food for Heads Up Display.
‫Now we can go ahead and open that up.
‫I'm going to go ahead and create, first of all, our crosshair and you could do this with a crosshair
‫graphics if you've got one.
‫So you could use the image component there.
‫Or what I'm going to do is just going to add in a text component and I'm going to put in a plus sign
‫and that's going to be my crosshair.
‫Quite simple, really easy to prototype with.
‫So what I'm going to then do is align my text so that it's justified to the center.
‫Then I'm going to go up to the slot canvas panel area and I'm going to check size to content like so,
‫so that everything is nice and tight around that crosshair.
‫Then I'm going to set up my alignment to be 0.5 and 0.5 so that we're aligning to the center of that
‫crosshair.
‫And then finally we want to set up our anchor so that we're using the centering default.
‫And then I'm going to set up my position to zero zero so that I crosshair is right smack bang in the
‫middle.
‫I'm going to change the color to red.
‫So that's nice and easily visible.
‫There's a crosshair there and maybe I'm also going to increase the size of that crosshair a little bit.
‫Let's play, see how that feels.
‫One problem, we aren't actually seeing this crosshair in the world, so that I'm going to have as a
‫challenge for you because it is stuff that we've done before in our player controller.
‫We've created widgets and we've added them to the viewport and I want you to do the same again to spawn
‫some heads up display UI.
‫You're going to add on the player controller big in place.
‫You're going to have to go ahead and add a big play to your player controller, add configuration to
‫the header file so that you can configure the widget blueprint that you want to use for the heads up
‫display, you need to spawn it, add it to the viewport.
‫Again, there's code for that in the play controller that you can borrow from and then you're going
‫to configure in your blueprint which class that it should be spawning.
‫So pause the video and have a go at the challenge.
‫Welcome back.
‫So let's give this a shot, shall we, over in the header file for the shooter player controller.
‫You can see we've got this set up for our windscreen lose screen.
‫And just above these too, what I want to do is add in a new one which is going to be an H or HUD class.
‫So we're going to have it as a DT subclass of the you use a widget, then we're going to have to add
‫in our Begin Play.
‫For that, I'm going to go over to the gun and copy the declaration from there and take it over to our
‫shooter player controller H and add in the protected section as well and go and implement begin play
‫and remembering that in Begin Play we must call to super begin play.
‫Otherwise things aren't going to work properly.
‫And finally, I'm going to move this begin play above our game has ended as logically that is the order
‫things will happen in.
‫Then next up, we're going to have to set up the widget.
‫Well, for that, it's going to be pretty straightforward because it's going to be exactly the same
‫steps as we've done for setting up the windscreen and the loo screen.
‫So we're going to copy that over into Begin Play and we're going to give this a shot.
‫Basically, instead of using the windscreen class, we're going to use the HUD class and instead of
‫creating a windscreen here, what we're going to do is create h you d so that's why I'm just going to
‫call it HD in all these cases, if you do is not null, then we're going to add it to the viewport.
‫Let's go over to the editor, compile and see if we can now configure things over in our player controller.
‫So I'm going to go open up, open up the BP shooter player controller, open up the full blueprint editor
‫here.
‫And once you compilation is finished, you should see the HUD class pop in as a variable we can set
‫at the top, right?
‫So if we click that dropdown, you can see WP, HUD, that's the one we want to select.
‫Let's go ahead and hit play.
‫And sure enough, we now have a big massive red crosshair, probably too big showing up in our screen.
‫So let's go and make that for a slightly smaller font, maybe around 47 or something like that.
‫Go and hit play now.
‫And that's a big.
‫Decent sized crosshair.
‫Still a little big, in my opinion.
‫So I'm going to bring that down to about 30.
‫Try that out.
‫Yeah, that makes sense for my game.
‫Exactly, because we're shooting through the center of the screen.
‫Then the next thing you'll notice is that if we go and give our rifle damage again, so I'm going to
‫go over open up its full blueprint.
‫Editor sets damage to 50 so that it kills us off quickly and go and hit play.
‫Is that as we get killed, that crosshair stays there, so we want to be able to remove the crosshair.
‫Now, fortunately, removing is fairly easy because this is all inside the player controller class and
‫we already get game is ended here.
‫What we want to do is basically remove that HUD from the viewport whether or not we are the winner because
‫we're replacing it with other UI here.
‫However, we can't get hold of that HUD widget that we've created because we created it here and begin
‫play and we didn't save it anywhere.
‫So over in the header file, I'm going to create a new private variable down near the bottom here that
‫is going to be a you user widget HUD.
‫So it's a private variable that we're going to set and begin play.
‫So I'm just going to remove the type from there, which is going to make sure that we're setting the
‫variable against the class, which then means that we should have access to that variable over in our
‫game has ended.
‫I just noticed that I added the HUD unfortunately the game to the gun header rather than the shooter
‫player controller header, which is actually what I wanted to do.
‫And it also looks like I forgot to make it a new property, which it should be because this is going
‫to be a pointer that we want to keep hold of and we want to be garbage collected correctly.
‫So yes, it should be a you property even if there are no specifiers in that property.
‫So now if we go and have a look at game has ended at just before the if statement I want to remove it
‫from the viewport so we can do HUD which we now have access to arrow remove from viewport, which is
‫just going to make it invisible.
‫Let's go over to the engine and compile and try it out.
‫And once it's finished compiling, let's hit play, get ourselves killed.
‫And sure enough, we've got our HUD disappearing there.
‫Once we restart the level it will reappear because Begin Play gets called again.
‫So that's it for this lecture.
‫In the next lecture, we're going to set up the actual health bars on our HUD as well as that crosshair.
‫But you can see we've started to pay off dividends for managing our UI within the play controller because
‫now when we've added more UI that the player controller also manages, it's able to jostle between those
‫two UI's in one class.