WEBVTT 00:06.820 --> 00:07.900 Welcome back. 00:07.900 --> 00:10.990 Now our overlay is starting to look a lot better. 00:11.110 --> 00:14.620 But as we mentioned before, this is missing something. 00:14.620 --> 00:16.530 We need an XP bar. 00:16.540 --> 00:24.070 So in this video, we're going to create one of those and this can go in blueprints UI and we could 00:24.070 --> 00:30.790 put it in the overlay sub widget folder or we could put it in progress bar. 00:30.790 --> 00:32.830 I'm going to put it in progress bar. 00:33.010 --> 00:34.990 I think that's a great place for it. 00:34.990 --> 00:43.360 So I'm going to create a new user interface widget blueprint based on or a user widget and call this 00:43.550 --> 00:47.470 WP underscore XP bar. 00:48.930 --> 00:52.510 So our XP bar is going to be quite simple. 00:52.560 --> 00:55.110 I'd like to give it first an overlay. 00:56.110 --> 01:08.200 And we'll call this overlay route and set this from fill screen to custom and give it a custom width 01:08.200 --> 01:09.070 and height. 01:09.850 --> 01:19.270 Now I'm thinking the width can be around 880 or so and the height can be about 50. 01:19.690 --> 01:21.790 So quite thin. 01:21.880 --> 01:27.220 And I'm really just going to want a frame and a progress bar. 01:27.370 --> 01:30.310 So the frame is going to be an image. 01:30.760 --> 01:39.040 I'm going to drag that on in and go ahead and make it fill and select it now for the image. 01:40.280 --> 01:50.990 If I search for exp underscore frame, then we have this exp frame and I think that's going to be just 01:50.990 --> 01:51.680 fine. 01:51.770 --> 01:55.850 And on top of that, we can bring in a progress bar. 01:57.950 --> 02:01.250 And the progress bar can also be set to fill. 02:03.160 --> 02:06.460 Except I might want to give it some padding. 02:06.760 --> 02:15.160 So for padding, I'm going to bring in the left and right by a little bit, about 21 and 21. 02:15.490 --> 02:19.210 That's going to put it just about at the right width here. 02:19.210 --> 02:23.290 And for the top, I'm going to give it 9.5. 02:23.470 --> 02:26.260 And for the bottom, I'll give it 18. 02:26.860 --> 02:29.920 So that puts it just about in the frame there. 02:29.920 --> 02:34.300 I think that looks pretty good, but we can always tweak it a bit. 02:34.300 --> 02:35.200 Left and right. 02:35.200 --> 02:42.820 Could be 20.5, maybe even 20 and 20. 02:44.360 --> 02:50.330 And for the progress bar, I'm going to give it a fill image and a background image. 02:50.330 --> 02:58.070 Now, the background image I think I'm going to make black with probably maybe 0.5 alpha. 03:00.610 --> 03:05.940 And if I take the percent and fill it on up, I can change the fill image as well. 03:05.950 --> 03:13.780 So for the fill image I'm going to search for exp underscore and we have exp bar. 03:14.200 --> 03:15.880 Here's what it looks like. 03:16.120 --> 03:17.470 So that looks pretty good. 03:17.470 --> 03:22.540 I might actually increase the padding just a bit on the progress bar. 03:22.540 --> 03:27.010 So for the top I'm going to bring it up a little bit. 03:27.040 --> 03:34.150 Maybe ten 10.5 and for the bottom I'm going to bring it up as well, maybe to 19. 03:36.150 --> 03:38.310 That looks pretty good. 03:38.970 --> 03:43.020 And we can play with the percent and see what it looks like. 03:44.740 --> 03:48.230 Okay, so we have a pretty nice looking progress bar. 03:48.250 --> 03:52.480 I'm going to bring it all the way up to one for the percent. 03:57.780 --> 04:03.780 And with this progress bar, I'm going to go ahead and just add it straight on to the overlay. 04:03.810 --> 04:08.850 Now, I could have put it here in my health mana spells. 04:09.090 --> 04:16.100 It could have gone right here in this box, but I'd like to put it separately so I can scale it separately. 04:16.110 --> 04:19.380 So for that reason I'm just going to put it straight into the overlay. 04:19.470 --> 04:29.430 So I'm going to search for XP bar, bring in an XP bar, and I'd like to set its size exactly to what 04:29.430 --> 04:30.660 I had here. 04:31.570 --> 04:36.700 I have 880 by 50, so I'm going to do that here in the overlay. 04:36.700 --> 04:39.760 I'm going to set size X to 880. 04:40.030 --> 04:49.780 I'm going to set size Y to 50 and I'm going to set the anchor to bottom center alignment in the X to 04:49.780 --> 04:53.800 0.5 and position X to zero. 04:56.800 --> 04:59.170 And alignment x I put 0.05. 04:59.200 --> 05:00.400 This should be 0.5. 05:00.430 --> 05:01.300 There we go. 05:01.300 --> 05:06.190 And then I can click and drag position y to bring it on down. 05:07.250 --> 05:09.380 Okay, so that looks good. 05:09.410 --> 05:17.210 Now it's a little bit in front of the Globes here, and it kind of does look pretty cool. 05:17.210 --> 05:18.590 Let's see how it looks. 05:18.590 --> 05:21.110 But we can always change things. 05:21.110 --> 05:22.480 Let's press play. 05:22.490 --> 05:24.380 There's the XP bar. 05:26.150 --> 05:28.430 I kind of do like how it looks. 05:29.760 --> 05:31.890 I might even bring it up a little bit. 05:31.920 --> 05:37.860 Maybe cover slightly part of the ring here for one of the passive spells. 05:37.890 --> 05:39.270 That could be fun. 05:42.310 --> 05:44.390 So that looks pretty cool. 05:44.410 --> 05:52.330 And then alternatively, we could resize it or we could also put it behind the health manager spells 05:52.330 --> 05:54.610 by clicking and dragging it up. 05:55.370 --> 05:57.560 And now it's back there. 05:58.660 --> 06:04.640 So either way, it's a matter of style and of course, size, position, all of those things. 06:04.720 --> 06:10.000 Those are something that can be adjusted now, something to keep in mind. 06:10.030 --> 06:17.620 If our health and Mana globes become empty, then we would be able to see part of this behind it. 06:17.620 --> 06:25.150 So we do want to make sure not to unintentionally have a look or effect that we don't want. 06:26.100 --> 06:29.370 So after adjusting that to how you see fit. 06:30.210 --> 06:33.000 We'll have a nice XP bar. 06:35.200 --> 06:38.350 I kind of like it in front like that, and I think it looks pretty nice. 06:38.970 --> 06:39.720 So. 06:40.520 --> 06:42.680 Things are looking really, really good. 06:45.050 --> 06:45.890 Excellent. 06:46.690 --> 06:50.230 So now that we have these widgets, it's time to make them functional. 06:50.260 --> 06:54.940 For one, I have a spell assigned to my left mouse button, my fireball. 06:54.940 --> 06:55.570 Right. 06:55.600 --> 06:58.660 That's going to need to be shown here. 06:58.750 --> 07:04.210 And I'm just now noticing that my fireballs pass through these tiles. 07:04.210 --> 07:06.250 They're not set to block the projectile. 07:06.490 --> 07:14.230 And an easy way to fix that is to search for tile and simply take all of our tiles. 07:15.820 --> 07:20.350 At least our floor tiles here and go to their collision settings. 07:20.650 --> 07:22.240 And we can do this all at once. 07:22.240 --> 07:23.200 Take the projectile. 07:23.200 --> 07:24.850 We can set it to overlap. 07:31.320 --> 07:38.010 And we can check generate overlap events and that should fix that problem. 07:38.040 --> 07:39.960 Of course, these edges. 07:40.690 --> 07:43.900 Are also not blocking the projectile. 07:43.900 --> 07:48.730 So we're going to want those as well, blocking the projectile. 07:48.730 --> 07:54.160 So I'm going to go ahead and just quickly select each of the edges and make sure we have that covered 07:54.160 --> 07:54.850 as well. 07:56.420 --> 08:01.850 So with those selected, we're going to click generate overlap events. 08:02.700 --> 08:06.000 And we're going to make sure that they overlap. 08:07.200 --> 08:08.400 The projectile. 08:10.160 --> 08:13.160 And we can test and see that it works. 08:17.860 --> 08:22.600 Testing our stairs and everything else. 08:22.750 --> 08:23.350 Okay. 08:25.700 --> 08:26.120 Now. 08:26.120 --> 08:28.610 Yes, we do have some issues with our. 08:30.450 --> 08:32.670 Walls and are. 08:33.580 --> 08:37.000 Cursor trace, and we're going to get to that. 08:38.820 --> 08:44.730 And the issues I'm talking about, you can really see with enemies in the world. 08:44.940 --> 08:53.130 I'm going to actually take my nav mesh bounds volume and move it so that it's not covering half of this 08:53.130 --> 08:53.780 level. 08:53.790 --> 09:00.810 If I press P, I can see the green is only on half the level here and that way I can drag in an enemy 09:00.810 --> 09:02.640 and it won't be able to move. 09:02.880 --> 09:12.030 So if I go to character, Goblin, Spear and bring one of those in here now that I have one of those. 09:13.880 --> 09:16.100 Right here towards the back. 09:16.250 --> 09:18.830 I can press play and it won't come after me. 09:18.950 --> 09:25.610 And something to be aware of is that when it's not being blocked, I can hover over it. 09:25.610 --> 09:26.240 Right. 09:26.510 --> 09:27.650 But. 09:28.860 --> 09:31.170 Even if it's still being blocked. 09:33.650 --> 09:35.210 Let's see if I can get it half blocked. 09:36.500 --> 09:37.280 Look at that. 09:37.280 --> 09:45.110 I can still hover over it and it's still highlighting, even though there's a wall in the way. 09:45.750 --> 09:47.990 Now, that might not be too bad. 09:48.000 --> 09:50.100 That might not be too big of an issue. 09:50.650 --> 09:51.640 But. 09:53.140 --> 09:54.700 It might not be what we want. 09:54.700 --> 09:55.990 So that's something to keep in mind. 09:56.020 --> 10:02.620 We'll keep that in the back of our mind as we're developing and we'll change things as we see fit. 10:02.650 --> 10:07.510 I'm just going to go ahead and kill this goblin one more time because it was really satisfying seeing 10:07.510 --> 10:10.810 that dissolve effect in a darker environment. 10:14.030 --> 10:14.750 Look at that. 10:14.750 --> 10:15.890 That is beautiful. 10:15.920 --> 10:16.580 All right. 10:16.580 --> 10:17.840 So great job. 10:17.840 --> 10:21.470 We now have an XP bar and it looks amazing. 10:22.100 --> 10:25.100 I'm going to save all and I'll see you in the next video.