WEBVTT 00:07.200 --> 00:08.430 Welcome back. 00:08.790 --> 00:12.290 So we're ready to start working on our attribute menu. 00:12.300 --> 00:17.560 So in blueprints under UI, we have several folders here. 00:17.580 --> 00:23.940 For one, we have overlay and the attribute menu is kind of related to the overlay. 00:23.940 --> 00:27.030 We could put it in here, but I'd like it to be in its own folder. 00:27.030 --> 00:31.530 So I'm going to make a new folder called Attribute Menu. 00:31.800 --> 00:34.550 We'll put our attribute menu widgets in here. 00:34.560 --> 00:39.840 Now, first we need our framed value, so I'm going to make a new widget blueprint. 00:39.840 --> 00:42.180 So user interface widget Blueprint. 00:42.210 --> 00:45.150 These are all going to be based on Ora user widget. 00:45.180 --> 00:53.010 We'll select that and this will be WP underscore framed value and we can open that up. 00:53.010 --> 00:55.830 And here we have an empty widget. 00:55.860 --> 01:01.620 Now I'd like this to have a size box so we can control its size easily. 01:01.920 --> 01:09.340 So first we'll have the size box and for the size box I'm going to drag this over and change this from 01:09.340 --> 01:12.160 fill screen up here to desired. 01:12.160 --> 01:17.830 And that way we can set the desired size for this and for the desired size. 01:17.830 --> 01:23.770 I'm going to override width and height and let's set width to something like 80. 01:23.800 --> 01:31.330 We'll adjust these of course, and for height something like 45 that gives us a rectangle like this. 01:31.360 --> 01:34.750 We're definitely going to be tweaking almost everything here. 01:34.900 --> 01:41.920 Now I'm going to rename this size box to size box, underscore root, and we'll go ahead and make width 01:41.920 --> 01:45.040 and height variables that we can adjust here. 01:45.040 --> 01:49.450 So let's go to graph and this will be for event pre construct. 01:49.450 --> 01:53.920 We're going to set the size override values. 01:53.920 --> 01:56.440 So we're going to have a couple of variables. 01:56.440 --> 01:59.920 The first will be box width. 02:00.800 --> 02:02.270 And this will be a float. 02:02.270 --> 02:06.890 And then the second will be box height, also a float. 02:06.920 --> 02:13.340 Now we do need to make sure our size box is set to is variable before we come back to the graph and 02:13.340 --> 02:19.090 access it and our box width and height, we can put these in their own category. 02:19.100 --> 02:25.040 So let's make a new category and we'll call this frame properties. 02:26.530 --> 02:34.750 And I'll put both box width and box height into our frame properties and we can take our size box root 02:34.750 --> 02:45.670 and drag it out and we can call set width override passing in box width and we can call set height override 02:45.670 --> 02:46.090 as well. 02:46.090 --> 02:54.610 So let's duplicate size box root use set height override and get our box height in there and we'll go 02:54.610 --> 02:56.290 ahead and hook these up. 02:57.490 --> 03:00.820 Now these are defaulted to zero. 03:00.820 --> 03:03.820 So if I compile, we're back to zero here. 03:03.820 --> 03:10.960 But we want those values we had for box width and height, namely box width can be 80. 03:12.510 --> 03:19.740 Box height can be 45 and we'll change these as we need because now we have these properties and we're 03:19.740 --> 03:26.580 going to collapse these both to a function, collapse to function, and we'll call this update frame 03:26.580 --> 03:27.870 size. 03:29.300 --> 03:30.410 Like so. 03:30.980 --> 03:33.140 Okay, so we have our size box. 03:33.170 --> 03:35.680 I'm going to want to put things on top of each other. 03:35.690 --> 03:41.690 We're going to want a background image or color, a border and some text. 03:41.720 --> 03:45.530 This will be pretty simple since those will be on top of each other. 03:45.560 --> 03:47.310 We're going to need an overlay. 03:47.330 --> 03:50.540 So let's get an overlay onto our size box. 03:51.140 --> 03:58.920 Our overlay can be set horizontal and vertical alignment both to fill and for the overlay. 03:58.940 --> 04:03.920 We're first going to want I'm going to want a background image, so I'm going to use an image. 04:03.920 --> 04:10.370 Just drag it onto the overlay and set vertical and horizontal alignment to fill. 04:10.370 --> 04:14.150 And for this we can either have a black background if we want to. 04:14.150 --> 04:17.030 We can select the tint and go down to black. 04:17.060 --> 04:18.230 That's one option. 04:18.260 --> 04:21.800 Another is we can set an image and make it a parameter. 04:22.010 --> 04:31.740 If you search for flowing, you'll see that we have some UI background materials design aid for UI such 04:31.740 --> 04:34.560 as am I flowing UI BG. 04:35.340 --> 04:44.010 This is some clouds that we have here and as you can see, the clouds are flowing and it looks pretty 04:44.010 --> 04:44.750 good. 04:44.760 --> 04:51.510 Although if we browse to this material instance, we'll see that we have some parameters we can change 04:51.510 --> 04:58.620 if we want to change the speed x and Y, and that's the speed for some panning clouds that we're using 04:58.620 --> 05:01.470 and we have cloud darkness as well. 05:01.470 --> 05:05.280 If we want to change that to look cloudier. 05:05.280 --> 05:10.290 And then of course, there's this color for the clouds themselves. 05:10.290 --> 05:17.700 You can desaturate it all the way and if you desaturate it all the way and save, then you'll see here 05:17.700 --> 05:22.920 in the UI the tint can be changed to whatever color you want. 05:22.950 --> 05:26.600 So if you want it to be kind of blue, you can make it that way. 05:26.610 --> 05:29.040 So there's a little bit of leeway there. 05:29.340 --> 05:33.600 I'm going to put it back roughly to how it was. 05:33.900 --> 05:42.180 I don't want too much cloud darkness, and if I really want, I can create some new materials with different 05:42.180 --> 05:42.810 parameters. 05:42.810 --> 05:46.200 But for this, I'm fine with how this looks here. 05:46.560 --> 05:49.650 If you want red or some other color, you can do that. 05:49.650 --> 05:51.900 Or you could just make this black. 05:51.930 --> 05:54.180 You could put the tint all the way down to black. 05:54.270 --> 05:55.620 It's really up to you. 05:55.620 --> 06:00.420 I'd like it pretty dark, but it's still flowing and shifting, which is kind of cool. 06:00.510 --> 06:03.710 And I'm going to rename some of these The overlay. 06:03.720 --> 06:06.150 This can be overlay, underscore, root. 06:06.150 --> 06:07.590 That's the root overlay. 06:07.590 --> 06:15.300 And this will be image underscore background, which we should be able to set if we want to override 06:15.300 --> 06:16.470 that background. 06:16.470 --> 06:19.410 So I can check is variable. 06:19.410 --> 06:27.750 We can get image background and we can call, set brush and promote this in brush to a variable things 06:27.750 --> 06:30.240 we've been doing with our other widgets already. 06:30.240 --> 06:32.970 We can call this background brush. 06:33.300 --> 06:39.120 I'm going to go ahead and put these all in the same category of frame properties and background brush 06:39.120 --> 06:49.950 can get a default value if we compile and we search for my flowing and choose that my flowing UI BG 06:49.950 --> 06:52.470 But now it's not going to have that blue tint to it. 06:52.470 --> 06:56.970 If I connect this and compile, we'll see that it's back to its default. 06:56.970 --> 06:59.100 So something to be aware of. 06:59.130 --> 07:04.440 If you want to hardcode the values you can or you can make this a variable. 07:04.440 --> 07:12.630 But we could take this background brush and set its tint default value if we want to make it dark blue, 07:12.870 --> 07:15.930 compile that and now we see it's back to the blue. 07:15.930 --> 07:17.820 So there's different ways to do it. 07:17.820 --> 07:25.440 But this is going to be a parameter that can be set on child blueprints of this if we want to do that. 07:25.440 --> 07:31.760 So let's collapse this to a function and we'll call this update background brush. 07:31.760 --> 07:33.590 Okay, We want a border. 07:33.590 --> 07:35.690 So I'm going to have another image. 07:35.690 --> 07:37.790 So let's get an image on here. 07:37.790 --> 07:45.320 I'm going to put it onto the overlay, but just in front of the background, I'm going to fill horizontally 07:45.320 --> 07:46.250 and vertically. 07:46.250 --> 07:51.470 And for the image, I'm going to search for border and use border one. 07:51.770 --> 07:53.660 And this one's actually a lower res. 07:53.660 --> 07:56.870 I'm going to use border one PNG, that one's higher res. 07:57.110 --> 07:59.540 And I'd like to draw this as a border. 07:59.540 --> 08:04.790 So I'm going to select, draw as and change from image to border. 08:04.790 --> 08:10.280 And for margin, I'm going to set these margins to a certain value. 08:10.280 --> 08:15.170 I'm going to go up to about 0.5 for all of them. 08:17.880 --> 08:22.530 So pasting in 0.5 for all of these and that gives me a border. 08:22.530 --> 08:29.670 And a border is kind of nice because if we take our size box and we change these values, we see that 08:29.670 --> 08:33.990 the border will sort of stretch to how we want it to look. 08:33.990 --> 08:39.990 Now if you don't stretch it too much, we shouldn't see a whole lot of actual stretching. 08:39.990 --> 08:49.740 But for the rough ballpark size of 80 for X and 45 for Y, a margin of 0.5 is going to work. 08:49.920 --> 08:51.240 So we have this image. 08:51.240 --> 08:54.510 I'm going to rename this to image Underscore border. 08:54.900 --> 08:58.890 And this can also be set as a parameter. 08:58.890 --> 09:04.620 But really, I'm not going to parameterize this for now. 09:04.620 --> 09:07.830 I think that's something I'll come back to in the future. 09:07.830 --> 09:11.730 I don't want to make this have too many features if I'm not going to use them. 09:11.730 --> 09:17.560 So we know how to make variables and parameters using event pre construct. 09:17.560 --> 09:19.810 We'll come back to that if we need to. 09:19.810 --> 09:24.460 But I'm going to move on because we need some text for the number. 09:24.460 --> 09:27.790 So I'm going to get a text in here and drag that in. 09:28.730 --> 09:35.360 And for this text, I'm going to set the default text to a number, let's say 99, so we can see what 09:35.360 --> 09:37.400 it looks like with a two digit number. 09:37.550 --> 09:42.050 Now horizontal and vertical alignment can be both set to center. 09:42.080 --> 09:48.470 The justification can be set to center and we can change the font of this. 09:48.590 --> 09:55.760 And I'm going to choose Amarant and I'll lower the size down to about 17. 09:55.910 --> 10:00.200 And I like to use outlines, so I'm going to put an outline size of one. 10:00.200 --> 10:05.540 So it's hard to see, but there's a black outline around the numbers and now we see what it looks like 10:05.540 --> 10:10.010 with some text on there and we have our numbers. 10:10.010 --> 10:10.610 Now. 10:10.610 --> 10:16.700 This text here should be a variable and that way we can come in here and if we wanted to, we could 10:16.700 --> 10:20.690 make a function to set the text for this setting. 10:20.690 --> 10:26.480 The text is definitely something we'll want to do, but we'll cross that bridge when we get there. 10:26.480 --> 10:35.280 For now, I'm going to call this text block underscore value as this is that actual value of our framed 10:35.280 --> 10:35.940 value. 10:35.940 --> 10:40.350 And now we have this widget we can use in any number of settings. 10:40.350 --> 10:44.610 And because we made the background a parameter, we can change that. 10:44.760 --> 10:49.560 I really don't see us needing to change the frame if we don't want a frame on there. 10:49.560 --> 10:53.760 Well we could I suppose, make that a parameter and change that. 10:53.760 --> 10:55.680 But for now I think this is good. 10:55.680 --> 10:57.030 We now have a framed value. 10:57.060 --> 11:03.960 We're now ready to move on to the next element in our attribute menu, the text value row. 11:03.960 --> 11:07.650 So great job and I'll see you in the next video.