1
00:00:04,490 --> 00:00:05,090
‫Hello and welcome.

2
00:00:05,090 --> 00:00:07,100
‫In this lecture, something somewhat overdue.

3
00:00:07,130 --> 00:00:12,110
‫We are going to have a crosshair in our game which will allow us to more easily do aiming.

4
00:00:12,110 --> 00:00:16,790
‫We're also going to remove that crosshair, which is part of a general heads up display.

5
00:00:16,790 --> 00:00:21,950
‫With that we have and we're going to be able to remove that when we're displaying our lose or win UI.

6
00:00:21,980 --> 00:00:24,380
‫Let's dive in and see how that happens.

7
00:00:25,520 --> 00:00:32,180
‫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

8
00:00:32,180 --> 00:00:32,690
‫reticle.

9
00:00:32,690 --> 00:00:37,610
‫Because at the moment or reticle or a crosshair, because at the moment when we're trying to shoot at

10
00:00:37,610 --> 00:00:40,880
‫someone, it's really hard to do without that reference point.

11
00:00:40,880 --> 00:00:43,400
‫So we're going to go over to our UI folder.

12
00:00:43,430 --> 00:00:48,710
‫We're going to right click in here to create a new user interface widget elements, and we're going

13
00:00:48,710 --> 00:00:54,080
‫to be a WP prefix and we're just going to call Food for Heads Up Display.

14
00:00:54,380 --> 00:00:57,440
‫Now we can go ahead and open that up.

15
00:00:57,440 --> 00:01:03,440
‫I'm going to go ahead and create, first of all, our crosshair and you could do this with a crosshair

16
00:01:03,440 --> 00:01:05,000
‫graphics if you've got one.

17
00:01:05,000 --> 00:01:06,980
‫So you could use the image component there.

18
00:01:07,070 --> 00:01:12,950
‫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

19
00:01:13,130 --> 00:01:14,570
‫and that's going to be my crosshair.

20
00:01:14,600 --> 00:01:17,300
‫Quite simple, really easy to prototype with.

21
00:01:17,300 --> 00:01:23,090
‫So what I'm going to then do is align my text so that it's justified to the center.

22
00:01:23,090 --> 00:01:30,860
‫Then I'm going to go up to the slot canvas panel area and I'm going to check size to content like so,

23
00:01:30,860 --> 00:01:33,740
‫so that everything is nice and tight around that crosshair.

24
00:01:33,950 --> 00:01:41,090
‫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

25
00:01:41,090 --> 00:01:41,750
‫crosshair.

26
00:01:41,750 --> 00:01:47,510
‫And then finally we want to set up our anchor so that we're using the centering default.

27
00:01:47,510 --> 00:01:52,910
‫And then I'm going to set up my position to zero zero so that I crosshair is right smack bang in the

28
00:01:52,910 --> 00:01:53,420
‫middle.

29
00:01:53,420 --> 00:01:54,950
‫I'm going to change the color to red.

30
00:01:54,950 --> 00:01:56,480
‫So that's nice and easily visible.

31
00:01:56,480 --> 00:02:02,210
‫There's a crosshair there and maybe I'm also going to increase the size of that crosshair a little bit.

32
00:02:02,210 --> 00:02:03,920
‫Let's play, see how that feels.

33
00:02:04,390 --> 00:02:10,190
‫One problem, we aren't actually seeing this crosshair in the world, so that I'm going to have as a

34
00:02:10,190 --> 00:02:14,270
‫challenge for you because it is stuff that we've done before in our player controller.

35
00:02:14,270 --> 00:02:19,070
‫We've created widgets and we've added them to the viewport and I want you to do the same again to spawn

36
00:02:19,070 --> 00:02:21,410
‫some heads up display UI.

37
00:02:21,440 --> 00:02:25,030
‫You're going to add on the player controller big in place.

38
00:02:25,040 --> 00:02:29,990
‫You're going to have to go ahead and add a big play to your player controller, add configuration to

39
00:02:29,990 --> 00:02:35,180
‫the header file so that you can configure the widget blueprint that you want to use for the heads up

40
00:02:35,180 --> 00:02:37,670
‫display, you need to spawn it, add it to the viewport.

41
00:02:37,670 --> 00:02:41,510
‫Again, there's code for that in the play controller that you can borrow from and then you're going

42
00:02:41,510 --> 00:02:46,760
‫to configure in your blueprint which class that it should be spawning.

43
00:02:46,760 --> 00:02:49,670
‫So pause the video and have a go at the challenge.

44
00:02:50,600 --> 00:02:51,410
‫Welcome back.

45
00:02:51,410 --> 00:02:57,200
‫So let's give this a shot, shall we, over in the header file for the shooter player controller.

46
00:02:57,200 --> 00:03:01,130
‫You can see we've got this set up for our windscreen lose screen.

47
00:03:01,130 --> 00:03:09,410
‫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.

48
00:03:09,740 --> 00:03:16,400
‫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

49
00:03:16,400 --> 00:03:17,990
‫in our Begin Play.

50
00:03:17,990 --> 00:03:25,010
‫For that, I'm going to go over to the gun and copy the declaration from there and take it over to our

51
00:03:25,010 --> 00:03:32,780
‫shooter player controller H and add in the protected section as well and go and implement begin play

52
00:03:33,110 --> 00:03:36,560
‫and remembering that in Begin Play we must call to super begin play.

53
00:03:36,590 --> 00:03:39,260
‫Otherwise things aren't going to work properly.

54
00:03:39,260 --> 00:03:44,450
‫And finally, I'm going to move this begin play above our game has ended as logically that is the order

55
00:03:44,450 --> 00:03:45,530
‫things will happen in.

56
00:03:46,140 --> 00:03:48,720
‫Then next up, we're going to have to set up the widget.

57
00:03:48,720 --> 00:03:52,200
‫Well, for that, it's going to be pretty straightforward because it's going to be exactly the same

58
00:03:52,200 --> 00:03:55,500
‫steps as we've done for setting up the windscreen and the loo screen.

59
00:03:55,500 --> 00:04:00,330
‫So we're going to copy that over into Begin Play and we're going to give this a shot.

60
00:04:00,330 --> 00:04:05,850
‫Basically, instead of using the windscreen class, we're going to use the HUD class and instead of

61
00:04:05,850 --> 00:04:11,760
‫creating a windscreen here, what we're going to do is create h you d so that's why I'm just going to

62
00:04:11,760 --> 00:04:17,520
‫call it HD in all these cases, if you do is not null, then we're going to add it to the viewport.

63
00:04:17,520 --> 00:04:23,220
‫Let's go over to the editor, compile and see if we can now configure things over in our player controller.

64
00:04:23,220 --> 00:04:29,070
‫So I'm going to go open up, open up the BP shooter player controller, open up the full blueprint editor

65
00:04:29,070 --> 00:04:29,340
‫here.

66
00:04:29,340 --> 00:04:34,740
‫And once you compilation is finished, you should see the HUD class pop in as a variable we can set

67
00:04:34,740 --> 00:04:36,030
‫at the top, right?

68
00:04:36,030 --> 00:04:40,440
‫So if we click that dropdown, you can see WP, HUD, that's the one we want to select.

69
00:04:40,440 --> 00:04:41,970
‫Let's go ahead and hit play.

70
00:04:42,090 --> 00:04:47,310
‫And sure enough, we now have a big massive red crosshair, probably too big showing up in our screen.

71
00:04:47,310 --> 00:04:53,880
‫So let's go and make that for a slightly smaller font, maybe around 47 or something like that.

72
00:04:54,390 --> 00:04:55,590
‫Go and hit play now.

73
00:04:55,590 --> 00:04:56,720
‫And that's a big.

74
00:04:57,340 --> 00:04:58,690
‫Decent sized crosshair.

75
00:04:58,690 --> 00:05:00,250
‫Still a little big, in my opinion.

76
00:05:00,250 --> 00:05:02,860
‫So I'm going to bring that down to about 30.

77
00:05:03,160 --> 00:05:04,240
‫Try that out.

78
00:05:05,420 --> 00:05:07,510
‫Yeah, that makes sense for my game.

79
00:05:08,980 --> 00:05:14,220
‫Exactly, because we're shooting through the center of the screen.

80
00:05:14,220 --> 00:05:18,810
‫Then the next thing you'll notice is that if we go and give our rifle damage again, so I'm going to

81
00:05:18,810 --> 00:05:20,400
‫go over open up its full blueprint.

82
00:05:20,400 --> 00:05:25,980
‫Editor sets damage to 50 so that it kills us off quickly and go and hit play.

83
00:05:26,430 --> 00:05:32,070
‫Is that as we get killed, that crosshair stays there, so we want to be able to remove the crosshair.

84
00:05:32,070 --> 00:05:37,800
‫Now, fortunately, removing is fairly easy because this is all inside the player controller class and

85
00:05:37,800 --> 00:05:39,870
‫we already get game is ended here.

86
00:05:39,870 --> 00:05:46,890
‫What we want to do is basically remove that HUD from the viewport whether or not we are the winner because

87
00:05:46,890 --> 00:05:49,380
‫we're replacing it with other UI here.

88
00:05:49,380 --> 00:05:54,180
‫However, we can't get hold of that HUD widget that we've created because we created it here and begin

89
00:05:54,180 --> 00:05:55,440
‫play and we didn't save it anywhere.

90
00:05:55,440 --> 00:06:01,710
‫So over in the header file, I'm going to create a new private variable down near the bottom here that

91
00:06:01,710 --> 00:06:05,040
‫is going to be a you user widget HUD.

92
00:06:05,580 --> 00:06:08,130
‫So it's a private variable that we're going to set and begin play.

93
00:06:08,130 --> 00:06:12,420
‫So I'm just going to remove the type from there, which is going to make sure that we're setting the

94
00:06:12,420 --> 00:06:19,740
‫variable against the class, which then means that we should have access to that variable over in our

95
00:06:19,740 --> 00:06:21,170
‫game has ended.

96
00:06:21,220 --> 00:06:26,970
‫I just noticed that I added the HUD unfortunately the game to the gun header rather than the shooter

97
00:06:26,970 --> 00:06:29,670
‫player controller header, which is actually what I wanted to do.

98
00:06:29,670 --> 00:06:35,640
‫And it also looks like I forgot to make it a new property, which it should be because this is going

99
00:06:35,640 --> 00:06:41,550
‫to be a pointer that we want to keep hold of and we want to be garbage collected correctly.

100
00:06:41,550 --> 00:06:47,490
‫So yes, it should be a you property even if there are no specifiers in that property.

101
00:06:47,490 --> 00:06:52,980
‫So now if we go and have a look at game has ended at just before the if statement I want to remove it

102
00:06:52,980 --> 00:07:01,650
‫from the viewport so we can do HUD which we now have access to arrow remove from viewport, which is

103
00:07:01,650 --> 00:07:03,630
‫just going to make it invisible.

104
00:07:03,630 --> 00:07:06,900
‫Let's go over to the engine and compile and try it out.

105
00:07:06,900 --> 00:07:10,230
‫And once it's finished compiling, let's hit play, get ourselves killed.

106
00:07:11,430 --> 00:07:14,730
‫And sure enough, we've got our HUD disappearing there.

107
00:07:14,730 --> 00:07:19,410
‫Once we restart the level it will reappear because Begin Play gets called again.

108
00:07:19,650 --> 00:07:21,210
‫So that's it for this lecture.

109
00:07:21,210 --> 00:07:25,950
‫In the next lecture, we're going to set up the actual health bars on our HUD as well as that crosshair.

110
00:07:25,950 --> 00:07:31,980
‫But you can see we've started to pay off dividends for managing our UI within the play controller because

111
00:07:31,980 --> 00:07:39,030
‫now when we've added more UI that the player controller also manages, it's able to jostle between those

112
00:07:39,030 --> 00:07:41,310
‫two UI's in one class.