WEBVTT 00:06.860 --> 00:08.030 Welcome back. 00:08.330 --> 00:15.530 Now that we have a spell globe and it's looking pretty good, we can add this to help manage spells. 00:15.560 --> 00:19.250 Our widget that will contain all of these globes. 00:19.340 --> 00:25.130 So I'm going to make sure the spell globe is all compiled and saved first. 00:25.130 --> 00:32.120 And then over here in health manage spells, I'm going to search for my spell globe and bring in a spell 00:32.150 --> 00:38.120 globe for each of my boxes that are so eagerly awaiting spell globes. 00:38.120 --> 00:43.700 So let's get one for all six of our offensive and then we'll put one into the passive. 00:43.730 --> 00:45.500 Now for the passive. 00:45.680 --> 00:48.710 It looks like the size here is going to be an issue. 00:48.740 --> 00:53.590 Right now, if we select fill, then the size looks pretty good. 00:53.600 --> 01:00.710 So if we go ahead and put one into each of these and select fill, the size looks good, except that 01:00.710 --> 01:06.140 due to being smaller, we're going to need to change a couple of the properties here. 01:06.260 --> 01:12.690 Now I think the padding is the only thing we really need to worry about on these, so I'm just going 01:12.690 --> 01:19.860 to search for my Globe properties, making sure that my spell globe is selected here. 01:20.590 --> 01:25.660 And because I didn't expose those variables, I can't see them here. 01:25.660 --> 01:31.840 So I need to go back to spell globe and make sure that those globe properties are all exposed. 01:31.870 --> 01:39.610 So here in the graph, I'm going to take my globe properties, each one of them, and expose them with 01:39.610 --> 01:41.770 the eye icon and compile. 01:41.950 --> 01:49.210 And now back here in health manage spells, I can search for globe properties and see those properties 01:49.210 --> 01:51.060 and I can change my padding. 01:51.070 --> 01:53.380 It's looking like it might need to be lower. 01:53.380 --> 01:56.900 So if I change it to six, that looks better. 01:56.920 --> 01:59.450 Five looks pretty good as well. 01:59.470 --> 02:07.570 5.5 might be a good compromise, so I'm going to set it to 5.5 for both of these and that looks better. 02:07.600 --> 02:12.610 Actually, I might have done that prematurely because I may wish to have these get some padding of their 02:12.610 --> 02:15.480 own so that these rings aren't touching. 02:15.490 --> 02:19.660 So what I think I'll do is add some padding. 02:20.020 --> 02:22.790 I'm going to try a value of 1 or 2. 02:22.880 --> 02:24.440 Two for each. 02:24.440 --> 02:25.540 Looks pretty good. 02:25.550 --> 02:32.660 And now I can go back and check out their globe properties and make sure that this is set to a good 02:32.660 --> 02:33.760 value. 02:33.770 --> 02:37.340 I like to go a little overboard and then dial it back. 02:37.370 --> 02:39.790 That's kind of the approach I like to take. 02:39.800 --> 02:42.440 I think 5.5 is pretty good. 02:42.440 --> 02:44.420 Five actually might be better now. 02:44.450 --> 02:46.640 Five does look pretty good. 02:47.240 --> 02:50.570 Okay, so the passive spells look pretty good. 02:50.570 --> 02:53.420 Let's take a look at the offensive spells. 02:53.450 --> 02:56.000 They seem to be a little large. 02:56.000 --> 03:00.950 If we select fill, then they're actually a little bit squished. 03:00.980 --> 03:04.760 So that's something that we are going to want to fix. 03:04.760 --> 03:09.530 But at the same time, they're touching edge to edge, Their rings are touching. 03:09.530 --> 03:16.430 So that's not necessarily a bad thing that they're squished because we can make them less squished with 03:16.430 --> 03:18.320 some horizontal padding. 03:18.320 --> 03:18.650 Right? 03:18.650 --> 03:25.790 So if I hold shift and just click on all of these, then I can expand their padding and just put a little 03:25.790 --> 03:27.380 bit on the left and the right. 03:27.380 --> 03:30.380 I'm going to start with one and see how that looks. 03:30.380 --> 03:34.340 There's still a little squished, so I'm going to try two and two. 03:35.100 --> 03:45.030 And perhaps 2.5 and 2.5 might be the sweet spot here, just as long as they look pretty much round. 03:45.060 --> 03:47.280 So that's looking pretty good. 03:47.310 --> 03:53.730 Now, the thing is, I don't want them to all look like this, especially if there are no spells assigned 03:53.760 --> 03:54.780 to these slots. 03:54.780 --> 03:57.630 If they're empty, then I want them to look empty. 03:57.660 --> 04:02.120 So what I can do is I can set them to look empty by default. 04:02.130 --> 04:10.230 But really, we're going to want a way to set them to a given icon, basically have a function to set 04:10.230 --> 04:16.440 the icon and an easy to use function to set it to look empty, basically. 04:16.440 --> 04:21.180 So for the spell globe, I'm going to make a function to set it to look empty. 04:21.180 --> 04:27.000 And the reason I need a special function is because we're going to have to set that background image. 04:27.000 --> 04:29.970 If I just reset it, it's going to look white. 04:29.970 --> 04:32.550 So that's not exactly what I want. 04:32.580 --> 04:37.430 I want to set it to a brush that's completely transparent. 04:37.450 --> 04:47.380 So what I can do is I can create a variable here and call this variable transparent brush, and I can 04:47.380 --> 04:55.390 set its default values by compiling and coming down to basically the tint and setting the alpha to zero. 04:55.390 --> 05:03.160 I think that's going to be exactly what I need and I'll make a function to clear our icon and the background 05:03.160 --> 05:05.200 and leave that glass material. 05:05.200 --> 05:07.630 So we just get the ring and the glass. 05:07.630 --> 05:16.480 So let's make a function called, let's call it Clear Globe and Clear Globe is going to set two brushes. 05:16.510 --> 05:21.010 It's going to set the image spell icon. 05:22.090 --> 05:24.430 And it's going to set the image background. 05:24.580 --> 05:29.170 So we're going to take both of these and we're going to call set brush. 05:30.100 --> 05:36.580 And if we just hook them both up as Target, then we can simply call set brush once and we're going 05:36.580 --> 05:38.350 to set it to transparent brush. 05:40.680 --> 05:41.670 There we go. 05:41.700 --> 05:44.160 There's our clear globe function. 05:44.160 --> 05:50.550 And in our event graph, if we call it here, an event construct, we should be able to see it work. 05:50.550 --> 05:51.850 Let's test that. 05:51.870 --> 05:58.430 So clear globe, we'll call it here and check the designer compile and there we have it. 05:58.440 --> 06:04.500 We've cleared the globe, but we also need a way to set the background and the icon as well. 06:04.500 --> 06:08.000 So we'll also want to be able to set the globe. 06:08.010 --> 06:10.230 So I'm going to make another function. 06:10.590 --> 06:15.330 And this can be called set icon and background. 06:17.110 --> 06:23.500 And this can take in two brushes, two inputs of type slate brush. 06:25.350 --> 06:27.930 The first one can be icon brush. 06:29.340 --> 06:32.700 And we'll have another one called Background Brush. 06:35.340 --> 06:39.150 And then we're just going to set those properties. 06:39.150 --> 06:40.950 So let's get those variables in here. 06:40.950 --> 06:43.080 We need the image background. 06:43.230 --> 06:46.880 We'll get that and we need the image spell icon. 06:46.890 --> 06:49.560 We'll get that and we're going to call set brush. 06:51.400 --> 06:52.480 For both of them. 06:52.480 --> 06:59.110 So I'm going to duplicate the set brush and the icon brush will go into set brush for image. 06:59.110 --> 06:59.860 Not that one. 06:59.860 --> 07:07.780 The other one, the image for spell icon and the background brush will get to go into the set brush 07:07.780 --> 07:09.400 for the image background. 07:09.520 --> 07:10.720 There we go. 07:10.720 --> 07:11.740 That's better. 07:11.890 --> 07:16.150 So we'll call both of these for this function which will set these. 07:16.150 --> 07:20.320 I'm going to really quickly rearrange this just so that. 07:21.370 --> 07:24.130 It looks a little bit more clear what's going on here. 07:25.600 --> 07:27.220 Here we go. 07:29.980 --> 07:30.970 There we go. 07:34.080 --> 07:36.440 Little bit over meticulous, but there. 07:36.440 --> 07:37.730 That's better. 07:38.460 --> 07:41.950 Now we can test out this by simply calling it. 07:42.000 --> 07:44.910 So it's called set icon and background. 07:45.330 --> 07:55.800 And really, this is going to require the brush so we can make a slate brush and set this image for 07:55.800 --> 07:56.640 the icon. 07:56.640 --> 07:58.350 I'm going to search for Firebolt. 07:59.790 --> 08:07.080 And for the background, I'm going to make a slate brush and for the image I'm going to search for. 08:07.560 --> 08:09.480 Let's see what we called it. 08:10.520 --> 08:12.590 And our spell globe. 08:13.500 --> 08:14.430 I don't remember. 08:14.430 --> 08:20.580 So I'm going to just browse to my globe progress bar, get the fill image and browse to it. 08:20.580 --> 08:21.180 There it is. 08:21.180 --> 08:22.890 It's called Fire Skill BG. 08:24.760 --> 08:26.800 So I'm going to go ahead and. 08:27.360 --> 08:28.890 Call the function with that. 08:28.890 --> 08:30.060 And if I compile. 08:30.090 --> 08:30.920 There we go. 08:30.930 --> 08:31.410 It works. 08:31.410 --> 08:37.980 So we can just call this function and pass in two brushes when we need to set that, I'm going to compile 08:37.980 --> 08:40.500 and delete that clear globe. 08:40.500 --> 08:44.580 And if we compile again, it's back to what it is. 08:44.580 --> 08:50.940 So by default, I'm going to go ahead and call Clear Globe here at. 08:51.590 --> 08:57.770 The beginning and event construct, and then we can just have what looks like all empty globes. 08:57.770 --> 08:59.690 I think that's going to be just fine. 08:59.720 --> 09:04.550 And as our spells become equipped, we can set those brushes. 09:05.090 --> 09:06.230 Okay, great. 09:06.440 --> 09:13.370 Now, I'd like to use this in our overlay instead of what we have now. 09:13.370 --> 09:16.850 What we have now is just a pair of globes on our overlay. 09:16.970 --> 09:20.630 I'd rather have this new health man of spells. 09:20.660 --> 09:29.300 So for that reason, let's go into our overlay in Blueprints UI overlay, and here's WPP Overlay. 09:29.330 --> 09:30.830 We can remove these. 09:30.830 --> 09:34.730 Now, we do have some code in here for those. 09:35.000 --> 09:41.000 Right here we have event widget controller set, and as soon as we set the widget controller, we set 09:41.000 --> 09:44.180 the widget controller for the health globe and the Mana Globe. 09:44.180 --> 09:50.780 And for that reason, the health globe and the Mana Globe can handle what happens. 09:50.810 --> 09:53.760 They can bind to their delegates and whatnot. 09:53.790 --> 09:59.940 But now I'm going to remove these and replace them with health mana spells. 09:59.940 --> 10:06.060 And for that reason, rather than setting those widget controllers for the Globes, instead we're going 10:06.060 --> 10:09.900 to set the widget controller for our new widget Health Mana spells. 10:09.900 --> 10:13.850 So I'm going to remove these function calls. 10:13.860 --> 10:15.810 We're going to replace it here. 10:15.810 --> 10:24.840 I'm going to hold C and make a comment and say set WC widget controller for health mana spells. 10:24.840 --> 10:27.330 So I don't forget that's going to go here. 10:27.880 --> 10:37.920 So now we can remove health globe and manage globe completely and we can get a health mana spells instead. 10:37.930 --> 10:39.340 So I'm going to bring that in. 10:39.990 --> 10:41.310 And set it right there. 10:42.020 --> 10:43.580 Now we can center it. 10:43.580 --> 10:49.520 I'm going to make it anchored to the bottom center and put its position in the middle. 10:49.520 --> 10:55.490 So if I set alignment for X to 0.5, then I can set its position X to zero. 10:55.490 --> 11:03.560 And it's nice and centered and I'm probably going to want its position Y to go lower almost at the very 11:03.560 --> 11:04.880 bottom of the screen. 11:06.100 --> 11:08.560 So I think that's going to look pretty good. 11:08.950 --> 11:16.090 And now we have a health man spells, and I can go back into the event graph and get that health man 11:16.100 --> 11:19.150 spells, which needs to be a variable. 11:19.150 --> 11:20.980 So I'm going to check is variable. 11:20.980 --> 11:26.230 And then back here I can get my health man of spells and set its widget controller. 11:26.230 --> 11:28.320 So I don't need that comment anymore. 11:28.330 --> 11:31.810 I'm going to call set widget controller. 11:33.000 --> 11:35.520 And set it equal to the same widget controller. 11:35.520 --> 11:37.710 So it's going to share the overlays. 11:37.710 --> 11:38.670 Widget controller. 11:38.670 --> 11:40.410 So I'm going to get widget controller. 11:41.720 --> 11:43.490 Scrolling all the way down to get. 11:43.520 --> 11:44.620 Widget controller. 11:44.630 --> 11:49.550 We'll pass that in and set the widget controller now for health mana spells. 11:50.650 --> 11:55.960 And health man who spells is going to handle setting the widget controller for any of its widgets that 11:55.960 --> 11:58.600 need to use the same widget controller. 11:58.600 --> 12:05.200 So I'm going to compile this and go back to Health Man spells into its event graph and right click and 12:05.200 --> 12:08.440 get my widget controller set event. 12:08.440 --> 12:16.150 And once we get that widget controller, we can set the widget controller for both the health globe 12:16.150 --> 12:17.320 and the man globe. 12:17.350 --> 12:20.680 So these have to be set to is variable as well. 12:20.680 --> 12:22.870 So I'll go ahead and check that for both of them. 12:23.440 --> 12:28.000 Compile and save and come back to the graph and we'll set them here. 12:29.010 --> 12:32.940 So I'm going to go ahead and just make a sequence. 12:35.000 --> 12:38.030 As I know that I'll probably do multiple things here. 12:38.120 --> 12:44.480 And the first thing I'm going to do is set the widget controller for Health Globe and manage globe. 12:44.660 --> 12:48.050 I'm going to call set widget controller for both of them. 12:48.050 --> 12:55.880 And in fact, I can do what I did before and use this trick where we stick both of these health in manage 12:55.880 --> 12:59.930 globe into the same input and then we can use. 13:00.460 --> 13:01.930 Widget controller. 13:03.530 --> 13:04.820 We're going to get that. 13:06.140 --> 13:07.850 And hook it in here. 13:08.000 --> 13:10.490 And now we're setting the widget controller. 13:11.470 --> 13:13.480 For our Globes. 13:13.660 --> 13:21.010 So thanks to that, we now have our Globes getting their widget controller set and then they handle 13:21.040 --> 13:23.320 binding to their delegates and everything else. 13:23.320 --> 13:26.500 So that should be enough to make these work. 13:26.500 --> 13:34.240 I'm going to go ahead and save all and we can test out taking damage by either placing an enemy in the 13:34.240 --> 13:38.950 world or putting in a fire area, something like that. 13:38.950 --> 13:47.830 I'm just going to drag in a BP fire area, stick it there, and I believe that box is always going to 13:47.830 --> 13:48.880 be visible. 13:48.880 --> 13:55.390 So I'd like to just hide that box and BP fire area while I'm here. 13:57.380 --> 13:59.100 So I'm going to uncheck. 13:59.120 --> 13:59.570 Nope. 13:59.570 --> 14:01.340 It is hidden in game. 14:01.640 --> 14:04.100 So I think it is not visible. 14:04.130 --> 14:04.370 Right. 14:04.370 --> 14:05.240 It's not visible. 14:05.270 --> 14:05.810 Perfect. 14:05.810 --> 14:08.780 I'm going to go into the fire area and there we go. 14:08.810 --> 14:10.350 Our health is updating. 14:10.370 --> 14:11.420 That's perfect. 14:11.450 --> 14:15.800 Now, our mana doesn't ever change, but we're going to fix that as well. 14:16.400 --> 14:19.280 Once we implement mana costs for our abilities. 14:19.280 --> 14:26.660 By the way, you may have noticed my nice little embellishment that I put in my wall here. 14:27.050 --> 14:28.310 No big deal. 14:28.310 --> 14:32.060 I really just dragged in a couple assets and made it look a little bit better. 14:32.480 --> 14:36.080 So I didn't even make a fade actor for this. 14:36.080 --> 14:39.050 So really it's just going to be there. 14:39.050 --> 14:42.740 If it obstructs the way it's not going to fade out or anything like that. 14:42.740 --> 14:51.020 But yeah, something that I did off camera and I don't do things off camera if it's significant. 14:51.020 --> 14:53.060 So this is really just dragging assets in. 14:53.060 --> 14:54.710 So don't freak out. 14:54.710 --> 14:58.340 Feel free to embellish yours as well. 14:58.970 --> 15:02.930 Okay, so now our HUD looks a great deal better, doesn't it? 15:02.930 --> 15:10.010 But we're missing one important thing that just about all RPGs have, and that's an XP bar, a bar for 15:10.010 --> 15:11.330 experience. 15:11.330 --> 15:16.890 So that's one of the next things we need to make and we'll do that in the videos to come. 15:16.890 --> 15:21.450 So excellent job and I'll see you in the next video.