WEBVTT 00:06.920 --> 00:08.240 Welcome back. 00:08.270 --> 00:14.640 Now that we have this WPP Globe Progress Bar, we're just going to be a base class. 00:14.660 --> 00:20.180 We can make a health progress bar or health globe based on this. 00:20.330 --> 00:21.710 So I'd like to do that. 00:21.710 --> 00:31.880 I'm going to go into our blueprints folder, into UI and Progress Bar, and we have our Globe Progress 00:31.880 --> 00:33.560 Bar Widget Blueprint. 00:33.590 --> 00:41.180 Now, if we don't want to be confused, we could just call this globe base or something with base in 00:41.180 --> 00:42.980 the name if you want to do that. 00:43.160 --> 00:45.510 So if you want to rename it, go ahead. 00:45.530 --> 00:46.910 I'm fine with it. 00:47.210 --> 00:53.300 What I'm going to do, though, is go to user interface, make a new widget blueprint and choose my 00:54.140 --> 00:58.520 globe Progress bar as the parent and click Select. 00:58.730 --> 01:03.230 And this will be WPP, Underscore Health Globe. 01:04.520 --> 01:09.580 And I'm going to open Health Globe and I'm going to change some properties on it. 01:09.600 --> 01:13.770 Now, the only thing I really care about changing is making this red. 01:13.770 --> 01:16.440 So I'm going to go to the graph tab. 01:16.680 --> 01:18.630 I don't see my variables. 01:18.630 --> 01:24.750 That's because I want to click on the gear icon and show inherited variables. 01:24.900 --> 01:31.380 As soon as I do that, I now have a dropdown that I can expand and I can expand globe properties. 01:31.380 --> 01:35.090 Remember, we put all those variables into globe properties. 01:35.100 --> 01:36.150 That's really useful. 01:36.150 --> 01:41.610 Now we can change them and I'm going to change my progress bar fill image by selecting it. 01:41.610 --> 01:49.470 And in the details panel scrolling down and changing the image from my manage globe to my health globe. 01:49.500 --> 01:50.820 Now this is really cool. 01:50.820 --> 01:55.470 If I go back to designer, I see that it's automatically changed because when we change something, 01:55.470 --> 01:57.660 it kicks off that function. 01:57.660 --> 01:59.120 What was the function again? 01:59.130 --> 02:00.510 Pop quiz for you. 02:00.540 --> 02:02.550 Event pre construct. 02:02.550 --> 02:04.860 That's a lot like the construction script. 02:04.860 --> 02:07.380 So it kicks off whenever you change something. 02:07.380 --> 02:09.810 We just changed that property. 02:09.990 --> 02:14.340 Okay, so now we set this to 256 by 256. 02:14.340 --> 02:20.550 I might be wrong, but if I go back to the base class and look at box width and box height, it's actually 02:20.550 --> 02:22.440 250, not 256. 02:22.440 --> 02:26.310 But regardless, I want to see how big that looks on the screen. 02:26.310 --> 02:35.040 So I'd like to add this widget to an overlay, some kind of overall widget to fill the whole screen. 02:35.580 --> 02:37.410 I usually call those overlays. 02:37.410 --> 02:40.170 I'm going to make an overlay for Aura. 02:40.170 --> 02:48.720 So here in our UI under Progress bar, I'm going to go one level out and make a new folder for the overlay. 02:48.840 --> 02:51.660 So I'll call this overlay. 02:52.140 --> 02:55.830 And here in overlay I'm going to make a new widget blueprint. 02:55.830 --> 03:00.660 So user interface widget blueprint, and I'm going to choose Aura user widget. 03:00.660 --> 03:04.100 I'm going to base all my widgets on aura user widget. 03:04.110 --> 03:07.800 That way they can all have widget controllers, which will assign soon enough. 03:07.800 --> 03:12.600 But I'm going to call this WP underscore overlay. 03:12.630 --> 03:18.690 The overlay is the overall widget we'll see on the screen and it's going to contain a bunch of little 03:18.690 --> 03:20.280 widgets inside of it. 03:20.280 --> 03:25.980 So for that reason I'm going to open overlay and add a canvas panel to it. 03:26.010 --> 03:29.760 Now in general, you want to be pretty sparing with your canvas panels. 03:29.760 --> 03:32.220 The canvas panel is more expensive. 03:32.250 --> 03:36.270 That's why for my globe, I did not add a canvas panel. 03:36.270 --> 03:40.100 Instead, I used a size box and an overlay. 03:40.110 --> 03:47.040 These are a lot more efficient, but we're only going to have one overall overlay widget for the whole 03:47.040 --> 03:47.820 screen. 03:47.820 --> 03:52.620 And for that reason I want to be able to set things by dragging them around. 03:52.620 --> 03:54.900 And to do that we use a canvas panel. 03:55.170 --> 04:00.360 Now I'd like to add my health globe to this, so I'm going to search the palette for Health Globe. 04:00.360 --> 04:02.970 And there's my WP Health Globe. 04:02.970 --> 04:06.060 I'm going to drag it out and put it right about there. 04:06.060 --> 04:08.760 So we'll place it just about right there. 04:08.910 --> 04:10.530 I'll compile and save. 04:10.530 --> 04:11.790 And why not? 04:11.790 --> 04:14.820 I'm going to anchor it to the bottom middle. 04:14.820 --> 04:22.570 So with my WP Health globe selected, I'll go to anchors and choose the bottom center right there. 04:22.590 --> 04:26.160 Now, I can go ahead and see what this looks like on the screen. 04:26.160 --> 04:32.280 Now, just to quickly add this to the screen to see what it looks like, I'm going to go into my level 04:32.310 --> 04:37.140 blueprint, opening this dropdown, going to level blueprint. 04:37.200 --> 04:43.500 I can add this WP overlay to the screen first by using Create widget. 04:44.280 --> 04:47.700 And selecting WPP Overlay. 04:48.610 --> 04:54.970 I can hook that up and take the return value and use add to viewport just to see what it looks like 04:54.970 --> 04:55.690 on the screen. 04:55.690 --> 04:57.020 So I'll compile. 04:57.040 --> 05:00.610 I'll save all before doing anything else and press play. 05:00.640 --> 05:05.770 And there's the health globe and I'd say that's a pretty decent size for the health globe. 05:05.770 --> 05:06.700 So it's looking good. 05:06.700 --> 05:12.610 If it looks too big or too small, well, we made the size a parameter and of course we could just go 05:12.610 --> 05:18.340 into the overlay and click and drag to resize it manually and we can always do that. 05:18.340 --> 05:23.410 But remember, resizing things might make things less compatible. 05:23.410 --> 05:30.160 For example, making it small means that, well, now this needs the padding to change a little bit, 05:30.160 --> 05:38.290 so then you'd have to go in and change the variable for the padding here, go into WP Health, take 05:38.290 --> 05:43.600 the padding here, globe padding and maybe set it to five. 05:44.720 --> 05:47.190 And here in overlay, we see that it's better. 05:47.210 --> 05:55.370 Now, we could also go into the base class and open the eye icon, make these all editable here, compile 05:55.370 --> 05:56.000 that. 05:56.000 --> 06:01.550 And now in the overlay with our health globe selected, we can search for globe properties. 06:01.550 --> 06:03.620 And here's our globe padding. 06:03.620 --> 06:09.740 We can increase it, decrease it, whatever we want until it looks great. 06:09.740 --> 06:14.180 And of course, we are using the same padding for that glass as well. 06:14.180 --> 06:15.410 So keep that in mind. 06:15.410 --> 06:23.900 The glass, that empty glass material is changing because it uses that same globe padding, but that's 06:23.900 --> 06:32.060 going to allow us to resize it very easily and we have access to those variables that we can easily 06:32.060 --> 06:32.690 change. 06:32.900 --> 06:36.290 So we know that we can change things if we want to. 06:36.290 --> 06:40.490 And then of course we can play test and see that looks a little too small. 06:40.490 --> 06:46.650 So, you know, obviously that's just for example purposes, but I'm going to go ahead and just delete 06:46.650 --> 06:52.560 that and make sure my health globe itself has the width and height that I want. 06:52.590 --> 06:59.070 I'm okay with 250 for the height and width and for the globe padding. 06:59.070 --> 07:04.770 I'm going to keep it at ten and we'll just use that size for the health globe. 07:04.770 --> 07:10.950 I think that's a pretty good size and I can see what it looks like in full screen mode by pressing play 07:10.950 --> 07:14.700 and hitting F11 to full screen it. 07:14.700 --> 07:16.410 And I'm happy with that. 07:17.480 --> 07:19.040 Okay, great. 07:19.690 --> 07:28.660 So now I have a WPP Health globe and it's just as easy to derive a child Blueprint class from WPP Globe 07:28.660 --> 07:31.210 Progress Bar for Manna. 07:31.480 --> 07:34.360 And that's going to be your quest. 07:34.570 --> 07:38.330 So I'd like you to make a WPP Manna Globe. 07:38.350 --> 07:45.220 Remember, you're going to inherit from our base Globe Widget Blueprint class, and you're going to 07:45.220 --> 07:47.590 obviously change it to look like manna. 07:47.590 --> 07:52.450 So set the progress bar material to the blue one so it looks like manna. 07:52.450 --> 07:57.940 And add this to the WPP overlay and play test to see what it looks like. 07:57.940 --> 08:01.930 So pause the video and make your manna globe now. 08:05.210 --> 08:08.180 Okay, so we have our health globe. 08:08.180 --> 08:10.190 We need a man, a globe now. 08:10.310 --> 08:19.040 So I'm going to right click here and create a new widget blueprint and base this on our base Globe Progress 08:19.040 --> 08:19.430 Bar. 08:19.430 --> 08:24.560 I'm going to select that and call this WP Mana Globe. 08:24.560 --> 08:31.700 And really, we don't have to change anything because it's default value is already this blue material, 08:31.700 --> 08:32.090 right? 08:32.090 --> 08:36.380 So we just need to add this to the overlay so we can do that. 08:36.380 --> 08:39.740 We can find our mana globe here. 08:43.010 --> 08:49.520 Drag one in, and I'd like it to be at the same sort of elevation as the health globe. 08:49.520 --> 08:57.470 So first I'm going to actually go ahead and set its anchoring so it's anchored to the bottom middle 08:57.470 --> 09:04.400 and then I'll select my health globe, which should be anchored to the bottom middle as well and copy 09:04.400 --> 09:05.060 its position. 09:05.060 --> 09:05.720 Why? 09:06.310 --> 09:14.170 And select the blue one paste for position y and now they're at the same elevation. 09:14.170 --> 09:18.520 They're not at the exact same distance from the middle, but that's fine. 09:18.790 --> 09:24.550 We're going to be making a widget to contain both of these anyway in the future. 09:24.550 --> 09:27.180 For now I just want to see them both on the screen. 09:27.190 --> 09:33.670 I'm going to compile and save and press play and there are my two globes and they look good. 09:33.700 --> 09:37.150 They look great, so that's perfect. 09:37.360 --> 09:44.470 So we've now seen the power of creating a base widget blueprint with variables that we can inherit and 09:44.470 --> 09:51.130 child classes and set them so that we can easily change things without duplicating our work and making 09:51.130 --> 09:55.510 multiple widgets that all look similar with just minor changes. 09:55.510 --> 09:57.940 This is an easier way to do it. 09:58.480 --> 09:59.680 All right, great. 09:59.680 --> 10:09.170 So now at this point in time, we're adding the overlay to the screen in our level blueprint, and we 10:09.170 --> 10:13.850 know that our widgets have a widget controller variable that's not even being set. 10:13.880 --> 10:16.130 We're never actually creating one of those. 10:16.130 --> 10:21.620 But we'd like to drive these health and mana variables from our widget controller, which is going to 10:21.620 --> 10:24.770 get the data from the ability system. 10:25.100 --> 10:30.290 So we're going to want to create that widget controller somewhere some way. 10:30.290 --> 10:35.060 And in the next video we're going to decide when and where to do that. 10:35.060 --> 10:36.380 So we'll do that next. 10:36.410 --> 10:37.360 Great job. 10:37.370 --> 10:38.450 I'll see you soon.