WEBVTT 00:06.910 --> 00:08.050 Welcome back. 00:08.230 --> 00:13.740 We're just about ready to start adding this to the viewport to try to see what it looks like. 00:13.750 --> 00:16.690 But there's a couple of changes I'd like to make. 00:16.690 --> 00:21.850 We're not done with this by any means, but I'd like to adjust a couple of things. 00:21.850 --> 00:28.330 For one, our scroll bar has secondary attributes, so I'd like this to say secondary attributes just 00:28.330 --> 00:30.640 beneath our primary attributes. 00:30.820 --> 00:38.470 And this text primary attributes has just about the perfect font size and characteristics. 00:38.470 --> 00:45.880 So I'm going to copy it and come down to just beneath our scroll box and paste it. 00:45.880 --> 00:48.280 So I've collapsed the scroll box. 00:48.280 --> 00:54.550 I'm going to select the scroll box, Ctrl V, and there's my primary attributes and actually looks like 00:54.550 --> 01:00.040 it went into the scroll box and that's not what I want, so I need to drag this out of the scroll box 01:00.040 --> 01:01.330 if I can. 01:03.790 --> 01:04.120 Let's see. 01:04.120 --> 01:10.690 I just dragged it right there above the scroll box that put it outside of it, which is what I wanted. 01:10.930 --> 01:18.400 Now clicking on Fill Empty space lets me put it in the middle and I'm going to copy one of the spacers 01:18.400 --> 01:26.350 and just paste it just beneath that text and then drag it above the text and I'll click on the text 01:26.350 --> 01:29.950 and control V again to get that spacer there. 01:30.220 --> 01:37.240 Now it looks like I'm running out of room, so I think my spacers need to be squeezed a little bit. 01:37.240 --> 01:41.380 So I'm going to get this top one and bring its size down. 01:41.440 --> 01:49.000 I think we can put it down to about five and I'm going to right click and copy its size and just select 01:49.000 --> 01:52.840 each of these subsequent spacers and paste in that size. 01:52.840 --> 02:01.150 That way the size will be a height of five for all of them and hopefully this will give us more room. 02:01.150 --> 02:02.890 So we'll get that one. 02:02.920 --> 02:05.030 We'll get this one here. 02:06.280 --> 02:07.570 And this one here. 02:08.220 --> 02:10.020 And then there's one under. 02:10.050 --> 02:12.450 We'll go ahead and paste it there as well. 02:12.600 --> 02:15.000 And now we have a little bit more room. 02:15.210 --> 02:20.520 Now, this text should say secondary attributes, so I'm going to change its text. 02:21.750 --> 02:23.100 That looks good. 02:23.100 --> 02:27.180 And I just realized this should be above the scroll box, shouldn't it? 02:27.180 --> 02:33.870 So I'm going to take the secondary attributes and drag it to just above the scroll box and drag one 02:33.870 --> 02:35.490 of my spacers up there. 02:36.060 --> 02:37.110 There we go. 02:37.110 --> 02:40.400 So we have secondary attributes there. 02:40.410 --> 02:47.160 And of course we could take this spacer between the primary and secondary and make it a little bigger. 02:47.160 --> 02:52.290 I'll make it ten, maybe 15 and just below the secondary attributes. 02:52.290 --> 02:54.840 This one can be 15 as well. 02:55.260 --> 03:00.090 Now, in my plan I had progress bars for health and mana down there. 03:00.090 --> 03:01.440 We can add that later. 03:01.440 --> 03:08.350 But what's more important right now is to have a widget for closing the menu. 03:08.380 --> 03:11.260 We need essentially an X button, right? 03:11.260 --> 03:15.100 So we're going to add another widget to this. 03:15.100 --> 03:22.480 I'd like to collapse the wrap box and put something here in the overlay so it's not in the wrap box. 03:22.480 --> 03:25.130 I'd like it right down here at the bottom, right. 03:25.150 --> 03:28.180 So for this I'm going to use another size box. 03:28.670 --> 03:31.970 So dragging a size box on to the overlay route. 03:32.000 --> 03:35.060 We'll get our size box way down there. 03:35.210 --> 03:42.350 I'm going to collapse the wrap box so I can see my new size box and it's way up there at the top, right. 03:42.530 --> 03:47.810 I'm going to set horizontal alignment to right and vertical alignment to bottom. 03:47.810 --> 03:55.460 So it's down here at the bottom and I'd like to check width and height override so that I can create 03:55.460 --> 03:58.940 a larger widget, something like this. 03:59.240 --> 04:05.420 So I'm thinking maybe 40 by 40, 50 by 50 something along those lines. 04:05.420 --> 04:09.260 And then I'll up the padding for the right and the bottom. 04:09.260 --> 04:13.700 So I'm going to try a padding of 50 for the right, 50 for the bottom. 04:13.700 --> 04:15.050 That's a little too much. 04:15.050 --> 04:20.390 So I'm going to cut it down to 25 and 25, and that looks pretty good. 04:20.390 --> 04:26.480 And now my size box can get its own overlay and then I can have things in it. 04:26.480 --> 04:30.570 So let's get an overlay on to that size box. 04:30.570 --> 04:37.680 Selecting this overlay, I can now put things inside of it, such as an image for a button border. 04:37.680 --> 04:39.180 So I'm going to drag one in. 04:39.180 --> 04:47.730 I'm going to call this image underscore close button border and I'm going to set it to fill for horizontal 04:47.730 --> 04:53.400 and vertical alignment and I'm going to search for border and get my button border. 04:53.430 --> 04:54.630 There it is. 04:54.660 --> 04:56.760 It's going to be draw as image. 04:56.760 --> 04:57.960 It looks good. 04:57.960 --> 05:00.780 And on top of that, we're going to have a button. 05:00.780 --> 05:02.280 So I'm going to search for button. 05:02.950 --> 05:05.890 And drag that button onto the overlay. 05:05.920 --> 05:08.770 It's going to go on top of the border. 05:08.800 --> 05:10.510 We're going to set it to fill. 05:10.510 --> 05:14.560 And for its normal image, I'm going to search for Button. 05:14.950 --> 05:16.630 I'm going to copy the word button. 05:16.660 --> 05:18.250 Choose button there. 05:18.250 --> 05:20.230 And by the way, these are all tinted. 05:20.230 --> 05:28.270 And if you don't want them tinted, you can select the tint and drag that value up to white like so. 05:28.270 --> 05:31.180 And I'm going to choose draw as image. 05:31.180 --> 05:37.720 So it's not drawn as a rounded box and I'm going to collapse normal open hovered search for button and 05:37.720 --> 05:39.580 get my button highlighted. 05:39.610 --> 05:41.980 I'm going to make sure that's not tinted at all. 05:42.010 --> 05:44.650 Draw as image and collapse. 05:44.680 --> 05:49.060 Next for pressed I'm going to search for button pressed. 05:49.770 --> 05:55.230 Drag that value up for the tent, draw as image and collapse. 05:55.230 --> 05:59.070 And finally, for disabled, I'm going to search for button grayed out. 05:59.100 --> 06:05.160 This one already has a full on tint of white and already has draw as image. 06:05.160 --> 06:08.210 Basically the properties I wanted all the others to have. 06:08.220 --> 06:15.150 And now we have a button and I just need an x here so I'm going to drag some text onto it. 06:15.150 --> 06:16.680 So here's text. 06:16.710 --> 06:22.770 I'm going to drag it onto the button and replace the text with an uppercase X like so. 06:22.770 --> 06:29.910 And I'd like to have this justified in the center and we'll bring that font size down and we'll give 06:29.910 --> 06:31.320 it an outline size of one. 06:31.320 --> 06:32.970 And I think I'll leave it at Roboto. 06:33.000 --> 06:34.320 That looks pretty good. 06:34.560 --> 06:40.620 Font size can go down to probably 16 and I think that looks pretty good. 06:40.830 --> 06:42.570 So now we have a button. 06:42.570 --> 06:49.930 Now I'm going to rename this button to button underscore close and now we have a close button and it's 06:49.930 --> 06:52.930 looking like it's at pretty much a good spot. 06:52.930 --> 06:55.630 So now we just need to add this to the viewport. 06:55.660 --> 06:57.400 So how are we going to do that? 06:57.430 --> 07:04.960 Well, we're going to do it from our overlay widget and I'd like our overlay widget to have a button. 07:04.960 --> 07:06.880 So let's go into that. 07:06.880 --> 07:15.910 We'll go to Blueprints UI Overlay, and here's our overlay and I'd like a button here to open the attribute 07:15.910 --> 07:16.690 menu. 07:16.960 --> 07:23.980 Now at this point, we're doing a lot of similar things over and over when it comes to adding a button, 07:23.980 --> 07:32.920 right, where adding an overlay with an image and that image has an optional border, it has the button 07:32.920 --> 07:34.720 itself and it has the text. 07:34.720 --> 07:41.230 So a button with all these qualities could really just be a widget itself. 07:41.230 --> 07:46.210 So I'd kind of like a red button for a widget. 07:46.240 --> 07:54.930 We can make a button for the overlay menu right here and in the assets we have a wide button. 07:54.930 --> 08:03.660 So if we go into our assets folder into UI and two button red, that's the regular button we have, 08:03.690 --> 08:07.050 but there's also a folder called Wide Button Red. 08:07.050 --> 08:10.500 If we double click that, we see that we have a wider button. 08:10.770 --> 08:17.700 So we could just create a parent button widget blueprint and we can set these as parameters that we 08:17.700 --> 08:18.600 can change. 08:18.600 --> 08:20.940 And I think that's something that I'd like to do. 08:21.120 --> 08:24.660 So let's go ahead and create that widget. 08:24.660 --> 08:33.210 I'm going to actually browse to my UI folder and I'm going to make a new folder in UI called Button 08:33.990 --> 08:37.860 and we'll make a button base widget blueprint here. 08:37.860 --> 08:44.700 So I'm going to create a user interface widget blueprint selecting or a user widget and this will be 08:44.770 --> 08:47.490 WP underscore button. 08:47.520 --> 08:49.650 This will be our base button class. 08:49.650 --> 08:58.180 So we know that our attribute menu has this button down here, which is a button with a size, right? 08:58.180 --> 09:02.470 We have a size box set to 40 by 40. 09:02.470 --> 09:11.080 So for our WP button we're going to have a size box and I'd like it to have the same default 40 by 40. 09:11.080 --> 09:19.240 So I'm going to select size box check width and height override change from fill screen to desired and 09:19.240 --> 09:21.460 give these values 40 by 40. 09:21.460 --> 09:25.270 And in fact these will be parameters that we can change. 09:25.360 --> 09:28.420 So I'm going to go ahead and go into the graph tab. 09:28.450 --> 09:34.900 We're going to add two variables, one called box width, which will be a float. 09:35.520 --> 09:43.920 One called box height, which will also be a float, will compile and give these both default values 09:43.950 --> 09:45.210 of 40. 09:46.990 --> 09:54.310 And we'll go back to the designer, take our size box check is variable and back in the graph tab will 09:54.310 --> 09:59.860 control drag it out and set width override. 10:00.840 --> 10:03.180 Looks like it's called size box 31. 10:03.180 --> 10:07.350 So really quick, let's go back and rename this to size box root. 10:08.180 --> 10:16.790 And we'll take size box route and call set height override and we'll go ahead and hook this up. 10:17.060 --> 10:25.460 I'm going to move these two nodes down and we'll plug in box width and box height, respectively. 10:25.970 --> 10:33.580 Hook these up and we'll collapse to a function called update box size. 10:33.590 --> 10:35.100 So there's our box. 10:35.120 --> 10:37.970 Now for the button, we're going to want a border. 10:38.000 --> 10:41.660 We're going to want a button widget and we're going to want text. 10:41.670 --> 10:46.100 So let's go in to the pallet and search for image. 10:46.130 --> 10:48.080 We'll drag an image in. 10:48.110 --> 10:52.250 We'll select that image and rename it Image Border. 10:52.280 --> 10:57.200 Right away I'll check is variable and we'll set a default value. 10:57.210 --> 11:03.980 I'm going to search for button and choose button border like so and we're going to have a function to 11:03.980 --> 11:04.790 set the brush. 11:04.790 --> 11:06.370 So we'll go back to graph. 11:06.380 --> 11:14.610 We'll take image border control, drag it out and call set brush and we'll take our brush. 11:16.460 --> 11:18.110 Promote it to a variable call. 11:18.110 --> 11:22.350 This border brush will compile. 11:22.370 --> 11:26.210 Set the default value for border brush by choosing an image. 11:26.210 --> 11:28.520 I'm going to choose button border. 11:29.570 --> 11:36.200 We'll go ahead and hook this up, select it all, collapse the function and call this update border 11:36.200 --> 11:36.950 brush. 11:37.730 --> 11:38.950 Now we need a button. 11:38.960 --> 11:43.730 Now For the button we're going to search for button and drag one in. 11:43.730 --> 11:47.420 And we can't until we have an overlay, of course. 11:47.420 --> 11:48.710 So something I forgot. 11:48.710 --> 11:49.460 But that's okay. 11:49.460 --> 11:53.780 We can right click on Image Border and choose Wrap width overlay. 11:54.080 --> 12:00.110 Now our image border is wrapped with an overlay and we just have to make sure Image Border is now set 12:00.110 --> 12:06.170 to fill horizontal and vertical alignment and we can rename the overlay to overlay route. 12:06.200 --> 12:07.340 That's fine. 12:07.580 --> 12:10.520 And now we can drag the button onto the overlay. 12:10.940 --> 12:18.980 I'm going to select the button, choose fill horizontal and vertical check is variable and we have a 12:18.980 --> 12:21.920 number of things to set for the button style. 12:21.920 --> 12:24.170 So let's just go into the graph. 12:24.170 --> 12:25.370 We'll take our button. 12:25.370 --> 12:28.820 It's called button to 60, so let's rename it to just button. 12:30.500 --> 12:34.280 And we'll take our button and we're going to call set style. 12:34.970 --> 12:42.030 So let's use the function set style and for end style, let's drag it off and make button style. 12:42.050 --> 12:49.460 So now we have brushes for normal, hovered, pressed disabled, and then of course, the padding and 12:49.460 --> 12:51.530 even sounds for all of this. 12:51.530 --> 12:56.960 And what I'd like to do is set the normal hovered, pressed and disabled brushes. 12:57.110 --> 13:06.770 So I'm going to drag off of normal promote this to a variable and call this button normal brush and 13:06.770 --> 13:08.660 we'll set its default values here. 13:08.660 --> 13:14.810 So before doing that, let's go ahead and get these all into their own button properties category. 13:14.900 --> 13:23.210 So I'm going to create a category here called Button Properties, and we'll select these and one by 13:23.210 --> 13:25.910 one put them into button properties as well. 13:26.880 --> 13:28.960 Box, height, box width. 13:28.980 --> 13:31.230 Those all go into button properties. 13:31.260 --> 13:33.210 Our border brush as well. 13:33.310 --> 13:34.590 That'll go in there. 13:34.620 --> 13:36.720 So now they're all in the same category. 13:36.720 --> 13:42.240 So we have button normal brush I'm going to go ahead and drag off of hovered, promote a variable and 13:42.240 --> 13:48.690 call this button hovered brush and I'll do the same for pressed and disabled. 13:48.690 --> 13:56.190 So here's pressed promote to variable button pressed brush and disabled. 13:56.190 --> 13:57.720 We'll drag this off. 13:58.350 --> 14:07.680 Promote a variable and we'll call this button disabled brush and we can give these default values we 14:07.680 --> 14:10.670 have to compile and we'll start with normal. 14:10.680 --> 14:19.500 So button normal brush will go down to the brush and we'll choose the button texture. 14:19.620 --> 14:22.770 We'll give it that for the default notice. 14:22.800 --> 14:28.500 It's automatically set to draw as image with a white tint so we don't have to worry about that. 14:28.800 --> 14:30.590 Next we have button hovered. 14:30.600 --> 14:33.870 I'm going to set its category to button properties. 14:33.990 --> 14:37.950 We're going to expand the brush and we just need to set the image. 14:37.950 --> 14:43.890 I'm going to search for button and this is hovered, so we're going to choose button highlighted next 14:43.890 --> 14:45.120 for button pressed. 14:45.150 --> 14:53.070 We'll stick it in button properties for the category, we'll expand the brush, we'll search for button. 14:53.070 --> 14:54.300 And this is pressed. 14:54.300 --> 14:59.170 So we're going to choose button pressed like so next is disabled. 14:59.170 --> 15:05.890 We'll stick this in button properties, expand the brush, search for button and choose button grayed 15:05.890 --> 15:08.230 out, compile, save. 15:08.230 --> 15:10.960 And now we're setting the brush style. 15:11.080 --> 15:13.870 Now we haven't hooked anything up so it looks gray. 15:13.870 --> 15:18.430 But now as soon as we hook it up and compile, look at the designer. 15:18.460 --> 15:19.150 There it is. 15:19.150 --> 15:20.500 It looks great. 15:20.620 --> 15:24.310 And this can all be collapsed into a function as well. 15:24.310 --> 15:30.700 So we'll right click Collapse two function and we're going to call this update button brush, or we 15:30.700 --> 15:33.850 can call it brushes as there are multiple. 15:34.270 --> 15:34.690 Okay. 15:34.690 --> 15:36.190 So we have our button widget. 15:36.220 --> 15:39.160 We do want some kind of text here. 15:39.190 --> 15:43.870 Even if we want this set to nothing, we want to be able to set the text. 15:43.870 --> 15:48.670 So I'm going to search for text and drag text onto it. 15:48.820 --> 15:56.050 We'll give it a default value of, say, an uppercase X and we'll make sure it's centered. 15:56.050 --> 15:58.570 We'll make sure its justification is center. 15:58.600 --> 16:06.730 We'll all give it a decent looking font size like 16, an outline size of one, but these are all properties 16:06.730 --> 16:07.840 of the appearance. 16:07.840 --> 16:13.990 We have the font here so we can make this all parameter based. 16:14.020 --> 16:15.700 So I'd like that to be the case. 16:15.700 --> 16:22.810 I'd like the text to be a parameter and I'd like the font also to be a parameter so we can change it. 16:22.810 --> 16:30.100 So we'll go into graph actually first we'll take our text and check is variable and now in the graph 16:30.100 --> 16:32.110 we can see text block zero. 16:32.140 --> 16:36.910 That's basically what it got renamed to, but we can name it text. 16:37.000 --> 16:44.650 And here in graph we can control, drag out text and we can call the function set text, set, text. 16:44.680 --> 16:50.590 We want to use the function call and we want to promote the text to a variable. 16:50.590 --> 16:54.970 So promote that to a variable and we'll call this button text. 16:55.270 --> 16:59.110 We'll give it the category of button properties. 16:59.140 --> 17:04.630 We'll compile so we can give it a default value of uppercase X like so. 17:04.660 --> 17:12.850 So now our text for the button is data driven, Now it's an X already, but we can take button text 17:12.850 --> 17:15.580 and give it, say the plus sign. 17:16.720 --> 17:19.660 And back here, if we take a look, we see it's a plus. 17:19.660 --> 17:21.370 So it is working. 17:21.460 --> 17:26.410 But I will set that back to an X uppercase X by default. 17:26.950 --> 17:28.120 So that's the text. 17:28.120 --> 17:30.160 But what if we want to change the font? 17:30.160 --> 17:32.620 So let's duplicate the text. 17:33.360 --> 17:38.400 I'm going to type in font and we see that we can set font if we choose the function, we see that it 17:38.400 --> 17:40.620 takes a font info. 17:41.150 --> 17:49.160 That's a structure we can drag off and make one make slate font info and if we want, we can have the 17:49.160 --> 17:55.790 font family be a parameter, the font material, outline settings, typeface size, all of this stuff. 17:55.790 --> 17:58.760 So we'll make a number of parameters here. 17:58.760 --> 18:02.330 We can make the font family a parameter. 18:02.330 --> 18:03.800 We can promote this to a variable. 18:03.830 --> 18:07.790 By the way, it's a font family object reference. 18:07.790 --> 18:09.530 We promote that to a variable. 18:09.530 --> 18:16.400 We can call that font family and we'll just put these all in the same category button properties. 18:16.400 --> 18:17.750 So we have font family. 18:17.750 --> 18:19.940 If we compile, we can set this. 18:20.120 --> 18:27.230 Now if we want this to be Roboto by default, we're going to have to click on the gear and show engine 18:27.230 --> 18:30.440 content in order to see that Roboto font. 18:30.440 --> 18:36.290 So we're going to go ahead and set it to that and then we can expand the dropdown and uncheck show engine 18:36.290 --> 18:37.100 content. 18:37.220 --> 18:41.220 So we got that set to Roboto for font material. 18:41.220 --> 18:45.780 If we want this to have a material, we can make a parameter, but we don't have to. 18:45.810 --> 18:47.130 It'll just be white. 18:47.130 --> 18:51.660 So I'm going to omit that for outline settings though. 18:51.660 --> 18:53.400 This is one I do like to make. 18:53.400 --> 19:00.330 If I use make font outline settings, I usually just set the outline size to one, but I'm going to 19:00.330 --> 19:04.230 promote that to a variable called outline size. 19:04.230 --> 19:11.640 I'm going to compile and set that to a value of one, but we can override that and this will go into 19:11.670 --> 19:13.110 button properties. 19:13.960 --> 19:17.650 The size should definitely be a variable, so we'll promote that. 19:17.680 --> 19:20.140 We'll call this font size. 19:20.900 --> 19:26.270 Compile and I believe I set it to about 16, so I'll do that. 19:26.480 --> 19:29.360 We'll go ahead and do letter spacing as well. 19:29.360 --> 19:30.950 Promote to variable. 19:31.070 --> 19:37.190 And I'm going to move these both to the category button properties. 19:38.210 --> 19:41.930 And I'm not going to set the letter spacing, but it's a variable if we want it. 19:42.050 --> 19:46.180 And I don't care about skew amount either, so I'm going to go ahead and collapse that. 19:46.190 --> 19:49.280 And we now have a set font function. 19:49.550 --> 19:55.070 Everything's looking pretty good and I think we can collapse these into functions. 19:55.070 --> 20:01.760 I'll just lump them all into one function, right click, collapse two function, and we'll call this 20:01.760 --> 20:03.200 update text. 20:04.560 --> 20:05.490 So there we go. 20:05.490 --> 20:12.070 We now have a button and we can subclass it and use it if we want to change out some of these properties. 20:12.090 --> 20:14.310 That's going to be very useful. 20:14.880 --> 20:22.350 In fact, we can replace the button we just used in our attribute menu right here in our size box. 20:22.350 --> 20:26.520 We can delete this overlay that's going to delete all the children. 20:26.520 --> 20:30.960 And for the size box, we can search for our button. 20:35.250 --> 20:37.680 And we can drag that into the size box here. 20:38.250 --> 20:45.420 And as we see now, WB button gives us exactly that type of button that we created. 20:45.540 --> 20:48.690 So yeah, we now have a close button. 20:48.900 --> 20:53.550 So now that we have a nice button, we can use this for any number of things. 20:53.550 --> 20:57.090 We've added a button to the attribute menu. 20:57.240 --> 21:01.410 And of course now this is our WB button class. 21:01.440 --> 21:07.140 We're going to have to go about figuring out how to bind to its on clicked and on hovered events and 21:07.140 --> 21:08.370 things like that. 21:08.400 --> 21:15.360 But we also have this widget with parameters we can change if we want to add say a wide button that 21:15.360 --> 21:18.990 says something like attributes that we can add to our overlay. 21:19.020 --> 21:23.970 So we're going to extend our button class in the next video and do just that. 21:23.970 --> 21:29.530 We're going to add a button to the overlay so we can open our overlay menu. 21:29.550 --> 21:33.450 So excellent job and I'll see you in the next video.