WEBVTT 00:06.800 --> 00:07.740 Welcome. 00:07.760 --> 00:12.740 Now, the first thing we're going to work on for our spell menu are the Globes. 00:12.860 --> 00:20.630 Now, these appear to look the same as the other Globes we've made for our spells in our overlay, but 00:20.630 --> 00:21.950 they're actually not. 00:22.010 --> 00:26.450 These globes actually need to be buttons because we need to select them. 00:26.450 --> 00:30.110 We need to be able to click on them and have some sort of response. 00:30.110 --> 00:33.520 And our other Globes are not interactable in this way. 00:33.530 --> 00:38.630 So we need a different widget for our Globes in the Spell menu. 00:38.630 --> 00:44.660 And we'll go ahead and make a base class that we can extend for our Globes in the Spell menu. 00:44.660 --> 00:45.890 And we'll do that now. 00:46.040 --> 00:48.640 So the first thing we're going to do is make the globe. 00:48.650 --> 00:56.870 Now we do have spell globes and if we open up our spell globe widget blueprint, we'll see that we do 00:56.870 --> 00:59.900 have a number of things that we already want. 00:59.930 --> 01:07.650 However, Spell Globe has a number of things that we don't necessarily want, such as handling Cooldowns. 01:07.650 --> 01:12.360 We don't need to handle Cooldowns in our globes for the spell menu. 01:12.450 --> 01:18.660 But a lot of this work is already done and it would be pretty convenient to reuse it. 01:18.660 --> 01:21.870 But the widget is going to be different enough. 01:21.870 --> 01:28.140 I believe that I don't need to make use of inheritance, so I'm going to just duplicate spell globe. 01:29.650 --> 01:35.140 Our value globe is actually even more stripped out than the spell globe. 01:35.140 --> 01:40.030 So it may actually be a more appropriate globe to take and duplicate. 01:40.640 --> 01:44.840 So I think actually we'll duplicate the value globe and use this. 01:45.110 --> 01:51.590 So I'm going to right click on Value Globe and duplicate it. 01:51.710 --> 01:55.970 And this is going to be the spell globe for our spell tree. 01:56.530 --> 01:59.530 And this is ultimately going to have a button. 01:59.530 --> 02:07.120 So I'm going to call this WB underscore spell globe underscore button. 02:08.080 --> 02:10.750 So we have a button version of the spell globe. 02:10.900 --> 02:14.380 I'm going to close value Globe so we don't confuse the two together. 02:14.990 --> 02:22.270 Now spell globe button is not going to be showing a numerical value, so we don't need text here. 02:22.280 --> 02:24.380 I'm going to remove that. 02:24.380 --> 02:29.570 And in the event graph we don't need to listen to on player level change. 02:29.570 --> 02:31.600 So we're going to delete that as well. 02:31.610 --> 02:36.770 So anything in here that corresponds to that is unnecessary. 02:37.130 --> 02:44.030 Now I am going to let it set its widget controller in response to event widget controller set. 02:44.240 --> 02:50.450 So we'll leave that for now and we can update the box size, the ring brush, the glow padding, the 02:50.450 --> 02:51.920 background can be updated. 02:51.920 --> 02:53.570 I think all of that is fine. 02:53.870 --> 02:59.900 Now, by default, I don't think I want this image background that was great for showing the player 02:59.900 --> 03:09.680 level, but for this I'm going to use my locked BG and my locked BG is designed for a locked skill, 03:09.680 --> 03:13.160 but of course we're going to want to change this dynamically. 03:13.220 --> 03:19.860 Now if we come back into the event graph here, we have our update background and it's setting it to 03:19.860 --> 03:20.820 the background brush. 03:20.820 --> 03:24.000 So really it's the background brush that we need to change. 03:24.000 --> 03:28.410 So if I change that and compile, of course I'm getting a warning. 03:28.410 --> 03:32.100 We have functions that are using some things that we've deleted. 03:32.130 --> 03:37.320 We can go to those and we see that we're trying to use text value here in set cooldown. 03:37.320 --> 03:43.800 State Well, we don't have a cooldown to handle in this, so we can delete set cooldown state and compile 03:43.800 --> 03:44.430 this. 03:44.670 --> 03:50.580 Now we'll continue going through these errors and warnings and delete the things we don't need here. 03:50.580 --> 03:52.530 We have set default state. 03:52.620 --> 03:58.700 This is also used in conjunction with handling Cooldowns so we can delete set default state. 03:58.710 --> 03:59.850 It says it's in use. 03:59.850 --> 04:01.350 We're going to delete it anyway. 04:01.380 --> 04:03.300 We have hide cooldown, text. 04:03.300 --> 04:05.010 We're going to delete that as well. 04:05.690 --> 04:07.040 We're going to compile again. 04:07.040 --> 04:11.940 And now we should be able to see no more compiler errors. 04:11.960 --> 04:15.140 So here's what it looks like with that locked background. 04:15.740 --> 04:19.130 So we can go back and make sure none of these other functions are needed. 04:19.130 --> 04:24.140 We can update the box size, the ring brush, the globe, padding, the background tint. 04:24.140 --> 04:30.290 I don't think I need to set the background tint, but I suppose it's a useful function. 04:30.290 --> 04:33.080 If we need it, we'll keep it around. 04:33.260 --> 04:35.330 Clear globe again. 04:35.330 --> 04:38.630 Just setting the globe to a transparent brush. 04:38.660 --> 04:39.560 No harm done. 04:39.560 --> 04:46.730 Leaving that update background is something that we're using in event pre construct. 04:46.760 --> 04:51.710 We can keep that, but I don't like that space in the name here and update cooldown timer can go. 04:51.740 --> 04:52.880 We're not going to use that. 04:53.510 --> 04:58.160 Okay, so with that, we've stripped out things we don't need. 04:58.400 --> 05:05.930 Now, I'd like to use this in my spell menu for my offensive and passive spells, which means I'm going 05:05.930 --> 05:07.490 to want an icon here. 05:07.730 --> 05:15.350 The icon can simply be an image, so I'm going to drag an image onto my widget and set horizontal and 05:15.350 --> 05:17.110 vertical alignment to fill. 05:17.120 --> 05:20.180 And I need to give this image a default value. 05:20.180 --> 05:23.210 But the image itself is going to be changeable. 05:23.390 --> 05:25.640 So I'm going to make it a variable. 05:25.640 --> 05:33.170 So checking is variable and I'm going to rename this to image underscore icon, and I'm going to set 05:33.170 --> 05:34.280 a default icon. 05:34.280 --> 05:35.780 I'm going to search for lock. 05:36.350 --> 05:37.880 And choose locked. 05:37.910 --> 05:41.360 There's also a locked underscore, which is a little smaller. 05:41.360 --> 05:43.100 So I think I like that one. 05:43.220 --> 05:48.440 And here's what our icons will look like for spells that have not been unlocked yet. 05:48.650 --> 05:54.470 And of course, you know how to change material parameters if you want that background to look differently 05:54.470 --> 05:58.430 or if you want it to be a little bit less turbulent in the clouds. 05:58.640 --> 06:00.140 You know how to change that. 06:00.720 --> 06:02.400 So we have our icon. 06:03.120 --> 06:06.450 It's just going to get a default locked icon. 06:06.660 --> 06:12.030 And once a spell has been unlocked, we don't really need to set it back to locked again. 06:12.030 --> 06:15.380 So I don't think we need a brush variable for the locked icon. 06:15.390 --> 06:19.710 This will just be the default and we'll change it if we need to change it. 06:20.190 --> 06:25.680 Okay, so we have the makings for a basic spell globe, which it's supposed to be a button. 06:25.680 --> 06:29.370 So we need to figure out how we're going to handle that. 06:29.460 --> 06:36.180 Now a button can have a texture, and I don't think we should use our background or our glass for the 06:36.180 --> 06:37.800 texture, for the button. 06:37.800 --> 06:44.640 But if we chose to use the ring, we can change what the ring looks like when the button is hovered 06:44.640 --> 06:45.600 or clicked. 06:45.660 --> 06:52.170 So I think it would be a nice touch if the ring itself were the button component of this. 06:52.290 --> 06:59.040 Now I can take my ring and delete it and instead of using an image for the ring, I can use a button. 06:59.340 --> 07:00.350 That's what I'm going to do. 07:00.360 --> 07:01.740 I'm going to drag a button in. 07:02.350 --> 07:05.800 And set it horizontally and vertically to fill. 07:05.800 --> 07:12.190 And I'm going to rename this to button underscore ring. 07:12.310 --> 07:18.490 So our ring is going to be the button and I'm going to expand style and expand normal. 07:18.490 --> 07:25.750 And first thing I'm going to do is no longer draw this as a rounded box, but instead as an image. 07:26.260 --> 07:28.810 The rounded box tends to soften the edges. 07:28.810 --> 07:30.430 And I don't really like that. 07:30.610 --> 07:34.050 Now for the button ring for its normal image. 07:34.060 --> 07:40.810 If we search for ring, we have lots of rings in this project and I like skill ring one. 07:40.840 --> 07:47.440 Now of course there are skill ring two and skill ring one A These all look a little different, but 07:47.440 --> 07:53.350 I'm going to set it to skill ring one and I'm going to take my tint and bring its value all the way 07:53.350 --> 07:55.920 up to white so it's not tinted at all. 07:55.990 --> 07:58.940 So with draw as image, this looks pretty good. 07:58.960 --> 08:02.710 Now I'm going to set the style for hovered as well. 08:02.920 --> 08:10.240 Now for hovered, I'm going to set that tint up all the way to white and change draw as to image and 08:10.240 --> 08:11.410 for the image. 08:11.410 --> 08:17.260 If I search for skill ring underscore one underscore glow. 08:17.950 --> 08:21.940 Then we have this texture and we can see what it looks like by browsing to it. 08:21.970 --> 08:27.580 It's actually the same ring, but a little bit different in style. 08:27.610 --> 08:35.110 Notice it's a little bit brighter and the little scratches are dark, so it's kind of a cool alternative 08:35.110 --> 08:39.760 style if you really want to see what it looks like here, we could set it right here. 08:39.760 --> 08:43.150 I can search for Glow and set this to skill ring one glow. 08:43.180 --> 08:45.220 This is what it will look like when it's glowing. 08:46.580 --> 08:50.780 So I'll set that back to Skill ring one and now we have normal and hovered. 08:50.810 --> 08:56.860 Now for pressed, we can use the same one skill ring glow so I can browse to it. 08:56.870 --> 09:00.460 And then for pressed I can hit that left arrow. 09:00.470 --> 09:03.740 But if we press it, it should probably look a little different. 09:03.740 --> 09:04.070 Right? 09:04.070 --> 09:07.400 So we could change the tint by default. 09:07.400 --> 09:08.570 It's a little bit darker. 09:08.570 --> 09:09.920 Maybe we can leave it like that. 09:09.920 --> 09:13.590 But we do want to draw it as an image and not a rounded box. 09:13.610 --> 09:16.790 Now for disabled, I want it to just look normal. 09:16.790 --> 09:20.600 So I'm going to take my normal browse to that skill ring. 09:21.300 --> 09:28.890 And set that as my image for disabled, setting the tint all the way up and draw as image. 09:29.070 --> 09:32.730 So that way it doesn't really respond to hovering and clicking. 09:32.730 --> 09:35.790 It just stays as is when it's disabled. 09:35.880 --> 09:39.240 I don't really plan on disabling it, but that's set. 09:40.080 --> 09:42.360 So we have a basic button. 09:42.360 --> 09:43.380 It looks good. 09:43.530 --> 09:49.530 And there's one last thing I'd like to add, and that's an animation for when we select it in our menu. 09:49.560 --> 09:54.930 Yes, it's a button and has hovered and clicked events, but I'd like buttons to have a concept of being 09:54.930 --> 09:55.890 selected. 09:55.920 --> 10:02.730 So for that I'm going to have an animation that will animate a selection circle. 10:02.820 --> 10:06.840 Now that's going to be an image, so I'm going to drag yet another image on. 10:06.840 --> 10:08.910 It can be all the way at the bottom. 10:08.910 --> 10:14.940 I don't want it on my button, so I'm going to take it off the button and call this image underscore 10:14.940 --> 10:15.810 selection. 10:17.160 --> 10:21.090 I'm going to set it to fill horizontally and vertically. 10:21.390 --> 10:28.230 Now, it doesn't fill completely, but that's actually okay because I'm going to animate this image. 10:28.260 --> 10:34.410 Now, if I search for Circle for its image, we have a selection circle and this is what it looks like. 10:34.440 --> 10:41.190 I'm going to make this circle transparent or set its render opacity to zero by default. 10:41.190 --> 10:45.300 But until I do that, I'm going to go ahead and animate this circle. 10:45.300 --> 10:49.470 So I'm going to make a new animation called Select Animation. 10:51.020 --> 10:59.780 And for this animation, I'm going to add a track using image selection, adding a transform track for 10:59.780 --> 11:01.370 the image animation. 11:01.370 --> 11:04.700 And I'm going to start it off with a larger scale. 11:04.700 --> 11:08.810 I'm going to start it out with 1.5 for X and Y. 11:09.590 --> 11:15.800 So it's going to start off larger and it's going to be a very short acting animation. 11:15.800 --> 11:22.610 We're going to go forward by 0.05 seconds and I'm going to make it scale a little smaller, but not 11:22.640 --> 11:23.330 one. 11:23.330 --> 11:25.520 It's going to go down to 1.25. 11:26.990 --> 11:30.320 So I can hold control and zoom in to see what this looks like. 11:30.320 --> 11:32.690 And there's really just two frames to this animation. 11:32.690 --> 11:34.340 It's going to be very fast. 11:35.250 --> 11:40.830 Now the circle isn't appearing to be 100% perfectly round. 11:40.830 --> 11:47.340 So for the X, we could make it a little bit wider, 1.26 maybe, maybe 1.3. 11:47.340 --> 11:48.270 I think that's fine. 11:48.270 --> 11:55.380 And if we go back to the first frame instead of 1.5, we could make it 1.6, perhaps 1.55. 11:55.920 --> 12:01.830 So now we have this selection circle, and if we play the animation, it's very, very quick. 12:01.830 --> 12:06.840 We can press play and see what it looks like and I'm going to stop looping it. 12:06.840 --> 12:08.160 So this is what it looks like. 12:08.160 --> 12:11.820 It's going to just shrink in on it and stay there. 12:11.940 --> 12:19.950 But by default, I'd like this to be hidden so we can set render opacity on it to zero for its default 12:19.950 --> 12:20.760 value. 12:20.760 --> 12:23.310 But we'll change that as we're selecting it. 12:24.370 --> 12:26.140 Now pressing compile. 12:26.140 --> 12:29.110 Let's see what our compiler errors are. 12:29.140 --> 12:34.390 It looks like we're trying to get image ring and update ring brush. 12:34.420 --> 12:36.820 That's because we just deleted the ring. 12:36.820 --> 12:40.630 So update ring brush is no longer needed for us. 12:40.660 --> 12:42.280 Our ring is no longer there. 12:42.280 --> 12:43.450 We now have a button, right? 12:43.450 --> 12:46.150 So I'm going to delete this function. 12:46.150 --> 12:52.060 It says it's in use and if I compile, I can see where Right here, we don't need to call it anymore 12:52.060 --> 12:53.020 and compiling. 12:53.020 --> 12:55.540 Once again, we got rid of all our errors. 12:55.660 --> 13:00.640 Okay, I'm going to click off of that animation to get rid of that annoying blue text. 13:00.640 --> 13:03.550 And now we have a nice spell glow button. 13:03.550 --> 13:07.900 We can use this in our spell menu and we're going to do that in the videos to come. 13:07.900 --> 13:09.130 So excellent job. 13:09.130 --> 13:10.330 I'll see you soon.