WEBVTT 00:06.940 --> 00:08.170 Welcome back. 00:08.500 --> 00:15.040 So now that we've created the world's cutest little dungeon, we're going to start working on the next 00:15.040 --> 00:17.260 major section of the course. 00:17.290 --> 00:18.550 Now, don't worry. 00:18.550 --> 00:21.360 This is not the final and only level. 00:21.370 --> 00:29.020 We'll do more with levels as we go, but our game is ready to start incorporating some more RPG elements 00:29.020 --> 00:33.970 to it, such as experience, other spells, and leveling up. 00:34.000 --> 00:40.870 Now in this section, we're going to add more to our HUD as two health globes is nice and they look 00:40.870 --> 00:41.140 good. 00:41.170 --> 00:42.850 But we need more here. 00:42.850 --> 00:47.770 We need at least an XP bar XP being short for experience. 00:47.770 --> 00:55.330 If you aren't familiar with XP, I'll be referring to experience points as XP throughout the rest of 00:55.330 --> 00:56.200 the course. 00:56.230 --> 01:03.520 So we need a game plan and the design that I'd like to go for for our HUD is going to look something 01:03.520 --> 01:04.960 like this. 01:04.960 --> 01:12.530 So I'm going to want my health globes on either side with some little mini globes down here in the middle. 01:12.530 --> 01:19.400 And these will represent the spells that we have equipped and we'll show which inputs they're assigned 01:19.400 --> 01:20.600 to currently. 01:20.600 --> 01:26.210 And here we have a couple of other globes for our passive spells, which we haven't made yet. 01:26.210 --> 01:30.290 But this is something like what I'd like to make now. 01:30.290 --> 01:37.460 The way that I'd like to make this is with a bunch of boxes and I'd like to specify the sizes of those 01:37.460 --> 01:38.360 boxes. 01:38.360 --> 01:45.680 So what I'm going to do is go into my blueprints folder, into UI, and this is going into the overlay. 01:45.710 --> 01:52.820 So I think I'll go into the overlay folder and into sub widgets where we'll have our sub widgets that 01:52.820 --> 01:54.380 will go into the overlay. 01:54.380 --> 02:01.010 So for this widget, I'm going to right click, go to user interface, create a widget blueprint and 02:01.010 --> 02:03.020 choose Aura user widget. 02:03.110 --> 02:08.870 And I'm going to call this WP Health Mana spells. 02:09.020 --> 02:11.210 It's going to have XP in there as well. 02:11.240 --> 02:17.840 But I think Health Mana spells is a good enough name and for the widget, I'm just going to start by 02:17.840 --> 02:23.210 adding a whole bunch of boxes and then we'll fill in those boxes with things. 02:23.210 --> 02:26.690 Now instead of fill screen, I'm going to set this to custom. 02:27.470 --> 02:34.820 And the width is going to be about 1140 1141 and the height is going to be 216. 02:34.850 --> 02:38.320 These are just values that I've found work for me. 02:38.330 --> 02:42.590 And as soon as we drag in some boxes, we'll see that size. 02:42.600 --> 02:44.330 I'm going to start with an overlay. 02:45.010 --> 02:47.290 And call this overlay route. 02:48.790 --> 02:50.610 And now we see the size here. 02:50.620 --> 02:53.740 This is going to be about the size that I like. 02:53.860 --> 02:57.110 And I'm just going to add a whole bunch of boxes. 02:57.130 --> 03:02.330 So I'm going to start with a base box that's going to be a horizontal box. 03:02.350 --> 03:04.000 I'm going to drag that on in. 03:04.690 --> 03:10.710 And the horizontal box is going to be set to fill for horizontal and vertical. 03:10.720 --> 03:18.250 And I'm going to rename this to base box and all the other things will go inside base box. 03:18.370 --> 03:21.700 So I'm going to place a few more boxes in here. 03:21.730 --> 03:24.940 I'll start with three main boxes. 03:24.940 --> 03:27.250 One, two, three. 03:27.280 --> 03:31.180 The first one is going to hold my health globe, so I'm going to call it Health Box. 03:31.510 --> 03:39.280 The second is going to be the central box, so I'll just call it central box and the rightmost box will 03:39.280 --> 03:40.720 be the man box. 03:41.980 --> 03:45.000 Now, these are all going to be set to fill. 03:45.010 --> 03:49.300 So for size up here, I'm going to choose fill for all three. 03:49.300 --> 03:53.340 And by default, they'll fill up as much space as they can. 03:53.350 --> 03:58.140 So I'm going to set a fraction of the size that I'd like them to fill. 03:58.210 --> 04:06.170 I'd like the two outermost boxes to fill up 0.2 and the innermost box, 0.6. 04:06.350 --> 04:10.070 So that's pretty much going to give me the dimensions I want. 04:10.100 --> 04:15.740 Now, inside the central box, we're going to have some more boxes, so we'll need a couple more. 04:15.770 --> 04:21.500 Now they're going to fill in from left to right, but these boxes are going to be vertical boxes. 04:21.500 --> 04:24.980 So the things that go in them will fill in vertically. 04:24.980 --> 04:29.180 So I'm going to drag in one two boxes. 04:29.300 --> 04:31.220 I'm going to set them both to fill. 04:31.220 --> 04:35.360 And the first box is going to hold my offensive spells. 04:35.360 --> 04:39.020 So I'm going to call this one offensive box. 04:41.060 --> 04:44.390 And this one will be for passive spells. 04:44.390 --> 04:46.490 I'm going to call it passive box. 04:47.000 --> 04:51.380 And the offensive box is going to fill most of the space. 04:51.380 --> 05:00.200 I'm going to set the size to fill 0.9 of the space, and the passive box will fill 0.1 10% of the space. 05:00.230 --> 05:05.210 Now the offensive box is going to have some boxes inside of it. 05:05.240 --> 05:14.630 I'm basically going to have a row up on the top for labels and bringing over my plans here. 05:14.630 --> 05:16.250 Here's what I'm talking about. 05:16.250 --> 05:22.940 It's going to be one box here, another central box for the spells and some spacer down there. 05:23.030 --> 05:26.210 So we're going to have three more boxes here. 05:26.360 --> 05:30.470 Now, the topmost box is going to be a vertical box. 05:30.470 --> 05:32.960 This one is going to be above the icons. 05:32.960 --> 05:41.370 So I'm going to call this above icons box and we're going to have the actual icons themselves. 05:41.400 --> 05:47.280 Now, this one is going to be horizontal so we can have the spells laid out horizontally next to each 05:47.280 --> 05:47.880 other. 05:48.090 --> 05:56.850 So this one will be called Spell Icons box, or it could even be spell globes box as they're going to 05:56.850 --> 05:57.900 be globes. 05:58.380 --> 06:02.130 And then finally, we'll have one more box beneath it. 06:02.130 --> 06:04.380 And this will be a spacer box. 06:06.280 --> 06:12.820 So all three of these are going to fill above the icons is going to take up a third of the space. 06:12.820 --> 06:14.620 So I'm going to give it 0.3. 06:14.890 --> 06:18.940 The spell icons themselves are going to take up about half. 06:18.940 --> 06:25.000 I'm going to make it a little less 0.45, and the spacer box is going to take up a third of the space 06:25.000 --> 06:25.930 0.3. 06:27.070 --> 06:29.440 And so we have something like this. 06:29.650 --> 06:35.700 Now, above icons box is going to get two boxes of its own, one that says offensive. 06:35.710 --> 06:43.560 So we know this is offensive spells and then another box beneath it that has all of the input labels. 06:43.570 --> 06:47.260 So I'm going to add two more boxes. 06:47.260 --> 06:49.120 They'll fill up from top to bottom. 06:49.120 --> 06:59.230 So one and two, and this one is going to be offensive text, which sounds like something kind of rude, 06:59.230 --> 07:05.080 but it really is just text that will say offensive literally, and the next box beneath it is going 07:05.080 --> 07:06.740 to be input text. 07:07.160 --> 07:09.050 So it shows the inputs. 07:09.380 --> 07:17.750 So offensive text can be fill input, text can be fill, but we may set this to auto so that the top 07:17.750 --> 07:19.550 part fills as much as it can. 07:19.580 --> 07:28.280 Now spell Globe's box is going to be filled up with globes and Spacer box is going to be empty, so 07:28.280 --> 07:29.630 we'll get to that. 07:29.750 --> 07:34.550 But for now, we have a whole bunch of boxes and we can start putting things in them. 07:34.640 --> 07:39.110 Now the health box can get our health globe widget. 07:39.200 --> 07:46.640 So if we search for WP Health, we can just drag a health globe into here. 07:47.250 --> 07:51.480 And if we choose Phil, it'll be put just about at the right size. 07:51.520 --> 07:54.750 Now, WPP Health Globe should be red. 07:54.750 --> 07:57.120 So let's take a look. 07:58.280 --> 07:59.930 At that widget. 07:59.960 --> 08:07.130 We're going to go to the progress bar and it looks like WP Health Globe actually has blue by default. 08:07.910 --> 08:14.510 So let's search for globe properties and we can change that progress bar brush. 08:15.220 --> 08:17.170 To my health globe. 08:17.500 --> 08:19.260 So that looks good. 08:19.270 --> 08:25.270 And I think I just like the percent on my globes to be 100% by default. 08:25.270 --> 08:26.590 So they look full. 08:26.920 --> 08:33.190 So I'm going to go ahead and get my progress bar globe and set the percent all the way up for that. 08:33.220 --> 08:36.160 Same for the ghost as well and compile that. 08:36.160 --> 08:39.790 And now our health globe looks better. 08:39.790 --> 08:42.610 And here in our widget it looks really nice. 08:42.940 --> 08:50.170 Now I'd like my mana globe in here as well, so I'm going to go ahead and drag one of those in and set 08:50.170 --> 08:52.390 it to fill as well. 08:54.010 --> 08:55.330 Like so. 08:55.930 --> 08:58.660 Okay, So this is a great start. 08:58.690 --> 09:04.570 Now, while I'm at it here, I could just put some text in the offensive text box, so I'm going to 09:04.570 --> 09:07.510 search for text and drag it on in here. 09:07.720 --> 09:15.510 And for this text, I'm going to set horizontal alignment to center and vertical alignment to the bottom 09:15.520 --> 09:24.270 clicking on fill and I'm going to change the font to Amaranth regular change the size to 14. 09:24.280 --> 09:27.220 I'd like a different color and opacity. 09:27.250 --> 09:37.780 A color that I like is 0.649028 for red 0.338234 for blue. 09:37.780 --> 09:40.210 And actually that last number was green. 09:40.210 --> 09:42.040 Red should be just one. 09:42.040 --> 09:48.280 I'm going to use this color for my text and I'm going to give it an outline size of one. 09:48.280 --> 09:52.420 So it has the outline there and I'm going to set some text for it. 09:52.450 --> 09:54.800 It's going to say offensive. 09:55.780 --> 09:58.330 And we'll have passive right here. 09:58.330 --> 10:03.370 So my passive box can itself have a couple of boxes. 10:03.370 --> 10:09.130 So I'm just going to grab a couple more vertical boxes and drag them in here just to for now. 10:10.250 --> 10:12.620 And I'll call the top one. 10:12.740 --> 10:17.270 Passive text and the bottom one. 10:17.300 --> 10:18.920 Passive boxes. 10:20.480 --> 10:27.260 Passive text and passive boxes can both be set to fill and passive text will take up 20%. 10:27.260 --> 10:29.600 So it'll take 0.2 here. 10:29.630 --> 10:33.490 This one gets 0.8 and I'll put some text. 10:33.500 --> 10:42.320 I'm actually going to copy the offensive text and paste it here and call it passive text or text underscore 10:42.320 --> 10:42.830 passive. 10:42.830 --> 10:43.850 How about that? 10:44.150 --> 10:47.240 Offensive can be text underscore offensive. 10:50.750 --> 10:56.540 And I'm going to change the passive text to say passive and look at that. 10:56.540 --> 10:57.980 It barely fits. 10:58.130 --> 11:02.000 And I'm going to set it to fill horizontally and vertically. 11:02.500 --> 11:05.320 And set its justification to center. 11:05.560 --> 11:07.510 Actually, that doesn't look quite right. 11:07.510 --> 11:14.920 So I'm going to set it to vertical alignment to bottom, and we'll just keep horizontal alignment to 11:14.920 --> 11:15.610 center. 11:15.880 --> 11:16.570 Okay. 11:16.570 --> 11:18.190 So that's looking pretty good. 11:18.190 --> 11:24.970 And what we need now are some globes to show all of our different spells. 11:25.270 --> 11:30.670 So I'm going to go ahead and collapse a lot of these boxes as this can get quite overwhelming. 11:30.970 --> 11:37.690 And right here, our input text, I'd actually like to just put the inputs here evenly spaced out. 11:37.900 --> 11:41.710 So once again, I'm just going to fill this in with a bunch of boxes. 11:42.480 --> 11:47.460 They can be horizontal or vertical and I'm going to have six of them here. 11:47.640 --> 11:49.770 So one, two. 11:50.490 --> 11:53.250 Three, four. 11:53.970 --> 11:58.020 Five and six and selecting all of them. 11:58.020 --> 11:59.490 I'm going to select Fill. 12:00.170 --> 12:03.440 And these are going to each contain text. 12:04.070 --> 12:06.440 I'm not going to bother renaming any of them. 12:06.440 --> 12:08.440 I'm just going to drag in some text. 12:08.450 --> 12:16.430 And since I kind of want the same font, I'm going to just copy one of these Offensive is fine and select 12:16.430 --> 12:18.620 one of the boxes and paste it in. 12:18.650 --> 12:25.190 The difference is I'd like the font color to be white, but other than that, we have some text. 12:25.220 --> 12:27.100 Now this one is going to say Lmdb. 12:27.740 --> 12:38.480 So there's our left mouse button input and I'll just call it text underscore lmdb and I'm going to copy 12:38.510 --> 12:41.540 it into each of these boxes. 12:44.940 --> 12:47.910 And all I need to do is change the text for each of them. 12:47.910 --> 12:54.720 This one will be R and B we'll show our right mouse button spell there, followed by one. 12:55.290 --> 12:56.250 To. 12:56.900 --> 12:59.480 Three and four. 12:59.840 --> 13:01.580 Looks like they're named automatically. 13:01.580 --> 13:02.720 Almost perfectly. 13:02.720 --> 13:04.850 They just have a lab in their names. 13:04.940 --> 13:09.980 I'll go ahead and rename them to text one, text two, and so on. 13:19.900 --> 13:24.250 And it actually looks like this one is named five. 13:24.280 --> 13:29.290 So just really quickly, I'm going to rename them properly. 13:35.610 --> 13:41.970 Okay, so now we have the numbers and we really just want boxes for each of our spells. 13:42.000 --> 13:45.300 Now, yes, you could just put the widgets in there. 13:45.330 --> 13:48.820 You don't really have to organize them this much with boxes. 13:48.840 --> 13:53.070 With this particular widget, I just decided to map everything out with boxes. 13:53.070 --> 13:57.000 This is another way to do it, but it's a little more meticulous. 13:57.030 --> 14:04.500 But we have our spell globes box and the spell globes box can really just have a bunch of boxes inside 14:04.500 --> 14:10.770 of it, each of which can contain one of our little globes that can show our spells. 14:10.830 --> 14:15.420 So I'm going to just put six boxes in here. 14:15.450 --> 14:21.510 They can be vertical or horizontal, so I'm going to just place them in here and set them all to fill. 14:21.810 --> 14:27.960 I'm going to call this first one spell box, underscore LMB. 14:28.410 --> 14:32.160 I'm going to drag in another one and call it spell box R&B. 14:38.590 --> 14:41.530 And another one called spell box one. 14:43.590 --> 14:47.430 And then I'll have to through four. 14:50.540 --> 14:53.450 So I'll go ahead and just quickly rename these. 14:55.430 --> 14:56.300 There we go. 14:56.300 --> 15:00.740 And now I can take all of these boxes and set them all to fill. 15:02.980 --> 15:07.510 Like so and now they're just waiting for those globe widgets. 15:07.600 --> 15:13.130 And the last thing here is a couple boxes in the passive boxes box. 15:13.150 --> 15:14.470 This is a vertical box. 15:14.470 --> 15:17.110 So we can place a couple boxes in here. 15:17.350 --> 15:20.110 I'll just really quickly place those in here. 15:20.140 --> 15:27.880 I'll just do one, two, and three and call this passive box one. 15:30.300 --> 15:32.430 Passive box to. 15:33.560 --> 15:36.440 And we'll do a passive box spacer. 15:39.420 --> 15:45.120 And get these all filled and we'll just make the bottom one fill less. 15:45.150 --> 15:49.740 We'll put it at 0.6 and leave the others at one, and they should be relatively square. 15:49.770 --> 15:55.800 So now we have lots of boxes and these are just dying to have widgets put in them. 15:55.800 --> 16:01.640 So next we need a nice globe widget for spell icons in our HUD. 16:01.650 --> 16:04.530 So we'll continue with that in the next video. 16:04.560 --> 16:06.300 Excellent job for now. 16:06.330 --> 16:14.160 Make sure to save all that work as this was pretty tedious, but we now have set up a widget that can 16:14.160 --> 16:16.350 show a lot more information in our HUD. 16:16.350 --> 16:19.200 So excellent job and I'll see you in the next video.