WEBVTT 00:07.600 --> 00:08.770 Welcome back. 00:08.950 --> 00:16.030 So now that we have an aura widget controller, an aura user widget, we can now make some widgets based 00:16.030 --> 00:18.630 on this or a user widget class. 00:18.640 --> 00:23.830 So the first thing we're going to want is some kind of way to show our health. 00:23.830 --> 00:25.540 That's what I'd like to start with. 00:25.540 --> 00:29.110 So I'd like to make a widget designed to handle that. 00:29.140 --> 00:34.480 Now for this project, I like health and Mana to be represented as globes. 00:34.480 --> 00:42.970 If we go into assets and we check out the UI folder and go to Globes, we have a number of materials. 00:42.970 --> 00:51.250 Notice that that's what these are our materials and we have an m flowing globe and an m I health globe. 00:51.250 --> 00:53.230 Let's double click my health globe. 00:53.230 --> 01:01.570 We'll see that its parent material is M flowing globe and this is a nice health globe that has clouds 01:01.570 --> 01:02.350 swirling. 01:02.350 --> 01:09.080 It kind of looks like red liquid and you'll see that we have a number of parameters as it's a material 01:09.080 --> 01:14.300 instance with some parameters in it, and we're going to want to use this material. 01:14.300 --> 01:20.630 I would like to use this as a health globe material, so I'd like to make a widget that can use this 01:20.630 --> 01:22.850 in a sort of progress bar. 01:23.150 --> 01:30.200 So what I'm going to do is I'm going to go into the content blueprints folder, right click and make 01:30.200 --> 01:32.990 a new folder for the UI. 01:33.110 --> 01:39.320 I'm going to call this UI, and here in UI, I'm going to make another folder. 01:39.320 --> 01:47.750 And for this folder I'm going to place all my progress bars, including the globes that we use as progress 01:47.750 --> 01:48.470 bars. 01:48.560 --> 01:56.920 So in progress bar, I'll just call it Progress Bar without an S, I'm going to make a widget blueprint, 01:56.930 --> 02:02.630 so I'm going to right click and go to user interface and choose widget Blueprint, but I'm going to 02:02.630 --> 02:04.850 choose Ora user widget. 02:04.880 --> 02:11.390 That way I'll make a widget blueprint that inherits from Ora user widget and has a widget controller 02:11.390 --> 02:12.140 pointer. 02:12.140 --> 02:20.120 So I'm going to select that and I'm going to call this BP underscore Globe Progress Bar. 02:20.900 --> 02:23.870 So what I'd like to do is make use of inheritance. 02:23.870 --> 02:29.120 Since I want both a health and a man, a progress bar in the form of a globe. 02:29.150 --> 02:35.360 I'm just going to have a BP globe progress bar that these can both inherit from, and that way we can 02:35.360 --> 02:40.580 have some features inherited and we can set other features manually. 02:41.150 --> 02:44.690 So how are we going to use inheritance with widgets? 02:44.720 --> 02:50.030 Well, what we can do is first we can determine what the size should be for this. 02:50.030 --> 02:57.800 But I'd like the size to be something we can override in child classes just in case we need to do something 02:57.800 --> 03:01.640 that's a sort of smaller progress globe. 03:01.760 --> 03:04.010 So I'm going to make a size box. 03:05.210 --> 03:07.810 So dragging a size box in. 03:07.820 --> 03:12.080 We now have this box that right now fills the entire screen. 03:12.080 --> 03:19.280 But if I change this from fill screen here at the top right to desired, I now have the ability to override 03:19.280 --> 03:23.930 the size over here under the details panel under child layout. 03:23.960 --> 03:27.450 We have width override and height override. 03:27.470 --> 03:29.270 I can override this. 03:29.450 --> 03:35.540 So for example, I can check these check boxes and set these two values that I want, such as, say, 03:35.570 --> 03:41.300 250 pixels each for width and height, just as an example. 03:41.300 --> 03:47.900 But if we want to be able to override this in child classes, well, how exactly can we do that? 03:48.230 --> 03:54.410 Well, what we could do is we could create variables for the width and the height, and then we can 03:54.410 --> 03:57.980 set those over in the graph territory. 03:58.190 --> 04:06.740 So the size box I'm going to rename this to actually size box underscore root so we can treat this as 04:06.740 --> 04:11.090 a sort of root widget here in Globe Progress Bar. 04:11.090 --> 04:15.890 And if we go over to the graph, then we have these events here. 04:15.890 --> 04:20.180 And the one I'm interested in here is an event pre construct. 04:20.210 --> 04:27.020 Now this is similar to the construction script in regular actor blueprints in that if we change any 04:27.020 --> 04:32.880 properties here on this blueprint, this widget blueprint, then this will be fired off. 04:32.900 --> 04:34.970 Now I'm noticing I named this BP. 04:35.000 --> 04:36.950 This should actually be BP. 04:37.430 --> 04:40.540 I just like to have W for widget blueprint. 04:40.550 --> 04:44.060 So I'm just going to really quickly rename this to BP. 04:44.060 --> 04:50.570 So in this widget blueprint, this will fire off when we change something such as a variable. 04:50.720 --> 04:57.020 Now what we can do is we can make variables for the width and height for that size box, that root. 04:57.050 --> 05:07.650 So if I click plus under variables and create a new variable called box width and change this to a float 05:07.650 --> 05:13.110 and then make another variable called box height and let that be a float. 05:13.260 --> 05:19.890 Then we now have these variables that we can use to set the width and height of that size box. 05:19.890 --> 05:26.970 So for example, if I compile this, I can set box width, I can give it a default value of 250 and 05:26.970 --> 05:28.260 I can set box height. 05:28.260 --> 05:30.690 I can give that a default of 250. 05:30.690 --> 05:37.800 And then here in event pre construct, I can take that size box, that size box root that we have here 05:37.800 --> 05:40.240 and I can set properties on it. 05:40.260 --> 05:46.440 Now I need to come up here in the details panel and check is variable and compile so that back in the 05:46.440 --> 05:50.910 graph I can see the size box root and drag it out and get it. 05:50.910 --> 05:56.610 And what we can do is take size box root and we can call set width override. 05:57.050 --> 06:04.280 And we can pass in our box width so we can get that pass it in and hook that up to event pre construct. 06:04.280 --> 06:06.620 And we can also set the height as well. 06:06.620 --> 06:14.810 So I'm going to copy size box root with control D and drag off of it and call the function set height 06:14.810 --> 06:15.800 override. 06:15.860 --> 06:22.820 If I call that, I can hook that up and I can drag out our box height and hook that in. 06:23.150 --> 06:30.560 And now if we change these values, as soon as we change them, we should see that size change here 06:30.560 --> 06:32.030 in the designer tab. 06:32.030 --> 06:40.910 For example, if I go to box width and change this from 250 down to say 80 and go back to designer and 06:40.910 --> 06:45.610 hit compile, now we see that it's skinnier, it has a width of 80. 06:45.620 --> 06:53.960 So this is a nice way for us to just have variables that we can set and we can set these on child widget 06:53.960 --> 06:57.210 blueprints that are based off of this widget blueprint. 06:57.210 --> 06:59.850 And now we'd like to keep these nice and organized. 06:59.850 --> 07:05.070 So I'm going to highlight these nodes and right click and collapse to a function. 07:05.070 --> 07:09.390 That way we can update our box size all in a single function. 07:09.390 --> 07:12.930 I'm going to call this function update box size. 07:13.740 --> 07:20.610 And now our event graph is nice and organized, So this is sort of the pattern we're going to take to 07:20.610 --> 07:25.470 inherit child widget blueprints from our base widget blueprint. 07:25.470 --> 07:28.140 And this is how it's done in Fortnite. 07:28.140 --> 07:33.600 As you can see, some GDC talks where they talk about how they do this in Fortnite and this is how they 07:33.600 --> 07:34.230 do it. 07:34.260 --> 07:41.070 Now we have a size box that determines the size for our widget and anything that's underneath it in 07:41.070 --> 07:42.150 the hierarchy. 07:42.420 --> 07:47.040 I'd like to stack things on top of each other, and to do that we need an overlay. 07:47.040 --> 07:54.090 So I'm going to get an overlay and bring that up onto my size box root and I'm going to call this overlay 07:54.120 --> 07:55.860 underscore root. 07:56.280 --> 08:00.960 That way we know that this is sort of the root overlay and we can place things on top of it. 08:00.960 --> 08:02.910 Now, I'd like several things. 08:02.910 --> 08:11.190 I'd like a background image, something that can sort of be a ring or a frame for our health globe. 08:11.190 --> 08:13.950 We know that this is going to be the progress bar. 08:13.980 --> 08:15.510 Is this health globe, right? 08:15.510 --> 08:19.440 So we're also going to want a sort of ring or a background. 08:19.470 --> 08:21.480 Now we have plenty of ring assets. 08:21.480 --> 08:28.260 If we go to assets and go to UI, we can go to rings and we have globe ring, globe ring. 08:28.260 --> 08:30.420 There's two styles to choose from here. 08:30.420 --> 08:33.000 Here's the globe ring texture. 08:33.000 --> 08:36.420 And then we have a globe ring two, which is a little bit more pale. 08:36.420 --> 08:40.650 So notice one has more saturation in the color, the other is a bit paler. 08:40.650 --> 08:48.000 I'm going to just use the regular globe ring here, so I'd like to add an image here into our Globe 08:48.000 --> 08:51.660 Progress bar, and I'm going to set it to that globe ring. 08:51.660 --> 08:56.910 But this is also something I'd like to be able to override in child classes. 08:56.910 --> 08:59.940 So what I'm going to do is first drag in the image. 08:59.940 --> 09:04.530 I'm going to get an image and drag it on to the overlay route. 09:04.530 --> 09:08.970 And this image is going to be our background image. 09:08.970 --> 09:12.600 I'm going to call this image underscore background. 09:13.400 --> 09:20.930 So our image background here is something I'd like to be able to set with a variable as well. 09:20.930 --> 09:27.860 So what I can do is I can take this image background, I can go to horizontal and vertical alignment 09:27.860 --> 09:29.930 and choose fill for both. 09:29.930 --> 09:36.380 And I can also come into the graph tab and I can make a variable for the brush. 09:36.380 --> 09:43.430 That's what we use for images in widgets is a structure known as the brush. 09:43.430 --> 09:51.890 So I can make a variable here, I can click plus I can call this background brush and I can change its 09:51.890 --> 09:52.220 type. 09:52.220 --> 09:56.900 I can search for brush, and the type that I want is slate brush. 09:56.900 --> 10:02.960 So I have a slate brush variable and I can use that to set the brush for the background here, which 10:02.960 --> 10:05.420 means our background needs to be a variable. 10:05.420 --> 10:11.000 So we're going to check that in the details panel, compile that and come back to the graph so we can 10:11.000 --> 10:15.060 see that we have our image background. 10:15.090 --> 10:18.960 Now already I'm starting to see that these are getting a little bit mixed up. 10:18.960 --> 10:25.890 We have our variables and then we have our widgets that are exposed as variables from our hierarchy 10:25.890 --> 10:26.130 here. 10:26.130 --> 10:29.640 So I'd like to put these sort of in their own categories. 10:29.640 --> 10:34.440 I'd like to have at least one category for the overridable variables. 10:34.620 --> 10:41.700 So for the Glow progress bar, I'm going to select box width and come down here to the properties and 10:41.700 --> 10:45.450 find category and change this from default. 10:45.480 --> 10:47.760 I would like this to be in its own category. 10:47.760 --> 10:51.180 I'm going to call this Globe Properties. 10:51.750 --> 10:58.680 So now we have this globe properties and I can put box height and globe properties as well and I can 10:58.680 --> 11:02.010 put background brush and globe properties as well. 11:02.010 --> 11:08.640 So now we have the Globe properties and they're different from our widget variables that we have here. 11:08.670 --> 11:14.880 Now I'd like to take my background brush and drag it out and select get and I'd also like to get my 11:14.880 --> 11:21.390 image background, that widget that we exposed as a variable from over here in the designer tab. 11:21.390 --> 11:23.160 This image background. 11:23.220 --> 11:27.810 I'm going to take that image background and I'm going to call set brush. 11:28.080 --> 11:32.790 Now calling set brush requires a slight brush structure for that. 11:32.790 --> 11:34.440 I'm going to use background brush. 11:34.440 --> 11:41.310 I'm going to drag that in and hook it up and select my background brush and scroll down to the background 11:41.310 --> 11:43.080 brush default value. 11:43.080 --> 11:44.340 And I can set this. 11:44.340 --> 11:46.470 I'm going to choose that globe ring. 11:46.470 --> 11:51.630 I'm going to search for globe ring and choose globe ring and compile. 11:51.630 --> 11:56.250 And if I go back to the designer tab now I see the globe ring set. 11:56.250 --> 12:02.250 So we're giving this base widget blueprint a default value for that globe ring here. 12:02.550 --> 12:03.060 Okay. 12:03.060 --> 12:09.210 And now that this is driven by a variable, if we inherit from this in a child blueprint class, we 12:09.210 --> 12:13.530 can set that background brush and change that background if we like. 12:13.530 --> 12:17.580 Now I'd also like to refactor this into its own function. 12:17.580 --> 12:22.830 So I'm going to highlight these nodes right click and collapse to function. 12:22.830 --> 12:32.010 And this can be called update background brush, and we have that encapsulated into its own function. 12:32.430 --> 12:36.990 Now, in addition to a background, we want the progress bar itself. 12:37.260 --> 12:41.970 So for the progress bar, I'm going to want well, a progress bar. 12:41.970 --> 12:46.110 So up here in common here's progress bar. 12:46.110 --> 12:49.380 If I drag that out, I can put it onto the overlay. 12:49.380 --> 12:55.380 That's what overlays are good for is stacking things on top of each other and the progress bar itself 12:55.380 --> 12:58.800 that can be set to fill horizontally and vertically. 12:59.070 --> 13:03.630 And this progress bar is going to want a style. 13:03.630 --> 13:07.890 Now, I want the style here to have a fill image. 13:07.890 --> 13:13.620 If I expand fill image, here it is and I can set this to a default value. 13:13.620 --> 13:16.830 Now I want to use my my underscore health globe. 13:16.830 --> 13:20.430 That'll just be the default value here. 13:20.820 --> 13:24.720 So my health globe will set that for the fill image. 13:24.720 --> 13:30.600 And if I take my percent and drag it all the way up, I can see what it looks like when it's all the 13:30.600 --> 13:31.710 way full. 13:31.740 --> 13:33.810 Now, that doesn't look right, does it? 13:33.810 --> 13:35.610 It looks completely black. 13:35.610 --> 13:37.500 So we need to find out why. 13:37.500 --> 13:44.430 Well, if we scroll down here in the details panel for one, here's a fill color and opacity. 13:44.430 --> 13:47.250 I'm going to want that set to completely white. 13:47.250 --> 13:54.720 So I'm going to open the color picker and bring the saturation all the way down and click okay, so 13:54.720 --> 13:55.770 that's better. 13:55.770 --> 13:58.110 But it doesn't look like a globe, does it? 13:58.110 --> 14:04.860 So we're going to scroll all the way back up to fill image, and here's what we want to do. 14:04.860 --> 14:12.360 If we want to show this as it looks here in our health globe, what we have to do is right here under 14:12.360 --> 14:12.630 draw. 14:12.820 --> 14:20.770 As we have to change this from box to image, if we change that to draw as image, well, now this is 14:20.770 --> 14:21.580 what it looks like. 14:21.610 --> 14:27.670 It looks like it does in our material instance, and that's what we want to use now for the background 14:27.670 --> 14:28.330 image. 14:28.330 --> 14:30.250 I don't want that gray there. 14:30.400 --> 14:37.030 So what I'm going to do is expand background image and under tint I'll actually open that color picker 14:37.030 --> 14:40.390 and drag the alpha down to zero and click okay. 14:40.390 --> 14:47.260 So now we have really nothing for the background, which is what I want as I already have a background 14:47.260 --> 14:47.920 image. 14:47.920 --> 14:54.280 I don't really want a background for the progress bar itself, and if I drag the percent down, there's 14:54.280 --> 14:55.060 nothing there. 14:55.060 --> 14:56.230 That's what I want. 14:56.260 --> 14:56.830 Now. 14:56.830 --> 15:02.320 Later we'll have a second progress bar that will trail behind this one as it's changing, but we'll 15:02.320 --> 15:03.430 get to that later. 15:03.430 --> 15:08.140 For now, we're concerned with setting up the progress bar itself. 15:08.140 --> 15:12.010 Now notice when I drag the percent down, we're going from left to right. 15:12.040 --> 15:15.380 I'd like this health globe to fill from top to bottom. 15:15.380 --> 15:20.390 So here, under progress, I'm going to change bar fill type from instead of left to right. 15:20.390 --> 15:23.000 I want to fill bottom to top. 15:23.000 --> 15:27.710 So as we start running out of health, it goes down like that. 15:27.710 --> 15:31.040 And as we go up, then we go up to the top. 15:31.130 --> 15:31.730 Okay. 15:31.730 --> 15:32.810 Looking good. 15:33.260 --> 15:35.360 Now we have a couple of issues, right? 15:35.360 --> 15:37.550 For one, we need some padding. 15:37.550 --> 15:43.520 We want that health globe to be a little bit padded so it's not covering the ring. 15:43.520 --> 15:50.510 But also I'd like to be able to set this progress bar image, that material instance in child classes 15:50.510 --> 15:56.540 so that way we can change what it looks like and maybe we can make a child that takes a blue health 15:56.540 --> 15:58.880 globe material and we can use it for mana. 15:59.090 --> 16:03.290 So I'm going to take the progress bar and check is variable. 16:03.320 --> 16:06.290 Go ahead and compile and come back into the graph. 16:06.290 --> 16:10.070 And I see that it's called Progress Bar for 16. 16:10.070 --> 16:16.070 So actually I'm going to rename that to Progress bar underscore Globe. 16:16.280 --> 16:18.230 I think that's a better name for it. 16:18.230 --> 16:24.050 And in the graph we'll drag out Progress Bar Globe And what do we want to set? 16:24.080 --> 16:27.200 We want to set our fill image. 16:27.200 --> 16:33.170 We're going to drag off and we're going to type, style and choose set style. 16:33.170 --> 16:35.150 Now, why did we choose style? 16:35.150 --> 16:39.770 Well, all of this stuff under style has to do with what it looks like. 16:39.770 --> 16:42.740 We have the background image, we have the fill image. 16:42.740 --> 16:50.420 We're interested in having a empty background image, and our fill image is going to have a brush that 16:50.420 --> 16:51.740 we'd like to set. 16:51.740 --> 16:59.300 So what we can do here is we can drag off of the input for the set style and we can say make progress 16:59.300 --> 17:05.690 bar style, and we'll make a structure that will satisfy this set node. 17:05.720 --> 17:10.480 And then we can set these various properties such as the background image. 17:10.490 --> 17:16.520 Now for the background image, we want an empty sort of zero alpha transparent image. 17:16.520 --> 17:22.040 So I'm going to drag off of background image and choose make slate brush and we'll make a slate brush 17:22.040 --> 17:25.280 structure here and expand it. 17:25.280 --> 17:27.710 And that way we can choose these properties. 17:27.710 --> 17:30.470 Now I'm going to get these two nodes out of my way. 17:30.470 --> 17:31.940 I'm going to delete them. 17:31.940 --> 17:40.020 And what I'm concerned with for background image here is setting my tint to a tint that has zero Alpha. 17:40.050 --> 17:43.440 That's all we did here in the designer under style. 17:43.440 --> 17:47.910 If we look at background image, we took our tint and we set its alpha to zero. 17:48.120 --> 17:55.200 So I'm going to take the tint which is a slate color structure, drag off and choose make slate color. 17:55.200 --> 17:57.420 And here I can choose a specific color. 17:57.420 --> 18:02.130 I can open the color picker and drag the alpha down to zero, click okay. 18:02.130 --> 18:08.250 And now I have a slate brush whose slate color has zero alpha. 18:08.280 --> 18:12.210 That's the background image for the progress bar style. 18:12.240 --> 18:14.580 So that takes care of the background. 18:14.580 --> 18:20.340 But for the fill image, this I would like to have a variable that I can change, so I'm going to make 18:20.340 --> 18:23.880 a fill image slate brush structure. 18:23.880 --> 18:29.430 So I'm going to go to variable Click plus and this will be progress. 18:29.430 --> 18:31.830 Bar fill image. 18:32.840 --> 18:40.100 And I'm going to drag that in and set that for the fill image, and I'm going to compile and come down 18:40.100 --> 18:47.420 here to progress bar fill image and set this image to my underscore health globe. 18:47.450 --> 18:56.170 Now whenever we call set, I can compile and see, well, it's set to this red my health globe. 18:56.180 --> 19:02.480 But if I come back in here and change progress bar fill image to maybe a different color. 19:02.480 --> 19:09.500 If I search for perhaps my manage globe and compile and come back to the designer, I see that it's 19:09.500 --> 19:10.220 now blue. 19:10.220 --> 19:17.060 So changing this value for the variable is what's going to change what our health globe material looks 19:17.060 --> 19:17.600 like. 19:17.780 --> 19:24.230 Now I'm going to take that progress bar, fill image and set its category to globe properties. 19:24.230 --> 19:27.110 So it's in here with our other variables. 19:27.110 --> 19:32.070 And I'm also going to, of course, collapse it into its own function here. 19:32.340 --> 19:39.720 So I'm going to highlight all of this right click Collapse two function and this one will be set globe 19:39.720 --> 19:40.650 image. 19:41.250 --> 19:43.380 And now we have that function. 19:43.380 --> 19:49.200 And if we change our globe image, that's going to change it here for our widget. 19:49.320 --> 19:51.870 Now we do want some padding, don't we? 19:52.050 --> 19:56.370 So if I take my progress bar globe, get that? 19:56.400 --> 19:58.500 How are we going to set the padding? 19:58.500 --> 20:02.010 If we search for padding, we see set border padding. 20:02.750 --> 20:08.320 But if we look in the designer, we see this padding here is under slot overlay slot. 20:08.330 --> 20:16.820 So if I drag off and type in slot and we get slot as overlay slot, now we have the overlay slot object 20:16.820 --> 20:17.720 reference. 20:17.840 --> 20:23.600 And if we drag off of that and type padding, now we see that we can set the padding directly here and 20:23.600 --> 20:26.510 this is a margin structure. 20:26.510 --> 20:32.840 If we drag off and choose make margin, we'll make one of these structures and we have left, right, 20:32.870 --> 20:35.950 top and bottom, and we can set the padding here. 20:35.960 --> 20:43.550 So what I'd like to do is make these variables that we can set and then in child classes, we can override 20:43.550 --> 20:44.180 them if we want. 20:44.210 --> 20:47.180 Now what values do we want the defaults to be? 20:47.180 --> 20:50.900 Well, we can just set padding here to say five. 20:50.900 --> 20:52.010 Nope, that's not enough. 20:52.010 --> 20:53.390 We can set it to eight. 20:53.420 --> 20:54.650 Almost good enough. 20:54.650 --> 20:56.120 Let's do nine. 20:56.150 --> 21:00.800 Maybe set it to ten and I think ten is looking pretty decent. 21:00.800 --> 21:03.810 So ten is a good default value. 21:04.510 --> 21:10.930 So it's up to us if we want individual left, right, top and bottom, or if we just want one value 21:10.930 --> 21:14.410 to set them all to the same one really doesn't matter. 21:14.590 --> 21:17.140 For now, I'm going to use a single value. 21:17.140 --> 21:22.990 If in the future we decide we need these all for separate variables, we can do that. 21:22.990 --> 21:26.650 But for now I'm going to drag off of one of them left. 21:26.650 --> 21:31.690 I'm going to promote a variable and simply call this globe padding. 21:31.690 --> 21:33.310 It's the padding for our globe. 21:33.310 --> 21:41.290 I'm going to set its category down here to Globe Properties and I'm going to use globe padding for all 21:41.290 --> 21:45.280 four of our parameters for make margin. 21:45.280 --> 21:48.910 And that's going to be the margin that we use to set our padding. 21:49.120 --> 21:55.300 Now, hooking this up and compiling, we see, well, it looks like we have zero padding, right? 21:55.300 --> 21:58.180 That's because globe padding has a value of zero. 21:58.180 --> 22:02.980 But if we set it up to ten and compile and look, there we go. 22:02.980 --> 22:04.760 We have a padding of ten. 22:04.760 --> 22:08.180 So now we have a parameter to set our padding. 22:08.180 --> 22:15.590 So let's go ahead and collapse this to a function and call this update globe padding. 22:16.130 --> 22:22.190 And since all of these are called update except for set globe image, I'm going to change this to actually 22:22.190 --> 22:24.080 update globe image. 22:24.610 --> 22:29.000 So we're consistent and we have our update functions being called here. 22:29.020 --> 22:31.690 Now, these are for before the game starts, right? 22:31.690 --> 22:38.590 So this is just all for configuring how this is supposed to look as we're building our widgets, right? 22:38.590 --> 22:42.700 It's not really for changing at runtime or anything like that. 22:43.210 --> 22:43.780 Okay. 22:43.780 --> 22:45.460 So that's almost everything. 22:45.460 --> 22:54.010 There's one last thing I'd like to do, and that is that when our globe is getting low, when our percentage 22:54.040 --> 23:02.770 is dropping for our progress bar, I'd like there to be a sort of glare, a bit of a glass reflection. 23:02.770 --> 23:06.880 So it looks like we have an actual glass globe here. 23:06.970 --> 23:11.260 So that's essentially going to be an empty globe material. 23:11.260 --> 23:15.700 For that, I'm going to drag in another image onto my overlay route. 23:15.700 --> 23:20.710 I'm going to rename this to Image Underscore glass. 23:20.710 --> 23:23.770 We'll just call it glass for lack of a better name. 23:23.770 --> 23:30.740 And I'm going to set horizontal and vertical alignment to fill and we're going to set that image. 23:30.740 --> 23:33.470 So let's go back into our event graph. 23:33.470 --> 23:36.470 We actually need to check is variable, right? 23:36.470 --> 23:39.650 And come back in here and compile. 23:39.650 --> 23:41.990 And then we have our image glass. 23:41.990 --> 23:43.280 Let's drag that out. 23:43.280 --> 23:48.440 And just like we did with our update globe image, right? 23:48.440 --> 23:52.640 Remember, we had to have a slate structure. 23:52.640 --> 24:00.560 We're going to want a slate variable to update our image glass and we're going to call set brush. 24:00.800 --> 24:07.010 So calling, set brush and we'll make a variable for that brush for the glass. 24:07.010 --> 24:13.730 So I'm going to click plus call this glass brush without typos. 24:13.730 --> 24:17.390 I'm going to remove that typo and it's a slate brush. 24:17.390 --> 24:20.900 I'm going to hit compile so I can give it a default value. 24:20.930 --> 24:23.870 We'll get an error because I don't have anything plugged in there. 24:23.870 --> 24:25.190 We'll fix that shortly. 24:25.190 --> 24:34.400 But for Glass Brush, there exists a material instance in this project called My Empty Globe. 24:34.730 --> 24:42.290 I'm going to choose that and I'm going to drag in glass brush, get it and set our brush. 24:42.290 --> 24:47.960 And I'm also going to set this glass brush category to globe properties. 24:47.960 --> 24:49.670 So it's in there with my variables. 24:49.670 --> 24:55.820 I'm going to compile, go back to designer and there's the glass brush and I can really see it if I 24:55.850 --> 25:02.900 select my progress bar and drag that progress percent down, you'll see that there's the glass brush 25:02.900 --> 25:06.850 and we kind of want that to have some padding as well, don't we? 25:06.860 --> 25:13.130 So let's take that image glass and experiment with padding values. 25:13.130 --> 25:14.420 I'm going to hit a five. 25:14.450 --> 25:15.560 Seems a little low. 25:15.560 --> 25:16.040 Let's try. 25:16.070 --> 25:17.840 Eight is a little too high. 25:18.080 --> 25:19.820 Six looks pretty good. 25:19.850 --> 25:23.630 Maybe five is actually pretty good as well. 25:23.630 --> 25:28.580 If I drag that percent up, I want these to overlay with each other. 25:28.580 --> 25:36.500 I don't want to see a sort of trail or ghost image, so I'm going to actually try a value of four, 25:36.620 --> 25:39.230 six, seven, eight. 25:39.230 --> 25:42.800 I think eight looks good, maybe even nine. 25:42.830 --> 25:44.780 Maybe it is ten, maybe ten. 25:44.810 --> 25:46.100 Yeah, ten is going to be it. 25:46.100 --> 25:47.960 So ten is going to work. 25:47.960 --> 25:54.230 So image, glass padding, ten we're going to create a variable for that. 25:54.230 --> 26:00.410 So we're going to take our image glass and we're going to do what we did for the padding. 26:00.440 --> 26:02.060 Update globe padding here. 26:02.090 --> 26:07.310 We're going to get the slot as overlay slot and call set padding. 26:07.490 --> 26:12.920 So take image glass, drag off slot as overlay slot. 26:13.670 --> 26:15.830 And we're going to call set padding. 26:16.040 --> 26:23.090 We're going to take in padding, drag off, make margin, and we're going to make a new variable for 26:23.090 --> 26:24.230 our padding. 26:24.230 --> 26:28.410 And it looks like actually we're using ten for both of these. 26:28.430 --> 26:31.880 For now, I'm just going to use the same globe padding. 26:32.850 --> 26:39.810 And later, if we make a child that uses a different material and for some reason we need a different 26:39.840 --> 26:43.260 globe padding for the glass, we can change it then. 26:43.260 --> 26:45.870 But for now it looks like we can use the same one. 26:46.020 --> 26:48.300 So that's going to look good. 26:48.300 --> 26:51.120 We can compile and look. 26:51.120 --> 26:52.050 It's looking good. 26:52.050 --> 26:55.290 And as we drag that percent down for the globe. 26:56.230 --> 26:57.820 Then we still have. 26:58.870 --> 27:06.100 That sort of glass look and it's a little heavy, which means I might want it to have a bit less of 27:06.100 --> 27:06.970 an alpha. 27:07.240 --> 27:13.390 I might want the alpha to be turned down a little, which means I can take my fill color and opacity 27:13.390 --> 27:15.670 and bring it down a bit. 27:15.700 --> 27:16.960 Actually, not this one. 27:16.960 --> 27:19.630 This is the progress bar I want to get. 27:19.630 --> 27:21.070 Image, glass. 27:21.100 --> 27:28.930 And for this image I want to take color and opacity and bring that opacity down to about 0.5. 27:29.200 --> 27:32.980 Now, if I want in the future, this could be a overrideable parameter. 27:32.980 --> 27:40.120 For now, I'm just going to set it to 0.5 like this and just experiment with our percent bar and see 27:40.120 --> 27:41.830 that that looks pretty good. 27:42.850 --> 27:43.570 Okay. 27:43.570 --> 27:44.860 So last things last. 27:44.890 --> 27:53.410 We're going to take our set brush and collapse this into a function and call this update glass brush 27:54.130 --> 27:57.910 and we're going to collapse this one into a function. 27:58.790 --> 28:02.150 And call this update glass padding. 28:02.150 --> 28:09.470 And now all of our functions are nice and tidy for our globe Progress bar. 28:09.470 --> 28:15.830 And this is great because now we can make child blueprints based on this and all we have to do if we 28:15.830 --> 28:22.280 want to change its size or its images, its progress, bars, the materials, all that good stuff. 28:22.280 --> 28:24.830 Those are parameters that we can change. 28:24.830 --> 28:31.400 So in the next video, we'll go ahead and make our actual health and mana progress bars based on this 28:31.400 --> 28:35.300 parent class and we'll see how easy it is to inherit those. 28:35.390 --> 28:37.790 So great job and I'll see you soon.