WEBVTT 00:06.860 --> 00:08.130 Welcome back. 00:08.150 --> 00:14.900 Now that we've got our three main spell related widgets, we can start creating our actual spell menu 00:14.900 --> 00:16.160 and put these into it. 00:16.190 --> 00:21.470 Now, the spell menu is going to be a larger widget, kind of like our attribute menu. 00:21.860 --> 00:26.940 In fact, it's going to have quite a few similarities, but several differences. 00:26.960 --> 00:31.880 So what we can do is duplicate the attribute menu to save ourselves some work. 00:32.120 --> 00:38.570 I'm going to right click on it, duplicate it and call this WB underscore spell menu. 00:40.520 --> 00:43.730 And I'm going to move it into my spell menu folder. 00:45.600 --> 00:47.190 So move here. 00:47.580 --> 00:55.110 Now, I can close out of that and I'm going to close actually most of these, I think, and just open 00:55.110 --> 00:57.270 my spell menu. 00:57.600 --> 01:01.050 And the first thing I'm going to change is the text at the top. 01:01.050 --> 01:04.680 Instead of saying attributes, I'm going to say abilities. 01:04.770 --> 01:10.050 So I've been saying spells, but spells and abilities are interchangeable here. 01:10.080 --> 01:13.050 The only difference, if any, is when I say spells. 01:13.050 --> 01:20.580 I'm talking about either my offensive abilities such as attacks like our firebolt and the passive abilities 01:20.580 --> 01:22.350 that we have not yet made. 01:22.380 --> 01:28.110 Now, a lot of the stuff here we don't need, and I'm going to start gutting out this widget in the 01:28.110 --> 01:29.160 event graph. 01:29.280 --> 01:33.940 We're going to handle the functionality of this soon enough. 01:33.960 --> 01:38.170 For now, I'm going to just delete most everything here. 01:38.190 --> 01:45.790 In fact, I'm not even going to keep this setter for attribute menu widget controller as this class 01:45.790 --> 01:51.880 isn't going to use the attribute menu widget controller, it's going to use its own widget controller. 01:51.880 --> 01:57.450 So I'm just going to delete everything and we don't need most of the things in here. 01:57.460 --> 02:01.020 We have an event dispatcher called Attribute menu closed. 02:01.030 --> 02:02.650 I'm going to remove that. 02:02.950 --> 02:05.860 I'm going to remove the function set attribute tags. 02:05.860 --> 02:07.690 Set Primary attribute Tags. 02:07.690 --> 02:09.580 Secondary Resistance. 02:11.030 --> 02:15.860 Now set buttons enabled is using a whole bunch of buttons I'm about to delete, so I'm going to delete 02:15.860 --> 02:16.430 that. 02:16.850 --> 02:20.600 We're basically gutting out most of this entire thing. 02:21.640 --> 02:24.850 And everything under abilities I want to delete as well. 02:24.850 --> 02:28.750 So here in my overlay we have the image background. 02:28.750 --> 02:30.880 I want to keep that image border. 02:30.880 --> 02:32.080 I want to keep that. 02:32.110 --> 02:35.830 We have a wrap box with text at the top and a spacer. 02:35.830 --> 02:40.060 But everything else I'd like to highlight and delete. 02:40.450 --> 02:46.030 I can even highlight all the way down to the bottom except perhaps that close button. 02:46.030 --> 02:48.100 I may want to keep that, but you know what? 02:48.100 --> 02:51.940 I'm just going to highlight everything and just start over and hit delete. 02:51.940 --> 02:55.000 And that way we have what we see here. 02:55.330 --> 02:58.930 Okay, so that's what I'd like to start with. 02:58.960 --> 03:03.550 So I have my wrap box, I have a spacer and the rest can go in here. 03:03.550 --> 03:05.500 Now what is the rest going to be? 03:05.530 --> 03:10.690 Well, I'd like my spell menu to be separated into two main parts. 03:10.690 --> 03:14.890 Everything we just made, which we added to our overlay. 03:14.920 --> 03:16.180 Let's go look at that. 03:16.860 --> 03:22.230 All of this stuff we just made will be on the left side and on the right side. 03:22.230 --> 03:26.640 We're going to have a couple of scroll boxes with text for spell descriptions. 03:27.510 --> 03:32.700 But above even all that, we're going to have some additional stuff. 03:33.400 --> 03:37.720 Let's take a look at our layout here in the plan. 03:37.810 --> 03:42.940 So notice right away that this spell menu is split into a left and a right side. 03:42.970 --> 03:46.300 Now, the left side is kind of like the spell tree side. 03:46.300 --> 03:48.950 And the right side is the description side. 03:48.970 --> 03:53.890 So I'd like to break this up into two boxes, one for the left and one for the right. 03:53.890 --> 03:55.120 So let's do that. 03:55.210 --> 04:01.240 So if I'm going to have two sides, I should have a horizontal box and then we can drag in one thing 04:01.240 --> 04:02.350 and another. 04:02.380 --> 04:08.500 So just under the spacer, I'm going to get a horizontal box, bring it in, and this horizontal box 04:08.500 --> 04:10.600 is going to have a couple of things in it. 04:10.630 --> 04:13.260 I'd like those things to be wrap boxes. 04:13.270 --> 04:19.570 So I'm going to bring in a wrap box onto the horizontal and I'll bring in two of them and they'll be 04:19.570 --> 04:20.680 next to each other. 04:20.680 --> 04:27.460 So the horizontal box here is going to be basically a horizontal box root. 04:29.730 --> 04:38.910 And then our rat box here to the left is going to be rat box underscore tree side, and the next one 04:38.910 --> 04:44.430 will be rat box underscore description side. 04:44.940 --> 04:47.340 So we'll have two major sides here. 04:47.370 --> 04:51.180 Now, we could set these to fill just to see what they'll look like. 04:52.500 --> 04:57.900 But I'm going to set rat box tree side to auto and leave their horizontal and vertical alignments to 04:57.900 --> 04:58.640 fill. 04:58.650 --> 05:03.120 And we're just going to start bringing things in for the rat box tree side. 05:03.120 --> 05:08.400 We want first our offensive, then passive, then equipped widgets. 05:08.400 --> 05:10.890 So I'm going to first search for offensive. 05:11.560 --> 05:14.980 And bring that on to my rat box tree side. 05:15.490 --> 05:18.130 I'm then going to search for passive. 05:19.100 --> 05:20.630 And get that widget on. 05:21.680 --> 05:23.390 It'll go right beneath it. 05:23.390 --> 05:30.620 And finally, I'm going to search for equipped and that's going to come in onto the rat box just beneath 05:30.620 --> 05:31.080 it. 05:31.100 --> 05:33.350 So that's looking pretty nice. 05:33.360 --> 05:41.000 I'm seeing, though, that my offensive spell tree has icons that may be a little bit too big and overall 05:41.000 --> 05:43.460 everything is a little bit too large. 05:43.460 --> 05:46.010 If we want some room for descriptions here. 05:46.010 --> 05:49.790 Now, part of that has to do with our padding here. 05:49.820 --> 05:52.420 The padding doesn't have to be all that large. 05:52.430 --> 05:59.600 If we take this rat box here, the overall rat box, our padding is 60, but our left and right padding 05:59.600 --> 06:01.250 doesn't have to be that high. 06:01.310 --> 06:04.460 We can set left and right to both say 20. 06:04.490 --> 06:06.500 Now we have a bit more room. 06:06.500 --> 06:11.850 But in addition to that, these boxes don't have to be so wide either, do they? 06:11.870 --> 06:19.460 So rather than setting the overall rat box left and right to 20, we'll go down to maybe 40 or 30. 06:19.460 --> 06:26.270 Let's try 30 for left and right, and then we'll go into these offensive, passive and equipped widgets 06:26.270 --> 06:28.610 and change their size as well. 06:28.610 --> 06:33.770 So I'm going to go into spell menu first into offensive spell tree. 06:33.770 --> 06:41.450 And what I can do is select the size box and change its width override so that it's not so wide. 06:41.450 --> 06:48.710 And once I get a good number, say, for 20, then I can use that number for its. 06:50.260 --> 06:51.550 Box width. 06:52.750 --> 06:54.820 So we'll change that to for 20. 06:57.630 --> 07:05.400 Compile that and now that is not so wide and we'll do the same thing for the passive. 07:05.760 --> 07:11.040 We'll go into its spell tree properties and change its box width to 420. 07:11.810 --> 07:14.690 Compile that and it's not as wide. 07:14.690 --> 07:19.310 And once again, we'll do this for equipped spell row. 07:19.340 --> 07:23.000 Now it's possible for 20 might be too small for this, but we'll see. 07:23.850 --> 07:29.850 Let's just first put it into width override here and we see that it's a little bit too narrow. 07:29.850 --> 07:35.460 So we probably should have done this one first because I don't really want this one to get too much 07:35.460 --> 07:36.000 smaller. 07:36.000 --> 07:42.660 So I'm going to put it down to just about a size that can handle 445 looks good. 07:42.660 --> 07:47.490 Maybe we'll round it up to 450 and I think that will be a good size. 07:47.490 --> 07:53.700 So I'm going to set all of their box width properties to a default of 450. 07:54.150 --> 07:57.090 That means the passive gets 450 as well. 07:59.260 --> 08:02.500 And our offensive gets 450 as well. 08:05.930 --> 08:08.360 So compiling all those changes. 08:10.550 --> 08:16.670 And looking at our overlay, we see it looks like this and looking at our spell menu looks like we have 08:16.670 --> 08:22.850 a good deal more room and our overall route box doesn't have to have such a small padding. 08:22.850 --> 08:26.960 In fact, it might be able to go back up to 60 and 60. 08:26.990 --> 08:28.790 That may actually work. 08:29.360 --> 08:31.760 I'm actually thinking 50 and 50. 08:33.080 --> 08:33.680 Okay. 08:33.680 --> 08:35.690 So that's looking pretty good. 08:36.140 --> 08:39.830 This is all for our wrap box tree side. 08:39.920 --> 08:46.970 Now our route box tree side is going to need some labels above our trees and equipped spell row. 08:47.000 --> 08:51.020 We're also going to want spell points at the top there, so we'll get to that. 08:51.050 --> 08:52.820 Let's put some labels in. 08:52.940 --> 08:57.080 So first I'm going to select my abilities text. 08:57.840 --> 09:03.740 I'm going to copy it and then select my offensive spell tree. 09:03.750 --> 09:09.450 And with that selected, I'm going to control V to paste and I'm also going to want one above it too. 09:09.480 --> 09:15.510 So I'm going to take my offensive spell tree, select it and paste again, but drag this one above it 09:15.510 --> 09:20.280 and this one will be a label for offensive abilities. 09:20.280 --> 09:24.360 So I'm going to change this text to say offensive. 09:25.950 --> 09:27.210 Now it's quite big. 09:27.210 --> 09:30.630 I'm going to change its size down to 20. 09:30.780 --> 09:37.410 I'm going to increase its letter spacing, though, from 400 to 600 and I'm going to make its color 09:37.410 --> 09:38.720 less orange. 09:38.730 --> 09:40.680 In fact, I can choose this color. 09:40.710 --> 09:42.210 That looks pretty good. 09:42.240 --> 09:45.810 Now down here, it's going to say passive abilities. 09:46.110 --> 09:49.260 So I'll change the text to say passive abilities. 09:49.290 --> 09:52.620 I'll change its color to this beige tan color. 09:52.650 --> 09:59.310 I'll change its size to 20 letter spacing 600 and I think that looks good. 09:59.520 --> 10:01.930 Let's compile and look at the overlay. 10:01.950 --> 10:06.990 Actually, we don't see that in the overlay, so I'm going to go ahead and just remove these widgets 10:06.990 --> 10:10.320 and now put in my spell menu, see what that looks like. 10:11.280 --> 10:14.370 Spell menu that can come in right here. 10:14.370 --> 10:18.510 And we can also compile and press play and see what it looks like here. 10:19.960 --> 10:20.740 Okay. 10:20.740 --> 10:26.200 I think my padding on the spell menu doesn't need to be as much as the padding on the attribute menu. 10:26.470 --> 10:30.610 Now, I keep coming back to the padding, but, you know, it's one of those things that you kind of 10:30.610 --> 10:32.230 tweak over and over again. 10:32.410 --> 10:37.960 I think I'm going to set padding all to 40 left, right, up and down. 10:39.320 --> 10:40.040 Okay. 10:40.460 --> 10:47.210 Now, in addition to the label's offensive and passive abilities, we want a label for the equipped 10:47.210 --> 10:47.960 abilities. 10:47.960 --> 10:51.240 So I'm going to copy the passive abilities. 10:51.260 --> 10:59.210 Select my passive spell tree and control V so I get new text beneath it and this will be equipped abilities. 10:59.210 --> 11:03.980 So we'll change this to say equipped abilities like so. 11:04.610 --> 11:13.520 Okay, now we need something above our offensive abilities and that is our spell points and our spend 11:13.520 --> 11:18.260 points button as well as a value for our spell points. 11:18.560 --> 11:23.780 So I'd like my own rap box right above this inside of rap box tree side. 11:24.200 --> 11:25.700 So we're going to say rap box. 11:25.700 --> 11:29.510 We're going to bring it in just inside rap box, tree side. 11:30.730 --> 11:35.610 And I want to make sure that it's above my text offensive abilities. 11:37.430 --> 11:38.540 Right here. 11:38.540 --> 11:46.250 And this wrap box I'm going to rename to wrap box underscore spell points and we're going to have several 11:46.250 --> 11:47.330 things in here. 11:47.630 --> 11:54.350 First of all, I need some text, so I'm going to bring in some text onto wrap box spell points and 11:54.350 --> 11:56.510 the text is going to say spell points. 11:58.070 --> 12:05.090 I'm going to change its font to Pirata one and its size to 20. 12:05.480 --> 12:09.590 We'll adjust this later in game as we test its letter. 12:09.590 --> 12:16.430 Spacing can be 150, its outline size can be one and next to spell points. 12:16.430 --> 12:19.700 I'm going to have a text value widget. 12:19.760 --> 12:27.000 If I search for value, we have a framed value widget here, so I'm going to drag that onto the wrap 12:27.020 --> 12:28.970 box spell points as well. 12:30.170 --> 12:33.400 And in addition to that, I'd like a wide button. 12:33.410 --> 12:37.520 So I'm going to bring in a wide button onto the wrap box spell points. 12:38.680 --> 12:41.350 Now the button should be smaller. 12:41.530 --> 12:46.540 Now, as we zoom in, we see that the box changes behavior. 12:46.570 --> 12:51.250 Now, this wrap box actually is trying to act up a bit. 12:51.250 --> 12:57.430 And if I set its orientation back to horizontal, it behaves itself until I go and scroll again. 12:57.430 --> 13:00.070 And I really don't need it to be a wrap box. 13:00.070 --> 13:06.460 So I'm going to actually right click and replace it with a horizontal box that's going to make sure 13:06.460 --> 13:09.550 that it doesn't do this wrap business that I don't want. 13:09.700 --> 13:16.630 Now I just need to make sure that this horizontal box has the properties I want for each widget. 13:16.660 --> 13:21.610 Now, it doesn't need to be called wrap box anymore, so I'm going to call it just box spell points 13:21.610 --> 13:24.430 and let's make this look how we want it. 13:24.700 --> 13:32.740 Now the spell points text can be vertical alignment center and the box spell points itself I think can 13:32.740 --> 13:35.020 be set to horizontal and vertical center. 13:35.020 --> 13:41.270 And I can check fill empty space and that way it'll be nice and centered and then I can place spacers 13:41.270 --> 13:43.130 in between these widgets here. 13:43.250 --> 13:49.670 So for box spell points, I'm going to find a couple spacers and stick them in between. 13:50.440 --> 13:52.630 Text and the framed value. 13:53.980 --> 13:55.720 And increase that size a bit. 13:57.330 --> 13:58.440 To about 20. 13:59.850 --> 14:06.630 And I'm going to copy that spacer, select the frame value, paste the spacer like so. 14:07.050 --> 14:08.280 Now for my button. 14:08.280 --> 14:14.280 I'd like my button to be at a bit of a smaller size and I'd like to change the button text. 14:14.790 --> 14:20.970 If I search for properties, I can change the button text here and I'm going to have it say Spend point, 14:21.090 --> 14:23.910 and I'm also going to change its letter spacing. 14:24.120 --> 14:26.550 It doesn't need to be quite so dramatic. 14:27.720 --> 14:32.670 Perhaps 100 is good and the box width can be lowered as well. 14:33.150 --> 14:34.820 I'll try 160. 14:34.830 --> 14:39.180 Actually, that's a little too low, perhaps 180. 14:39.390 --> 14:41.820 Now the box height can be lowered too. 14:42.060 --> 14:44.100 I'm going to try 55. 14:44.100 --> 14:46.560 And that seems okay. 14:46.590 --> 14:47.910 60 might be better. 14:48.670 --> 14:50.770 So we have our spend point button. 14:51.130 --> 14:55.850 Now, it'd be nice to have some space in between this row and offensive abilities. 14:55.870 --> 14:57.370 We can add a spacer. 15:00.240 --> 15:02.610 Right above offensive abilities here. 15:02.850 --> 15:10.470 I don't want it inside of that widget, so I need to make sure that it's not inside of box spell points. 15:11.110 --> 15:14.020 And I can change its size. 15:15.610 --> 15:18.850 I need it to be wide enough to go to the next line. 15:19.630 --> 15:23.860 I'm going to bring it just about to 400 or so. 15:24.960 --> 15:26.640 And then increase its height. 15:28.700 --> 15:29.600 There we go. 15:30.200 --> 15:35.990 So now we can compile and take a look at the overlay, see what it looks like there. 15:35.990 --> 15:38.780 We can also press play and see what it looks like here. 15:39.940 --> 15:41.410 It's looking pretty good. 15:41.530 --> 15:49.060 Again, I think that these spell icons are a little bit large, so I think they could be lowered a bit. 15:49.600 --> 15:56.380 I could use a little bit more space between our labels here, but spell points looks pretty good. 15:56.410 --> 15:58.750 The frame value could be a little smaller. 15:58.750 --> 16:00.760 We might change the size of that. 16:02.340 --> 16:03.810 I'll do that first. 16:04.080 --> 16:08.730 I'm going to select it and choose center for horizontal and Vertical Alignment. 16:08.730 --> 16:12.540 That way it doesn't stretch so much, and I think that fixes it. 16:12.570 --> 16:19.920 Now, this spacer could be a little bit higher, perhaps 20, and I think that's going to do the trick 16:19.920 --> 16:20.610 for me. 16:20.610 --> 16:25.290 And I might actually have one of these above box spell points. 16:25.290 --> 16:30.660 So I'm just going to bring one in just above it and it looks like it went somewhere else. 16:30.660 --> 16:32.280 So I'm going to control Z. 16:32.520 --> 16:37.920 I'm going to collapse the box spell points here and make sure that spacer doesn't go inside of it. 16:39.360 --> 16:40.410 It went below it. 16:40.410 --> 16:41.580 I'm going to bring it up. 16:42.630 --> 16:44.400 Make it go wide. 16:45.030 --> 16:46.320 Not too wide. 16:47.270 --> 16:50.210 This can be a little finicky there. 16:50.330 --> 16:53.780 I'm going to make it wide and then increase its height. 16:54.110 --> 16:55.280 We'll make it 20. 16:56.590 --> 16:58.360 Okay with a compile. 16:59.670 --> 17:01.410 We can check what it looks like. 17:01.990 --> 17:05.320 We can open the attributes menu and see them next to each other. 17:05.920 --> 17:07.480 So far, so good. 17:08.540 --> 17:13.580 Now, before we wrap up this video, I'm going to go ahead and make that offensive spell tree. 17:13.610 --> 17:16.850 Have some smaller sizes for its icons. 17:17.270 --> 17:19.100 I think they're a little too large. 17:19.220 --> 17:23.150 So I'm going to search for properties and change box width and height. 17:23.880 --> 17:26.340 I think we can try 80 and 80. 17:26.610 --> 17:28.560 So I'll just compile that. 17:28.650 --> 17:29.940 Press play. 17:30.180 --> 17:32.660 I think that's a bit better. 17:32.670 --> 17:38.610 And our offensive spell tree doesn't have to have such a high size. 17:39.650 --> 17:41.240 For the size box. 17:41.860 --> 17:50.420 Now we can select each of them offensive spell tree, for example, and click fill empty space. 17:50.440 --> 17:53.920 We can do that for the text as well. 17:54.010 --> 17:57.490 We can take our passive tree and fill empty space. 17:57.520 --> 18:00.910 We can take our equipped spells row and fill empty space. 18:00.910 --> 18:02.830 And now these are all aligned. 18:02.860 --> 18:04.360 Let's see how that looks in the game. 18:05.370 --> 18:06.800 Okay, that looks good. 18:06.810 --> 18:09.370 I think these are all aligned and looking nice. 18:09.390 --> 18:09.900 Really? 18:09.900 --> 18:15.600 We just need a couple of windows for our description text and a close button down here. 18:15.600 --> 18:20.490 And I believe that I changed my spell menu to have less padding. 18:20.490 --> 18:27.750 But everything does seem quite far away from the edge, especially since the offensive icons are smaller 18:27.750 --> 18:29.230 and its size is smaller. 18:29.250 --> 18:35.900 What I think I might do is actually increase the length or I mean the height of each of these images. 18:35.910 --> 18:37.380 I'm going to take the image size. 18:37.380 --> 18:41.040 It's 32, actually, the Y is 15. 18:41.040 --> 18:42.210 I'm going to increase that. 18:42.210 --> 18:44.160 I'm going to try 25. 18:45.100 --> 18:46.420 And hit compile. 18:46.840 --> 18:48.700 We can see what it looks like. 18:49.760 --> 18:50.840 In the game. 18:51.200 --> 18:53.750 We can also just kind of space things out. 18:53.750 --> 19:02.150 So, you know, rather than 25, we can increase it to an even larger number, say 35, and we can increase 19:02.150 --> 19:08.750 these spacers as well to perhaps 65 in the X, maybe 75. 19:10.290 --> 19:15.390 And the lines can be even higher, perhaps even 45. 19:16.940 --> 19:18.260 Hitting compile. 19:19.320 --> 19:20.460 That's looking pretty good. 19:20.460 --> 19:21.660 Let's look at our spell menu. 19:21.660 --> 19:23.040 I think that looks good. 19:24.060 --> 19:26.550 They might be actually a little too high. 19:27.610 --> 19:28.780 We'll tweak them. 19:31.650 --> 19:33.050 I'll put them down to 30. 19:33.060 --> 19:35.680 And I think that's enough tweaking for this video. 19:35.700 --> 19:37.470 We're going to continue. 19:37.470 --> 19:43.830 And again, this is also a little bit premature when it comes to tweaking because we don't have everything 19:43.830 --> 19:44.490 here yet. 19:44.490 --> 19:46.510 So we'll get to that. 19:46.530 --> 19:48.790 So far, though, things are looking good. 19:48.810 --> 19:50.890 We'll continue in the next video. 19:50.910 --> 19:51.990 I'll see you soon.