WEBVTT 00:06.930 --> 00:08.170 Welcome back. 00:08.190 --> 00:15.480 We now need to make our text value row, which essentially is going to be a widget with text and one 00:15.480 --> 00:17.970 of these framed values. 00:17.970 --> 00:19.410 So let's make that. 00:19.440 --> 00:26.280 We'll go ahead and go into the folder that contains this widget, which is UI attribute menu. 00:26.310 --> 00:35.190 Let's make a new widget blueprint here based on Aura user widget, and I'm going to name this WP text 00:35.190 --> 00:37.020 value Row. 00:37.440 --> 00:40.320 So let's open that text value row. 00:40.650 --> 00:45.990 And this is going to have a size box just like framed value does. 00:46.020 --> 00:52.870 I'm a big fan of size boxes and they make things really easy for us to customize. 00:52.890 --> 00:58.500 So we're going to have our size box, we're going to override width and height change from fill screen 00:58.500 --> 01:05.100 to desired, and we're going to make our parameters for width and height for this. 01:05.100 --> 01:15.820 So let's add a variable called box width, changing that to a float and box height, and that's a float 01:15.820 --> 01:16.480 as well. 01:16.480 --> 01:24.000 And this really could be a overall base widget that has a size box that always has one. 01:24.010 --> 01:29.470 You could make a parent and derive all your widgets from that if you want to inherit this property. 01:29.470 --> 01:39.190 But I'm just going to call this size box root and we'll go ahead and check is variable and do this again. 01:39.190 --> 01:47.500 We'll take size box root and we'll call set width override and set height override. 01:57.300 --> 02:04.170 We'll go ahead and hook these up and hook up our box width and our box height. 02:06.810 --> 02:12.960 Now I'm going to compile and give these some default values and we'll probably adjust these, but I'm 02:12.960 --> 02:16.080 going to choose about 450 for the width. 02:16.820 --> 02:20.330 And I can select my height. 02:21.020 --> 02:23.390 And choose about 60 for the height. 02:23.390 --> 02:24.950 Let's see what that looks like. 02:25.070 --> 02:26.540 Something like that. 02:27.440 --> 02:29.120 Okay, so we have our size box. 02:29.120 --> 02:31.880 I'm going to want to put things from left to right. 02:31.880 --> 02:38.120 We're going to want text to the left and then our framed value widget and so on. 02:38.120 --> 02:40.310 So I'm going to want a horizontal box. 02:40.310 --> 02:43.520 That's how we can put things in here from left to right. 02:43.520 --> 02:47.930 And our horizontal box can be just called horizontal box. 02:47.930 --> 02:54.410 I think it's going to be the only horizontal box we have and we can start putting things in like text. 02:54.410 --> 03:02.660 So I'm going to drag a text right into that box and this is going to be the text for our text value 03:02.660 --> 03:03.050 row. 03:03.050 --> 03:08.330 It's going to be the attribute name in the case that we use it for our attribute menu. 03:08.330 --> 03:10.060 But we could use this for anything. 03:10.070 --> 03:18.800 I think text is a fine name for it for now, and I'm going to set this to horizontal align left and 03:18.800 --> 03:25.620 vertical align center so it's not up at the top and I'll give it a default value for the text. 03:25.620 --> 03:31.860 I'm just going to see what it looks like with attribute and change the font to Pirata one. 03:31.860 --> 03:32.850 I like Pirata. 03:32.850 --> 03:36.540 It's a pretty vintage looking font. 03:36.570 --> 03:42.960 I'm going to be using this, but you can look for any font you like and I'm going to set the size to 03:42.960 --> 03:48.330 be a little higher, probably about 32, and I'd like to adjust the letter spacing. 03:48.330 --> 03:52.110 Notice if I click and drag the letter spacing can change. 03:52.110 --> 03:59.700 I like a value of about 176 or so and I can give it an outline size of one. 03:59.700 --> 04:04.230 So we have a black outline around the letters and I think that's looking pretty good. 04:04.230 --> 04:14.310 Now I do want a framed value widget in here right after the text, so if I search for framed value and 04:14.310 --> 04:18.180 just drag it on in, we'll see that it gets stuck right there. 04:18.180 --> 04:27.780 Immediately after the text, which is okay, but I'd kind of like it to be a little bit farther out 04:27.810 --> 04:28.320 now. 04:28.320 --> 04:32.730 I could align it to the right and choose fill. 04:32.730 --> 04:37.800 If I choose, fill and align it to the right, well, that's going to put it all the way to the right, 04:37.800 --> 04:39.210 which is better, I think. 04:39.210 --> 04:42.020 But what if I want it a little bit farther in? 04:42.030 --> 04:47.040 Well, there's a nice handy widget called a spacer that can take care of that. 04:47.040 --> 04:53.070 If I put a spacer just after it right here, then I can change the spacer size. 04:53.070 --> 04:58.050 If I increase that x value, then I can see that spacer size go up. 04:58.050 --> 05:00.330 So right there we can change that. 05:00.330 --> 05:04.320 I can put it at about 50 and that looks pretty good. 05:04.650 --> 05:08.250 Now, the longest attribute name is intelligence. 05:08.250 --> 05:12.360 I want to see what it looks like so like that. 05:12.390 --> 05:19.290 Although the other attributes could have longer names such as critical hit resistance, that's a pretty 05:19.290 --> 05:20.070 long one. 05:20.400 --> 05:21.930 Let's see what that looks like. 05:23.970 --> 05:26.640 That's actually pretty long, isn't it? 05:26.790 --> 05:31.060 So the size box might actually need to be a little bit bigger than this. 05:31.080 --> 05:36.180 I'm going to go ahead and just expand it so that we have a little bit of extra room there. 05:36.210 --> 05:39.570 So if we want to use a spacer, we can. 05:39.570 --> 05:45.770 But keep in mind, we're also going to be creating a row that has a button at the end of it. 05:45.780 --> 05:53.460 So we could really just put something here that if we extend this into a child class, we'd like to 05:53.460 --> 05:55.290 be able to put additional widgets. 05:55.290 --> 05:56.730 So we have something for that. 05:56.730 --> 05:58.740 It's called a named slot. 05:59.250 --> 06:03.240 Now a named slot is something we drag into our widget. 06:03.270 --> 06:04.200 There it is. 06:04.230 --> 06:10.920 And if we inherit from this widget, then we can put more widgets on the named slot. 06:11.340 --> 06:18.480 So what I'll do is I'll go ahead and I think I'll take this spacer and just kind of make it a little 06:18.480 --> 06:21.810 smaller and get our overall size box. 06:21.810 --> 06:25.810 It looks like it went back to 450 because of the default value. 06:25.810 --> 06:30.550 As soon as we change something, we kicked off that event pre construct. 06:30.550 --> 06:32.410 So we're going to want to set the box width. 06:32.410 --> 06:35.740 I'm going to set it up to a higher value of say, 800. 06:36.510 --> 06:38.520 Come back here and compile. 06:38.520 --> 06:40.560 And now we have plenty of room. 06:41.220 --> 06:47.010 Okay, So let's go ahead and adjust this a little bit until we're happy with it. 06:47.010 --> 06:49.980 I think 40 for the spacer is good. 06:50.010 --> 06:54.810 The named slot itself I think is kind of fine how it is. 06:54.840 --> 07:00.930 And if we have a child widget based on this, we can add new widgets in the name slot. 07:00.960 --> 07:03.870 We'll see how that works when we get to that. 07:03.870 --> 07:09.150 But for now, I kind of want to just make some adjustments and make sure that things look good. 07:09.150 --> 07:16.320 I kind of want this framed value to be a little bit differently sized. 07:16.320 --> 07:19.920 I don't want it to just stretch to fit that area there. 07:20.610 --> 07:29.550 So what I'm going to do is have it selected and choose to do horizontal and vertical alignment centered 07:29.550 --> 07:34.530 here, because if we choose fill, it's going to stretch to fill the volume. 07:34.530 --> 07:42.250 If we choose center, then it's going to have its original size properties, it's going to respect that. 07:42.250 --> 07:49.450 And then I can of course adjust my spacer if I want it closer and if I really wanted it all the way 07:49.450 --> 07:55.900 to the right, I could select the frame value and choose align right for horizontal and vertical can 07:55.900 --> 08:03.520 just be centered and that way it'll be the correct size and it'll be a constant space away from the 08:03.520 --> 08:06.850 named slot determined by my spacer. 08:07.300 --> 08:08.460 So we'll do 40. 08:08.470 --> 08:16.150 Like I said, I think that's looking good and this is going to do it I think for our text value Row 08:16.150 --> 08:17.140 So this looks good. 08:17.140 --> 08:21.970 In the next video we'll make the version of this that has a button right there at the end. 08:21.970 --> 08:24.670 So we'll make use of that named slot. 08:24.940 --> 08:27.970 So excellent job and I'll see you soon.