WEBVTT 00:07.180 --> 00:08.380 Welcome back. 00:08.500 --> 00:12.790 We have three widgets that we're going to use in our attribute menu. 00:12.880 --> 00:18.730 Now, we need to actually create that widget that we'll use for the menu, and we'll put that right 00:18.730 --> 00:21.400 here in the attribute menu folder. 00:21.400 --> 00:28.180 And this one will be a user interface user widget blueprint based on or a user widget. 00:28.210 --> 00:29.470 We'll select that. 00:29.500 --> 00:33.490 We'll call it WP Attribute Menu. 00:34.650 --> 00:36.030 So let's open that. 00:36.030 --> 00:41.840 And for this we're basically going to use those three widgets we just created. 00:41.850 --> 00:44.670 We just need to make sure to set this up properly. 00:44.670 --> 00:49.110 And like all of our other widgets, we're going to start with a size box. 00:49.110 --> 00:52.170 So we'll call this the size box root. 00:55.210 --> 00:59.290 And I'm just going to hardcode some size values in this. 00:59.320 --> 01:07.900 We'll set this from fill screen to desired, and the size that I choose will be 805 by 960. 01:08.620 --> 01:12.730 And I'll just go ahead and come back in here and change it if I need to. 01:12.730 --> 01:15.580 But I'm thinking this will be just fine. 01:15.790 --> 01:19.990 And we definitely want an overlay that's going to be the next thing. 01:19.990 --> 01:21.880 So I'm going to drag an overlay in. 01:21.910 --> 01:25.980 This will be the overlay underscore route as well. 01:25.990 --> 01:29.080 And from here we can start stacking things. 01:29.110 --> 01:30.820 Now, first I want a border. 01:30.820 --> 01:34.060 So that's going to be an image that I use for the border. 01:34.060 --> 01:36.330 I'm going to drag that onto the overlay. 01:36.340 --> 01:40.300 I'm going to rename this to image underscore background. 01:40.300 --> 01:46.870 So we'll have an image background that will be set to fill horizontally and vertically. 01:46.990 --> 01:48.910 And I'm going to set the image. 01:48.910 --> 01:53.140 If I search there's a border underscore large. 01:53.260 --> 01:58.160 That's what this image is and it looks pretty good. 01:58.180 --> 02:01.060 Now we can draw this as a border. 02:01.060 --> 02:05.440 And if we set draw as to border now we don't see anything. 02:05.440 --> 02:09.250 We have to bring our margins up in order to see it. 02:09.250 --> 02:09.820 Right. 02:09.820 --> 02:15.220 So if we start bringing these margins up, then we'll start seeing what the border looks like. 02:15.220 --> 02:20.740 And I'm going to hardcode these to 0.5 for all the margins. 02:20.740 --> 02:24.700 And with 0.5, that's going to make them look appropriate. 02:24.790 --> 02:29.320 But borders are cool because they adjust as their container adjusts. 02:29.320 --> 02:30.460 They're like water. 02:30.760 --> 02:31.510 Okay. 02:31.600 --> 02:33.280 So we have the background. 02:33.280 --> 02:34.690 So far, so good. 02:34.720 --> 02:42.460 I'd like to have a title at the top that says attributes, and I'd like to have my other widgets, such 02:42.460 --> 02:46.690 as My value Rose and my value rose with the buttons. 02:46.690 --> 02:50.140 I'd like those lined from top to bottom. 02:50.350 --> 02:57.200 And a really nice way to achieve this kind of thing is with a wrap box. 02:57.200 --> 02:59.450 So let's search for a wrap box. 03:01.070 --> 03:08.900 A rat box is nice because if we put something that's really wide and then we drag in another thing that's 03:08.900 --> 03:15.800 really wide, if those two things are too wide to be kept on the same row, then they're pushed on to 03:15.800 --> 03:16.640 new rows. 03:16.640 --> 03:17.660 We'll see how this works. 03:17.660 --> 03:21.890 Let's drag the rat box right here onto the overlay. 03:21.890 --> 03:27.580 It can go just under the image background and the rat box itself. 03:27.590 --> 03:31.130 We're going to drag things onto it. 03:31.130 --> 03:34.850 For example, I want some text here at the top, right? 03:34.850 --> 03:37.850 So I'm going to type text. 03:38.490 --> 03:41.340 Drag it on to the rat box and there it is. 03:41.340 --> 03:43.920 And now I can make the text larger. 03:43.920 --> 03:45.630 So I'm going to take my text. 03:45.630 --> 03:48.060 I'm going to put some text on it. 03:48.060 --> 03:51.810 I'm going to say all caps attributes. 03:52.740 --> 04:01.050 I'm going to change my font all the way down to Pirata one and I'm going to change the font size to 04:01.080 --> 04:02.070 36. 04:02.070 --> 04:03.210 I'd like it bigger. 04:03.660 --> 04:05.790 I'm going to change my letter spacing. 04:05.790 --> 04:08.040 Let's put it to about 400. 04:08.940 --> 04:11.610 I'll go ahead and give it an outline size of one. 04:12.210 --> 04:14.160 Okay, so we have some text. 04:14.190 --> 04:20.130 We really want this in the middle and probably a little bit farther down. 04:20.130 --> 04:22.800 So let's go about making that happen. 04:22.800 --> 04:30.180 For one, I'm going to make that wrap box, fill the entire area so vertical and horizontal can both 04:30.210 --> 04:31.350 be set to fill. 04:31.710 --> 04:39.250 I'm going to take my text attributes and set it to fill empty space that's going to make sure that it 04:39.250 --> 04:41.980 fills the whole row as much as it can. 04:41.980 --> 04:49.540 And then if I set a horizontal alignment to center, then it's going to be centered and my wrap box 04:49.540 --> 04:57.130 itself could have some padding so that nothing inside of it is too close to the borders and I can go 04:57.130 --> 05:03.280 ahead and set a value of 25 for the padding that's going to set it for all four left, right, top and 05:03.280 --> 05:03.970 bottom. 05:03.970 --> 05:05.880 That's going to look pretty good there. 05:05.890 --> 05:12.580 And now, thanks to the wrap box, I can have my rows start to stack like this. 05:12.820 --> 05:17.490 For example, I can drag a new text just under my text here. 05:17.500 --> 05:20.520 Now, of course, it's on the same line, right. 05:20.530 --> 05:22.990 But I'd like it on the next line. 05:22.990 --> 05:25.210 So there's a couple things we can do. 05:25.330 --> 05:33.010 For one, we see this fill span when less than now, this is going to make this text block behave as 05:33.010 --> 05:38.890 if it's wider, if it's wider than this width here, which is about 805. 05:38.890 --> 05:42.420 If I select the size box route, the width is 805. 05:42.430 --> 05:48.970 We can take this text block, We can increase this value to more than 805, and all of a sudden it's 05:48.970 --> 05:51.040 now taking up its own line. 05:51.040 --> 05:52.720 So that's a nice trick we can do. 05:52.720 --> 05:59.410 I'm going to set it to 1000 just so it's a nice value and I can set horizontal alignment to center and 05:59.410 --> 06:00.820 it'll be right there in the middle. 06:00.820 --> 06:01.810 Looks great. 06:01.840 --> 06:08.650 I'm going to give it the same font Pirata won and I'd like its font size to be a little smaller. 06:08.650 --> 06:09.790 About 20. 06:09.820 --> 06:17.560 I'll give it an outline size of one and a letter spacing of a lot more like 800. 06:17.710 --> 06:25.390 That way it's nice and separated and this is going to be just a subtitle that says Primary attributes. 06:25.720 --> 06:29.710 We're going to have our primary attributes right here first thing. 06:29.890 --> 06:32.350 Now we know about spacers, right? 06:32.350 --> 06:37.510 If I want more space between these two, I can just place a spacer between them. 06:37.720 --> 06:39.310 Really nice. 06:39.490 --> 06:41.230 Looks like I have caps on there. 06:41.230 --> 06:49.180 I'm going to place a spacer between them and the spacer just needs to be wide enough so that it's taking 06:49.180 --> 06:50.140 up its own line. 06:50.140 --> 06:51.700 Here on the wrap box. 06:51.700 --> 06:56.170 The wrap box will put it on its own new line as long as it's wide enough. 06:56.170 --> 07:02.320 So if I take the size X notice, I'm dragging it up As soon as it gets too big, boom, it's right there 07:02.350 --> 07:03.400 on the next line. 07:03.400 --> 07:06.190 So I'm going to put it up to about 800. 07:06.860 --> 07:12.020 Looks like that's taking up more than it needs and it doesn't really matter, but I'm going to put it 07:12.020 --> 07:14.390 just below so it looks good right there. 07:14.390 --> 07:15.950 750 is fine. 07:17.550 --> 07:22.140 And then my size y allows me to increase the y size. 07:22.140 --> 07:22.890 And look at that. 07:22.890 --> 07:28.590 We have more spacing, we have some spacing between and I can choose a nice round number, say 20. 07:29.010 --> 07:30.870 Okay, that's looking good. 07:30.960 --> 07:36.390 I'd like another spacer with the same size just beneath primary attributes. 07:36.390 --> 07:44.130 So I'm going to copy this one with Control C select Primary attributes control V and I now have a spacer 07:44.130 --> 07:44.940 beneath it. 07:44.940 --> 07:45.890 Perfect. 07:45.900 --> 07:50.520 And now I can have one of those text value button rows. 07:50.520 --> 07:57.870 So text value button row is going to be for primary attributes because remember the primary ones, I 07:57.870 --> 08:01.680 want to be able to adjust, I want to be able to increase. 08:01.680 --> 08:03.540 So we'll put some of those rows. 08:03.540 --> 08:08.400 But first I'm going to have one that has attribute points. 08:08.400 --> 08:14.640 It's going to be one of the text value rows without a button that will show us how many attribute points 08:14.640 --> 08:15.390 we have. 08:15.390 --> 08:23.260 So for that, I'm going to put first a text value row and then a series of text value button rows. 08:23.260 --> 08:29.860 So I'm going to search the palette for text value and here's text value row. 08:29.890 --> 08:36.640 We'll put one of those first and we see that it's a little bit large and that's something that we can 08:36.640 --> 08:37.690 adjust. 08:37.720 --> 08:46.360 Remember, the text value row has parameters, box width and box height, and those can be adjusted. 08:46.540 --> 08:56.260 Now box width is set to 800 here in our attribute menu, it looks a little bit too large, so if I want 08:56.260 --> 08:59.710 I can make box width and box height visible here. 08:59.710 --> 09:02.830 I can compile that and here an attribute menu. 09:02.830 --> 09:08.350 With this widget selected, we have our properties, we put them in. 09:08.380 --> 09:10.990 We did not put them in their own category. 09:10.990 --> 09:15.400 So I'm going to put them in a category of row properties. 09:17.570 --> 09:19.890 We'll do that for box width and box height. 09:19.910 --> 09:22.190 Row properties compile. 09:22.520 --> 09:29.210 Back here in the attribute menu, we can search for that row properties category. 09:29.240 --> 09:34.910 Here it is way down at the bottom and I can go ahead and just make this a bit smaller until I get a 09:34.910 --> 09:35.600 good value. 09:35.600 --> 09:38.420 It looks like 750 is good. 09:38.810 --> 09:44.090 Okay, so it says critical hit resistance, but we're going to want to be able to change that value. 09:44.090 --> 09:49.520 Of course, we're going to want this to say attribute points so we can see how many attribute points 09:49.520 --> 09:50.330 we have. 09:50.330 --> 09:53.150 And then I'm going to want a spacer underneath it. 09:53.390 --> 10:00.950 So what I did was selected a spacer Ctrl C selected this widget, Ctrl V, and it put the spacer just 10:00.950 --> 10:01.940 beneath it. 10:01.940 --> 10:03.110 Really nice. 10:03.230 --> 10:07.280 Now really, this is not going to be one of our primary attributes. 10:07.280 --> 10:13.160 So realistically it might be better to be above this where it says primary attributes. 10:13.160 --> 10:20.040 We could move it up so we can make this go just above primary attributes right here. 10:20.040 --> 10:23.280 We can drag it up so it's right there. 10:23.830 --> 10:32.410 We can put another spacer on beneath it so we can copy this spacer Ctrl C, select this widget, Ctrl 10:32.410 --> 10:33.960 V, there's a spacer there. 10:33.970 --> 10:41.080 Now we have primary attributes spacer, and then right here we can put another row, but this time with 10:41.080 --> 10:41.500 the buttons. 10:41.500 --> 10:47.830 So we're going to drag that between these two spacers right there and it looks like 750 is the perfect 10:47.830 --> 10:51.790 size that I'm probably going to want our default value to be. 10:51.790 --> 10:59.230 So I'm going to go to text value row, take that box width and set its default value to 750. 11:00.070 --> 11:05.290 That way, as we drag new ones in, they'll come in at 750 there. 11:05.320 --> 11:06.250 Perfect. 11:06.250 --> 11:10.540 And we're going to want four of these, one for each of the primary attributes. 11:10.540 --> 11:11.980 So I'm going to copy and paste. 11:11.980 --> 11:19.690 I'm going to take this one, click on the spacer Ctrl V, and I'm going to take the spacer Ctrl C, 11:19.720 --> 11:26.440 click on this widget, Ctrl V, I'm going to take both of them and then click on the spacer Ctrl V, 11:26.440 --> 11:28.660 and that'll copy and paste both of them. 11:28.660 --> 11:35.140 Now it looks like I got two spacers, so I'm going to delete one and we need one more pair. 11:36.670 --> 11:38.460 With spacer and a widget. 11:38.470 --> 11:39.280 There we go. 11:39.280 --> 11:40.540 And we have four. 11:41.140 --> 11:42.670 Okay, so that's great. 11:42.700 --> 11:49.300 Now, if we wanted these to be more padded a little bit farther in, we could wrap these all in their 11:49.300 --> 11:52.710 own box and give that box some padding. 11:52.720 --> 11:56.260 We could also give them individually each their own padding. 11:56.290 --> 12:01.300 That's an approach I don't like as much, but it's possible to do it that way. 12:01.330 --> 12:03.580 Either way, those are things we could do. 12:03.580 --> 12:10.750 And then of course, if the overall wrap box itself should be smaller, we can set the padding overall 12:10.780 --> 12:14.400 to say 40 like so. 12:14.410 --> 12:22.030 Keep in mind though, we're using size boxes and size boxes mean we want to set the actual size to accommodate 12:22.030 --> 12:22.830 for this. 12:22.840 --> 12:29.620 For example, we can go to our box width here and drag it down a bit. 12:29.650 --> 12:34.330 Looks like 720 is now a good value with this padding. 12:34.330 --> 12:39.590 So we can go back to text value row and set the default width to 720. 12:40.010 --> 12:42.820 Compile and it looks better. 12:42.830 --> 12:46.010 So tweaking is the name of the game here. 12:46.340 --> 12:51.800 Okay, so we have our primary attributes and the secondary ones will go beneath it. 12:51.800 --> 12:58.160 But I'd like the secondary attributes to all be within their own scroll box. 12:58.160 --> 13:04.130 A scroll box has a scroll bar and the ability to scroll through things. 13:04.850 --> 13:06.140 So how do we do that? 13:06.140 --> 13:10.550 It's going to be in the chat box just beneath all these other things. 13:10.550 --> 13:13.640 But we want to control the size of the scroll box. 13:13.640 --> 13:17.330 Otherwise it'll just kind of try to run off the screen. 13:17.330 --> 13:20.900 So first I'm going to have a size box. 13:21.080 --> 13:24.290 I'm going to bring that in right here. 13:25.140 --> 13:27.590 And the size box itself. 13:27.600 --> 13:33.360 I'm going to set the size for as soon as I make it bigger than nil, it'll start to take up its own 13:33.360 --> 13:39.990 line and the size box I'm going to rename to size box underscore scroll. 13:40.710 --> 13:44.280 So we know that this is the size box for our scroll box. 13:44.280 --> 13:50.940 I'm going to check width and height override and as soon as I give it a bigger width, it's going to 13:50.940 --> 13:52.380 take its own line. 13:52.440 --> 14:01.500 I'm going to give it some height here and we can even give this a smaller width and make it center center 14:01.500 --> 14:06.690 and fill empty space is going to make it centered like that. 14:06.690 --> 14:14.790 And if we really want, we can put a spacer between what's above it and it so we can put a spacer right 14:14.790 --> 14:21.090 here in between that gives us a little more room and we can adjust the size here. 14:21.090 --> 14:26.320 Now this is going to be a scroll box, so we'll go ahead and drag one in. 14:26.860 --> 14:34.000 So we'll search for scroll box and drag in a scroll box right on to size box scroll. 14:34.000 --> 14:40.690 Now we have a scroll box here, which means we can start dragging widgets onto the scroll box and we'll 14:40.690 --> 14:42.010 get them in a row. 14:42.010 --> 14:49.870 And as they exceed the size of this box because it's in a size box that has a set size, we'll get a 14:49.870 --> 14:51.640 scroll bar to the right. 14:51.640 --> 14:58.450 So let's search for text value and get our text value row and drag it on to the scroll box. 14:58.450 --> 14:58.930 And we'll see. 14:58.930 --> 15:05.860 We get one there and we'll go ahead and drag in another one and another one and we're going to want 15:05.890 --> 15:08.500 one for all of our secondary attributes. 15:08.740 --> 15:15.190 I'm just going to quickly count how many I have by going to my attributes set. 15:15.340 --> 15:20.170 I guess I can count them right here in get lifetime replicated props I have. 15:21.640 --> 15:28.060 Looks like I have ten, so I'm going to go ahead and add ten to the scroll box. 15:28.060 --> 15:29.530 So there's three. 15:30.270 --> 15:31.950 There's four. 15:32.870 --> 15:34.100 Five. 15:35.060 --> 15:36.230 Six. 15:37.030 --> 15:38.200 Seven. 15:39.410 --> 15:40.160 Eight. 15:41.290 --> 15:42.400 Nine. 15:43.010 --> 15:47.750 And ten and notice there's a scroll bar now and it kept getting smaller. 15:47.780 --> 15:50.000 The more of these that we placed here. 15:50.360 --> 15:54.620 Now it looks like the font could be a little smaller. 15:54.650 --> 16:01.350 The number is getting squished and the name slot is taking up too much space. 16:01.370 --> 16:07.940 So there are a number of parameters I think that we should set for this widget. 16:07.940 --> 16:14.090 So the text value rows that exist in the scroll box, these are going to need to have some properties 16:14.090 --> 16:15.050 set on them. 16:15.740 --> 16:24.410 So I think it would be a good idea to have a function to set the font and a function to set some of 16:24.410 --> 16:36.140 these properties here, such as maybe the spacer dimensions, maybe the name slot here seems to be probably 16:36.140 --> 16:44.910 taking up a little too much space, but perhaps just setting the size of the text here could do it. 16:44.910 --> 16:48.240 So we'll make some adjustments in the videos to come. 16:48.240 --> 16:50.220 For now, this is a good start. 16:50.220 --> 16:57.080 And before we wrap up, I think I would like at least a background image behind everything here. 16:57.090 --> 17:04.620 So right here at the very top, just inside the overlay, I'd like one more image for the background. 17:04.740 --> 17:07.230 I'd like it to go just above the background. 17:07.230 --> 17:09.120 And this is actually the border. 17:09.120 --> 17:13.440 So I'm going to rename this from Image background to Image Border. 17:13.440 --> 17:19.050 And behind it here, this one will be the image underscore background. 17:19.290 --> 17:26.160 This one will fill the entire thing, although I'm going to want to have some padding on it because 17:26.160 --> 17:30.390 if we scroll in the border cuts in a little bit. 17:30.390 --> 17:32.760 So I'm going to want a little bit of padding. 17:32.760 --> 17:33.990 Five's too much. 17:33.990 --> 17:34.610 Let's try. 17:34.620 --> 17:36.060 I think one is good. 17:36.060 --> 17:40.440 So we'll have a little bit of padding there and we can give this its own color. 17:40.440 --> 17:43.830 I'm actually going to choose that flowing material. 17:43.830 --> 17:45.330 Well, I like that. 17:45.330 --> 17:51.450 So flowing UI, BG and I can set its tint a little bit if I want that. 17:51.450 --> 17:54.720 I think I'll set it a little darker like that. 17:54.720 --> 17:58.650 And now we have a nice flowing background that looks really cool. 17:58.920 --> 18:01.620 Okay, so good progress in this video. 18:01.740 --> 18:10.140 Still some work to do, but we have the basic attribute menu sort of fleshed out and if critical hit 18:10.140 --> 18:17.370 resistance is bugging you, you could go back to text value row and changing that just to say attribute 18:18.090 --> 18:20.250 like so compile that. 18:20.250 --> 18:28.260 And now we can see that without such crowding with our text, then things look a little more normal 18:28.260 --> 18:31.110 and we wouldn't see named slot in the game. 18:31.110 --> 18:33.780 We're going to see what this looks like in game very shortly. 18:33.780 --> 18:34.980 Don't worry about that. 18:34.980 --> 18:37.260 But things are looking really good. 18:37.290 --> 18:42.240 Excellent job and we'll continue with this in the next video. 18:42.270 --> 18:43.320 I'll see you soon.