WEBVTT 00:07.060 --> 00:08.180 Welcome back. 00:08.200 --> 00:15.040 Now we have our health and Mana Globes showing on the screen, but we're adding those from the level 00:15.070 --> 00:15.760 blueprint. 00:15.760 --> 00:21.280 If we open our level blueprint, we see that we're creating a widget and adding it to the viewport here. 00:21.550 --> 00:23.170 That's not what we want to do. 00:23.170 --> 00:25.120 That was just for testing purposes. 00:25.120 --> 00:29.770 I'm going to go ahead and remove that and close our level blueprint. 00:30.570 --> 00:36.300 We don't want that to be something that depends on code in our level blueprint. 00:36.980 --> 00:44.870 Instead, I'd like to have a designated place for creating our overlay widget, adding it to the viewport 00:44.870 --> 00:48.510 and later actually assigning its widget controller. 00:48.530 --> 00:52.610 Now our game mode has a number of default classes. 00:52.610 --> 00:59.030 If we go to game and or a game mode, here are the default classes and we can set a HUD class. 00:59.030 --> 01:05.750 And a HUD class is really good for doing HUD related things such as drawing widgets to the screen. 01:05.750 --> 01:09.410 And that's where I'd like to add the overlay widget. 01:09.410 --> 01:18.410 So I'm going to create a HUD class and we'll make a ora HUD cplusplus class to base our HUD blueprint 01:18.410 --> 01:19.060 on. 01:19.100 --> 01:26.480 I'll go ahead and close out of all these tabs and we'll go to cplusplus classes ora public. 01:26.480 --> 01:33.590 And this can go into UI and I'll go ahead and right click new Cplusplus class and we'll choose the base 01:33.590 --> 01:37.440 class to be HUD choosing next. 01:37.440 --> 01:44.310 And in the UI folder, I'd like a HUD folder where I can store my Ora HUD class. 01:44.310 --> 01:51.780 So I'm going to call this ora HUD and create class and I'll go ahead and close the editor, save all. 01:51.780 --> 01:57.300 And we should see a HUD folder here in UI. 01:57.420 --> 02:03.240 Now, a nice little shortcut in Ryder is if you have multiple folders open like this, you can collapse 02:03.240 --> 02:05.550 private, you can collapse public. 02:05.550 --> 02:09.300 And when you open them again, all those folders are closed. 02:09.300 --> 02:11.070 So it looks nice and neat. 02:11.310 --> 02:14.400 So in UI we have HUD and HUD. 02:14.400 --> 02:18.570 We have Ora HUD and ora hud Dhcp. 02:19.260 --> 02:20.130 Excellent. 02:20.130 --> 02:23.160 So what do we want to do in Ora? 02:23.190 --> 02:29.790 HUD Well, we want to draw our overlay to the screen, that overlay widget. 02:29.940 --> 02:38.190 So I'm going to want to have a variable to store the overlay widget and a variable to store the overlay 02:38.190 --> 02:41.190 widget class that I'd like to spawn. 02:41.310 --> 02:48.090 So I'm going to go ahead and make a public section and make a variable for the widget itself so we can 02:48.090 --> 02:50.220 store it once we've created it. 02:50.220 --> 02:56.400 This will be a T object pointer of type u ora user widget. 02:56.580 --> 03:02.340 Now it's asking if I want to include I'm just going to add the forward declaration for it and I'm going 03:02.340 --> 03:05.280 to call this overlay widget. 03:05.280 --> 03:07.710 This will be the widget once we create one. 03:07.710 --> 03:15.300 This will get a uproperty macro, but I also need to know the class. 03:15.390 --> 03:21.000 So to create the widget, I need to know the class of widget to create. 03:21.000 --> 03:24.630 So this one I'll make a private variable. 03:24.630 --> 03:27.480 It's going to be a subclass of. 03:27.480 --> 03:35.730 So I'm going to make a T subclass of based on you or a user widget and I'll call this overlay widget 03:35.730 --> 03:44.970 class and this one gets a new property with edit anywhere so I can set it from our HUD blueprint. 03:45.000 --> 03:48.660 Now we just need a way to add this to the viewport. 03:48.960 --> 03:55.530 Now if we want we can just add it to the viewport and begin play for now just to get things working 03:55.530 --> 03:56.670 and see how it works. 03:56.670 --> 03:57.960 We can do that. 03:57.960 --> 04:04.920 But later, when we're setting our overlay widgets, widget controller timing is going to be important 04:04.920 --> 04:07.620 and we'll cross that bridge when we get there. 04:07.620 --> 04:15.150 For now, I just want to see the overlay on the screen drawn by Ora HUD, so I'm going to override Beginplay. 04:15.150 --> 04:16.680 That's a protected function. 04:16.680 --> 04:23.340 So we'll make protected section and we'll say virtual void begin play. 04:23.580 --> 04:24.660 That's an override. 04:24.660 --> 04:31.140 We're going to go ahead and generate the definition and we can create and add that widget to the viewport. 04:31.140 --> 04:33.750 So first we need to call create widget. 04:33.780 --> 04:35.940 We need to say create widget. 04:36.660 --> 04:42.960 That's a template and we have to use U user widget for that. 04:42.990 --> 04:49.740 Now the first input is the owning object, and here in the HUD we can actually pass in the world for 04:49.770 --> 04:50.280 that. 04:50.280 --> 04:57.330 The world can own this object and for the user widget that's going to be our overlay widget class. 04:57.480 --> 05:01.620 And this function returns a user widget pointer. 05:01.620 --> 05:04.890 So we're going to create a local one called Widget. 05:05.370 --> 05:11.910 So we've got our widget and we can simply add it to the viewport by calling add to viewport. 05:12.360 --> 05:16.320 And it looks like writer included something I didn't need. 05:16.350 --> 05:20.220 There something you need to be aware of with writers auto includes. 05:20.310 --> 05:24.540 So now all that's left is to make a blueprint based on our HUD. 05:24.570 --> 05:27.270 Assign that in our game mode blueprint. 05:27.300 --> 05:33.210 Make sure that the HUD has our overlay widget class and then play test. 05:33.210 --> 05:35.880 And that's going to be your quest. 05:36.210 --> 05:39.900 So I'd like you to create the aura HUD blueprint. 05:39.900 --> 05:48.030 Call it BP Aura HUD, and you're going to set that overlay widget class, that subclass of make sure 05:48.030 --> 05:53.790 to set that in the blueprint and then you can assign this in the game mode. 05:53.790 --> 06:00.330 So go to BP aura game mode and assign BP aura HUD for the default HUD class. 06:00.330 --> 06:03.000 So pause the video and do this now. 06:06.430 --> 06:06.880 Okay. 06:06.880 --> 06:09.310 So we can compile and launch. 06:09.910 --> 06:19.210 And here in the editor we can go to blueprints and under UI, I'd like a new folder called HUD and we'll 06:19.210 --> 06:22.240 put our HUD in that HUD folder. 06:22.240 --> 06:27.040 We'll right click, make a new blueprint class and search for Aura HUD. 06:29.190 --> 06:33.450 Choosing that I'm going to select it and call this BP or HUD. 06:34.340 --> 06:40.310 And in Aura HUD, we can choose our overlay widget class. 06:40.340 --> 06:44.390 And here it is under Aura HUD Overlay Widget class. 06:44.390 --> 06:49.410 We can choose WPP overlay and compile and save. 06:49.430 --> 06:58.340 And then we can go into our game folder, go to our aura game mode and change HUD class to BP Aura HUD 06:58.340 --> 07:00.720 compile and save. 07:00.740 --> 07:07.640 And now in Begin play, the HUD should construct and add the widget to the viewport pressing play. 07:07.640 --> 07:11.600 We see that it does, and everything works just fine. 07:11.750 --> 07:13.340 So I'm going to save all. 07:13.340 --> 07:14.870 This is looking great. 07:14.900 --> 07:23.930 We're now ready to start assigning widget controllers to our widgets so that that way we can start controlling 07:23.930 --> 07:32.300 values in those widgets, such as the percent for our progress bars or in our case, progress globes. 07:32.300 --> 07:33.740 So excellent job. 07:33.740 --> 07:36.870 And it looks like Aura has frozen here. 07:37.080 --> 07:43.010 It looks like she's played the first idle animation, but it's not looping is it? 07:43.020 --> 07:44.490 Looks like it just stopped. 07:44.490 --> 07:47.190 So just a really quick fix. 07:47.190 --> 07:48.870 I'm going to go to Blueprints. 07:48.870 --> 07:54.600 We'll go to Character, Aura, AVP, Aura and Open idle. 07:54.600 --> 08:03.030 Select the idle here and let's check loop animation compile, and let's make sure that she doesn't just 08:03.030 --> 08:03.990 freeze. 08:04.960 --> 08:10.340 After that first idle animation and now it's looping and we're looking great. 08:10.360 --> 08:11.170 Excellent. 08:11.200 --> 08:11.890 All right. 08:11.890 --> 08:14.110 I'll see you in the next video.