WEBVTT 00:06.820 --> 00:07.930 Welcome back. 00:08.080 --> 00:12.470 So we have a whole lot of boxes and they're just waiting for some globes. 00:12.490 --> 00:16.760 Now, that's how I'd like to show my spells is with spell globes. 00:16.780 --> 00:21.490 Basically, what looks like are health and mana globes will have rings. 00:21.490 --> 00:29.080 But instead of showing health and mana, I'd like to show a spell icon, for example, and then we can 00:29.080 --> 00:36.400 have this really cool, cloudy effect with different colors corresponding to the different spell categories 00:36.400 --> 00:43.450 as I'd like my spells to be in categories with our fireball being in the fire category and so on. 00:43.570 --> 00:48.970 So let's get started making our globe for spell icons. 00:49.210 --> 00:57.220 Now this will be similar to our Progress bars, but our progress bar widget has a progress bar in it, 00:57.220 --> 01:00.760 and I don't really want a progress bar in my spell. 01:00.760 --> 01:01.270 Icon. 01:01.270 --> 01:07.160 You could perhaps you could fill it up as a way of showing how much time is left on the cooldown as 01:07.160 --> 01:08.930 we will be implementing that. 01:08.930 --> 01:15.290 But I'm going to show the cooldown time as a number, so there will be significant differences between 01:15.290 --> 01:18.620 our progress globes and our spell globes. 01:18.620 --> 01:22.310 So we're going to make a completely different widget for that. 01:22.340 --> 01:27.230 So I'm going to make a new folder in UI called spell Globes. 01:29.820 --> 01:33.000 And let's make our base class for our spell globe. 01:33.000 --> 01:41.580 So I'm going to create a widget blueprint based on or a user widget and call this WB P spell globe and 01:41.580 --> 01:43.380 we'll go ahead and open that up. 01:43.710 --> 01:46.650 Now the spell globe is going to get a size box. 01:46.650 --> 01:52.920 I'd like to be able to change the size so we'll call this size box underscore root. 01:55.080 --> 02:00.750 And we're going to go ahead and change from fill screen to desired. 02:00.750 --> 02:05.010 And that way we can set the desired size for our size box. 02:05.040 --> 02:09.240 Now I'm going to start it off at a width and height of 100. 02:09.240 --> 02:17.940 And rather than just putting 100in here and here, what I could do is do similar to what I've done with 02:17.940 --> 02:22.080 our other widgets such as our progress globes. 02:22.140 --> 02:23.670 Let's just look at that. 02:23.700 --> 02:26.010 We created some functions. 02:26.100 --> 02:31.980 If I go to the event graph to update the sizes and we're using pre construct for that. 02:32.040 --> 02:38.100 So I'm going to use update box size, basically the same thing that we did here I'm going to do in the 02:38.100 --> 02:39.020 spell globe. 02:39.030 --> 02:43.170 So I'm going to make sure size box root is variable. 02:43.170 --> 02:49.020 So check that check box and come back to the graph and add two variables. 02:49.110 --> 02:54.430 And just like our Globe Progress Bar, I'm going to put these in globe properties. 02:55.790 --> 02:58.040 We're going to have a box with and a box height. 02:58.040 --> 03:03.440 So here in Spell Globe, I'm going to make a new variable called box width. 03:04.290 --> 03:06.090 It's going to be afloat. 03:06.120 --> 03:08.880 It's going to get its category set. 03:10.030 --> 03:19.480 And we'll just call it Globe Properties and we'll get another float called Box Height. 03:19.510 --> 03:22.520 It's also going into Globe Properties. 03:22.540 --> 03:29.530 I'm going to compile so I can give these both defaults and they'll be 101 hundred. 03:30.140 --> 03:35.150 And now that we have these, we're going to use event pre construct to set them. 03:35.150 --> 03:41.090 We're going to take our size box route and call set width override. 03:41.710 --> 03:44.950 And we're also going to call set height override. 03:48.890 --> 03:50.390 So we'll hook these up. 03:52.810 --> 03:56.680 Like so and we'll bring in box with. 03:57.900 --> 04:02.040 For a set width override and box height for set height override. 04:02.040 --> 04:09.990 And we'll highlight both of these, collapse them to a function and call this update box size. 04:10.020 --> 04:12.810 Okay, so that takes care of the box. 04:12.930 --> 04:22.200 Now we're going to want a few brushes here and we have some brushes If we go to our content assets folder 04:22.200 --> 04:27.380 and go to UI, we have a rings folder and we have globe ring. 04:27.390 --> 04:33.480 These are the big rings that we're using for health and mana and we have skill ring and there are a 04:33.480 --> 04:36.330 few variations of the skill ring here. 04:36.330 --> 04:38.130 We can see skill ring one. 04:38.160 --> 04:41.640 We got a crack on the right and a crack on the top left. 04:41.670 --> 04:43.440 Here's skill ring two. 04:43.470 --> 04:49.280 There's only a crack down there at the bottom left skill ring one A is different and skill ring two 04:49.320 --> 04:51.030 A is also different. 04:51.030 --> 04:56.430 So we have some pretty nice looking skill rings that we can use. 04:56.730 --> 05:02.380 So what I want is an image for the ring and an image for the glass. 05:02.380 --> 05:09.100 Just like our progress bar has image glass and the image background is our ring. 05:09.100 --> 05:16.360 So I'm going to go back to spell globe and we'll add two images and to add two images on top of each 05:16.360 --> 05:16.600 other. 05:16.600 --> 05:18.190 That means we need an overlay. 05:18.220 --> 05:20.130 So first we'll get an overlay. 05:20.140 --> 05:24.280 We'll call this overlay root and on to the overlay. 05:24.280 --> 05:26.580 We're going to get a couple of images. 05:26.590 --> 05:29.080 There's one, there's two. 05:29.110 --> 05:34.450 Now the one in front can be the ring and the one in back can be the glass. 05:34.450 --> 05:36.220 So I'm going to call the first one. 05:36.220 --> 05:42.580 I'm just going to look at my Globe Progress bar and use the same naming conventions so we're consistent. 05:42.580 --> 05:49.270 So first we'll have glass and the other one is going to be Image, and we're calling it image background. 05:49.270 --> 05:51.940 But I actually brought it to the foreground, didn't I? 05:51.970 --> 05:52.960 That's fine. 05:52.960 --> 05:56.380 I'm going to call it Image Background and Globe Progress Bar. 05:56.380 --> 06:02.650 But here I'm going to call it actually image border or even this could just be image ring. 06:02.650 --> 06:03.190 That's okay. 06:03.190 --> 06:09.190 If it's even more specific like that they're both going to be is variable checked both of them and we're 06:09.190 --> 06:13.240 going to set them both to fill horizontally and vertically. 06:13.240 --> 06:16.510 And let's go ahead and give these their brushes now. 06:16.510 --> 06:22.420 I'm going to go straight for the graph and create those functions for setting them as we have those 06:22.420 --> 06:23.140 functions. 06:23.140 --> 06:31.720 Update background brush, update, globe brush, and these have our background brush variable and our 06:31.750 --> 06:35.500 globe brush variable, which we called Progress Bar brush. 06:35.500 --> 06:37.660 We're going to do something similar here. 06:37.690 --> 06:42.220 It's going to be a little more simple though, as we don't have progress bars to worry about. 06:42.310 --> 06:45.730 So I'm going to add a couple of variables which are brushes. 06:46.220 --> 06:47.900 Just like we have here. 06:48.320 --> 06:51.380 And remember, these are slate brush structures. 06:51.380 --> 06:54.860 So back in Spell globe, let's add a couple more variables. 06:54.860 --> 06:58.280 In globe properties add variable. 06:58.280 --> 07:05.360 We're going to call this first one, I'll call it ring brush and put this in the category. 07:06.700 --> 07:07.990 Globe properties. 07:08.980 --> 07:12.880 And ring brush is going to be a slate brush. 07:14.890 --> 07:18.730 We're going to compile that and give it a default brush. 07:18.940 --> 07:22.720 So the image is going to be one of our rings. 07:22.900 --> 07:31.420 And I'm just going to choose skill Ring one and we'll go ahead and set our image ring. 07:32.100 --> 07:33.840 We're going to call set brush on it. 07:35.790 --> 07:37.380 And we're going to use ring brush. 07:38.740 --> 07:39.850 We'll hook that up. 07:39.850 --> 07:45.820 We'll collapse to a function and call this update ring brush. 07:47.450 --> 07:49.220 And back in our designer. 07:49.220 --> 07:51.680 If we compile, we can see the ring. 07:51.680 --> 07:53.180 So that looks nice. 07:53.390 --> 07:55.700 Let's do the same thing for the glass. 07:55.700 --> 08:00.200 Actually, the glass I don't think needs to be a variable. 08:00.200 --> 08:02.240 I think I'm just going to set it directly. 08:02.240 --> 08:08.690 And if I just take a look at my image glass here, it's my empty globe. 08:08.810 --> 08:12.230 I'm going to browse to that, then come over here and set it. 08:12.230 --> 08:15.140 And of course we're going to need some padding here. 08:15.140 --> 08:23.150 Now, the padding itself should be a parameter because as the size of our entire widget changes, then 08:23.150 --> 08:25.760 that padding is going to need to change as well. 08:26.210 --> 08:31.790 So I'm going to go into the event graph and take our image ring. 08:32.360 --> 08:34.220 And we want to set the padding. 08:34.220 --> 08:38.300 Let's go back to Globe Progress Bar and remind ourselves how we did that. 08:38.480 --> 08:43.100 Here we have update globe padding and we took our globe. 08:43.130 --> 08:46.990 We got slot as overlay slot and called set padding on it. 08:47.000 --> 08:49.030 So that's how we're going to do this. 08:49.040 --> 08:52.550 So we're going to use slot as overlay slot. 08:53.570 --> 08:55.550 We're going to call set padding on that. 08:58.660 --> 09:07.270 We're going to make a margin structure and we're going to promote one of these to a variable called 09:07.270 --> 09:08.920 glass padding. 09:09.910 --> 09:14.470 And the glass padding will go ahead and adjust it until it looks right. 09:14.770 --> 09:17.800 And we have our set padding function. 09:17.800 --> 09:20.110 We're going to collapse these nodes. 09:24.280 --> 09:25.510 To a function. 09:25.510 --> 09:31.420 And actually I'm going to undo that because I want glass padding inside the function here. 09:37.490 --> 09:42.920 And this will be update glass padding. 09:45.520 --> 09:50.980 Now, before calling this, I'm going to disconnect it and come back into the designer and play with 09:50.980 --> 09:53.500 the padding until I get something that looks good. 09:53.680 --> 10:00.230 So just hitting numbers four, five, six and so on until I like what I see. 10:00.250 --> 10:06.640 So it's kind of a matter of preference here, but I think ten is too much. 10:07.690 --> 10:08.790 Eight is okay. 10:08.800 --> 10:09.580 Seven. 10:09.580 --> 10:11.080 Six looks pretty good. 10:12.020 --> 10:14.360 Just as long as it looks like glass. 10:14.840 --> 10:17.690 I think seven is actually a pretty good value. 10:17.870 --> 10:21.290 So for that reason, I'm going to come back into glow padding. 10:21.320 --> 10:24.020 Give it a default value of seven. 10:24.320 --> 10:25.040 Oh, whoops. 10:25.040 --> 10:26.720 That is not what I meant to do. 10:26.750 --> 10:28.730 We're in glow progress bar here. 10:28.730 --> 10:34.280 I meant to go to spell globe in the graph and we're going to use seven. 10:35.120 --> 10:39.830 For the glass padding, so giving it a default value. 10:41.160 --> 10:47.750 If I hit compile of seven and we'll go ahead and stick this in glow properties as well. 10:47.760 --> 10:53.550 And if we go ahead and hook that up now, we should see and something doesn't look right. 10:53.550 --> 10:55.560 So let me go back and see. 10:55.560 --> 10:57.840 And it looks like I used my image ring. 10:57.840 --> 11:00.660 I should have used my image glass. 11:01.290 --> 11:05.280 Instead, we're going to set the padding on the glass, not the ring. 11:05.280 --> 11:07.320 So let's go back and compile. 11:07.320 --> 11:08.190 And there we go. 11:08.190 --> 11:09.000 That's better. 11:09.620 --> 11:10.160 Cool. 11:10.160 --> 11:12.590 So this is looking pretty good. 11:12.620 --> 11:14.470 Now, this isn't the only thing I want. 11:14.480 --> 11:22.880 I also want a background color brush and not just a color, but some flowing material, kind of like 11:22.880 --> 11:24.530 our Globe progress bar. 11:24.530 --> 11:26.870 But it's not going to be a progress bar. 11:26.870 --> 11:28.250 It's just going to be an image. 11:28.250 --> 11:34.520 So I'm going to bring in an image here and I'm going to make sure the image is behind everything else, 11:34.520 --> 11:40.670 including the glass, and I'll go ahead and fill it and we can set this and. 11:41.830 --> 11:48.040 Back here in UI globes, we have some other material instances such as fire skill BG. 11:48.670 --> 11:50.980 I'm going to set that for my image. 11:52.990 --> 11:56.380 And here's what fire skill BG looks like. 11:56.620 --> 12:03.190 Now I think this should have its padding set and I'm just going to set it to the same padding as our 12:03.190 --> 12:04.030 glass. 12:04.030 --> 12:10.300 So instead of update glass padding, perhaps we could call this function update glow padding. 12:12.490 --> 12:15.310 And I'm going to take that new image. 12:15.310 --> 12:17.650 I'm going to call it image underscore. 12:17.650 --> 12:22.510 Background check is variable and bring it in here. 12:22.540 --> 12:28.210 Get slot as overlay slot and we're going to call set padding on it. 12:32.370 --> 12:37.630 And we're going to use the same padding that we're using for the glass. 12:37.630 --> 12:43.020 So I'm just going to hook that straight in right there and compile. 12:43.020 --> 12:47.760 And that's going to look better as this material has darkness around the edges here. 12:48.510 --> 12:55.560 And if you feel like this should be a different padding, for example, you might want to change this 12:55.560 --> 12:56.580 a little bit. 12:56.670 --> 13:01.140 You can experiment with it, but I think the same padding is going to be fine. 13:01.710 --> 13:03.900 Okay, so this is looking pretty good. 13:03.930 --> 13:11.280 Now, in addition to a background image, I'm also going to want an icon image for the spell. 13:11.490 --> 13:16.850 So this would go in front of the background, but behind the ring in the glass. 13:16.860 --> 13:19.770 So I'm going to get another image in here. 13:20.280 --> 13:25.050 I'm going to drag it on top, but I'm going to drag it behind the glass in the ring but in front of 13:25.050 --> 13:26.190 the background. 13:26.280 --> 13:33.840 Set this to fill and I'd like to see what icons I have if I go into UI spells. 13:33.930 --> 13:38.740 There are some icons here and one of them is Firebolt and this is what it looks like. 13:38.760 --> 13:42.120 I'm going to use this, so I'm going to go back to my spell globe. 13:42.390 --> 13:50.950 Rename this image to image, underscore spell icon and set that to my firebolt. 13:50.980 --> 13:57.730 Now, this may or may not look better with padding as well, so if you want to play with the padding, 13:57.730 --> 14:00.070 you can make it bigger or smaller. 14:00.190 --> 14:02.780 I'm thinking that seven is looking pretty good. 14:02.800 --> 14:10.510 This may be something that we may wish to have our own padding for, but either case, I'm going to 14:10.510 --> 14:13.120 create a variable for the icon itself. 14:13.120 --> 14:14.770 So we'll have a brush for that. 14:14.770 --> 14:19.480 And for now, I'm going to set the padding to the same as the glass padding. 14:19.480 --> 14:28.090 So I'm going to use image spell icon slot as overlay slot call set padding on it, set padding and pass 14:28.090 --> 14:31.030 in that same padding structure there. 14:31.030 --> 14:32.830 So that way they're consistent. 14:32.830 --> 14:38.200 If we resize this for different spells and find we need a different padding, we'll handle that then. 14:38.200 --> 14:40.690 But for now that's how I'm going to handle it. 14:40.690 --> 14:43.540 And I'm also going to create a brush structure. 14:43.540 --> 14:52.560 So add variable and this will be our spell icon brush and we'll stick this in the category glow properties 14:52.560 --> 14:53.300 as well. 14:53.310 --> 14:57.210 We'll compile and we'll give it a default value. 14:57.210 --> 15:05.160 And I'm just going to select Firebolt that texture there and we'll go ahead and set that image spell 15:05.160 --> 15:06.030 icon. 15:06.450 --> 15:13.350 So we're going to call, set, brush and pass in spell icon brush and we'll go ahead and make this a 15:13.350 --> 15:20.730 function collapse the function called update spell icon brush and we'll call that. 15:23.490 --> 15:27.120 So now we have our spell icon. 15:27.120 --> 15:28.920 So this is really looking nice. 15:28.920 --> 15:34.200 Now, the last thing I'd like to add is cooldown text. 15:34.230 --> 15:40.080 When a spell is in cooldown and we're going to implement that soon, I'd like text here that we can 15:40.080 --> 15:46.260 use to show that cooldown amount so maybe we'll gray it out, make it look nice and dark, and while 15:46.260 --> 15:52.170 it's in cooldown, we'll be showing that time remaining until we can cast that spell again. 15:52.410 --> 15:58.170 For that reason, we're going to drag in text and this is going to go right here on top at the very 15:58.170 --> 15:58.860 bottom. 15:58.860 --> 16:02.370 And I'm going to call this text underscore cooldown. 16:03.030 --> 16:10.980 Check is variable and I'm going to go ahead and just set this to a number nine nine, for instance, 16:10.980 --> 16:15.540 or perhaps, let's see, 3.5. 16:15.720 --> 16:17.100 We'll see how that looks. 16:17.100 --> 16:20.610 And we definitely want to change the font. 16:20.790 --> 16:24.550 I'm okay with white for the font color, the font type though. 16:24.580 --> 16:27.690 I'm going to scroll down and use Pirata one. 16:27.700 --> 16:29.220 I'm okay with that font. 16:29.230 --> 16:37.930 I'm going to use the font size of 24, perhaps a little bit of letter spacing, maybe 70 outline size 16:37.930 --> 16:38.620 of one. 16:38.620 --> 16:45.280 I definitely think a black outline is important here and I'm going to choose horizontal alignment to 16:45.280 --> 16:51.310 center and vertical alignment to center like so there we go. 16:51.430 --> 16:58.840 Now we're going to want to make the background darker while we're in cooldown. 16:58.840 --> 17:02.410 So our image background has a tint, right? 17:02.410 --> 17:07.330 And if we turn that tint all the way down, we see that it looks nice and dark. 17:07.330 --> 17:14.680 So it'd be nice to have a handy function for adjusting or just setting directly that tint value. 17:15.210 --> 17:16.470 So how would we do that? 17:16.470 --> 17:18.660 Well, we would take that image background. 17:19.840 --> 17:26.260 And we can search for set tint and there's a set brush tint color and the tint color. 17:26.260 --> 17:29.890 If we make a slate color, we can choose a color. 17:30.370 --> 17:37.330 I'm going to choose all white, but notice we can make the value go down, say almost black there. 17:37.750 --> 17:40.360 Now what happens if we hook this up? 17:41.950 --> 17:43.060 And compile. 17:43.060 --> 17:44.950 We see that it's darker, right? 17:44.950 --> 17:53.320 So really we could make this color a tint value if we take the specified color and make linear color. 17:53.350 --> 17:55.000 What is the color? 17:55.000 --> 17:59.020 If I just take a look at this, I broke the pin connection there. 17:59.020 --> 18:05.950 If we drag saturation down, well, we see that red, green, blue are all one and as the value goes 18:05.950 --> 18:09.490 down, they all go down at the same time, right? 18:09.490 --> 18:17.170 So as long as we have the same value for all of them where all the way desaturated and we're changing 18:17.170 --> 18:20.470 the value from 1 to 0. 18:20.470 --> 18:28.870 So what we can do is we can make a function that takes in a single float value and makes a slate color 18:28.870 --> 18:34.090 with an alpha of one and a tint as an input. 18:34.120 --> 18:35.650 So I'm going to make a new function. 18:35.650 --> 18:41.050 I'm going to add a function called set background tint. 18:41.380 --> 18:43.460 It's going to take in a single float. 18:43.460 --> 18:48.380 So clicking plus will add a float called tint. 18:49.490 --> 18:53.540 And what it's going to do is what these nodes are doing here. 18:53.540 --> 19:03.170 So I'm going to control C to copy control V to paste and take our tint and plug it into red, green 19:03.170 --> 19:06.380 and blue, not alpha, because then that would set the alpha. 19:06.410 --> 19:12.860 So now we have this function that we can call and pass in a number between 0 and 1. 19:12.860 --> 19:14.990 So set background tint here. 19:14.990 --> 19:16.490 We can just test it out here. 19:16.490 --> 19:19.640 If we use zero, we should see black. 19:19.670 --> 19:23.240 If we use one, we should see. 19:23.920 --> 19:25.240 No darkness at all. 19:25.240 --> 19:26.470 So it's normal. 19:26.470 --> 19:34.660 And if we use a value between 0 and 1, then we see a darker background. 19:34.840 --> 19:40.750 So we can use this function to set the background tint when we're in cooldown mode. 19:40.870 --> 19:41.380 Okay. 19:41.380 --> 19:44.170 So that is I think enough for this video. 19:44.170 --> 19:53.080 We have a nice base class and by default the text cooldown can be empty and now we have something we 19:53.080 --> 19:56.020 can use in our health mana spells. 19:56.020 --> 20:00.160 We're going to tie this all together in the next couple videos. 20:00.160 --> 20:03.550 So great job and I'll see you in the next video.