WEBVTT 00:06.960 --> 00:08.040 Welcome back. 00:08.040 --> 00:10.980 So now that we have our button. 00:11.010 --> 00:14.520 A nice general button, we can use this. 00:14.550 --> 00:19.530 Instead of recreating all of this every time we need a little button. 00:19.740 --> 00:26.340 So our attribute menu now uses it for the close button, but we can also use it in our other widgets 00:26.340 --> 00:31.230 that use buttons as well, like this one that's in our text value button row. 00:31.260 --> 00:35.760 We see that we have an overlay with the border, the button and the plus there. 00:36.120 --> 00:39.000 We can actually replace that with our widget now. 00:39.000 --> 00:46.470 So I'm going to go ahead and just delete the whole overlay and simply bring in a new overlay that just 00:46.470 --> 00:48.480 deletes everything in the overlay. 00:48.480 --> 00:53.340 And then I can search for button and choose my button and bring it on in. 00:53.490 --> 00:57.450 Now I do want to set vertical alignment to center while I'm at it. 00:57.450 --> 01:04.200 I might as well set horizontal alignment to center as well, but we had a plus sign here, not an X, 01:04.200 --> 01:04.680 right? 01:04.680 --> 01:07.630 So I want to be able to set those properties on it. 01:07.660 --> 01:16.360 Now, an easy way is just making those properties editable by going to our button into the graph and 01:16.360 --> 01:21.220 into our button properties and just exposing all of these with the eye icon. 01:21.340 --> 01:27.700 I'm going to go ahead and just click the eye icon for all of them and make them all exposed. 01:28.180 --> 01:29.640 So we can edit them. 01:29.650 --> 01:37.570 So now that our button properties are all exposed, I can compile and go back into my text value button 01:37.570 --> 01:43.450 row and I always save all before starting to tamper with these things. 01:43.450 --> 01:51.010 Sometimes you can get crashes and with button selected I'm going to search for my button properties. 01:51.160 --> 01:52.270 Here they are. 01:52.270 --> 01:59.230 We can set them all from here so I can change button text to plus and I can up my font size if I want 01:59.230 --> 01:59.800 to. 02:00.010 --> 02:01.810 Let's try 22. 02:01.840 --> 02:02.650 22 is good. 02:02.650 --> 02:08.980 We have to be careful here because if I go too high, say 35, you'll see that we're running out of 02:08.980 --> 02:12.760 room and it's no longer centered properly. 02:12.760 --> 02:15.130 So I'm going to keep it at 22. 02:15.130 --> 02:16.780 I think that looks good. 02:16.870 --> 02:18.700 I'm going to compile and save. 02:18.700 --> 02:25.150 And if I look back at my attribute menu, there they are, my nice pretty plus buttons. 02:25.150 --> 02:26.350 They look great. 02:26.620 --> 02:28.040 Okay, awesome. 02:28.040 --> 02:35.300 So now we just need a button that we can use to show the attribute menu, and I'd like that on my overlay 02:35.300 --> 02:35.870 here. 02:35.900 --> 02:43.460 I'd like a button right there, but I'd like it to say attributes, not just plus or x, and that means 02:43.460 --> 02:45.020 I need a wider button. 02:45.320 --> 02:54.590 Now, if we look in our UI, in the assets folder, assets UI, there's a wide button red folder and 02:54.590 --> 02:55.910 this is what it looks like. 02:55.910 --> 03:04.910 And there are grayed outs, highlighted, pressed and an additional option for pressed options. 03:04.910 --> 03:07.340 So we have options for that. 03:07.340 --> 03:12.800 So I'd like a wide button version of my button. 03:12.800 --> 03:18.140 So I'm going to browse to the folder that it's in and make a new button based on button. 03:18.140 --> 03:20.390 And this one will be a wide button. 03:20.390 --> 03:28.040 So I'm going to go to User Interface Widget Blueprint and I'm going to search for button WP button select 03:28.040 --> 03:32.540 that and name this WP underscore wide button. 03:32.690 --> 03:40.490 So I have a wide button now and this one I can change the properties for and I'm going to change quite 03:40.490 --> 03:41.000 a few. 03:41.000 --> 03:51.380 So let's go to the graph and go to button properties and I'm going to set my box height from 40 to about 03:51.380 --> 03:55.970 60 and my box width to about 200. 03:57.040 --> 03:58.180 Looking in the designer. 03:58.180 --> 04:03.240 I see that it's quite different now and I'm going to want to change these images. 04:03.250 --> 04:05.370 For one, I don't want the border. 04:05.380 --> 04:05.770 Why? 04:05.800 --> 04:11.380 Because the wide button textures that I have already have the border on them. 04:11.380 --> 04:13.540 So I can take my border brush. 04:13.540 --> 04:21.070 I can clear it by setting it to clear and I can take the tint and I can drag the alpha down to zero. 04:21.070 --> 04:21.310 Click. 04:21.310 --> 04:21.970 Okay. 04:21.970 --> 04:25.090 And now I see in the designer that the border is gone. 04:25.300 --> 04:29.470 And now I can start changing these brushes for normal brush. 04:29.470 --> 04:34.270 I'm going to search for wide button and copy the text wide button. 04:34.270 --> 04:38.410 I'm going to choose wide button and look in the designer and there's the wide button. 04:38.410 --> 04:42.550 As we can see, it's more appropriate for a wide button. 04:42.550 --> 04:44.200 It doesn't look stretched. 04:44.380 --> 04:49.030 It might be stretched in the X direction slightly, but not really too much. 04:49.030 --> 04:55.840 We can just set that height to a higher value, say 65, 70, something like that. 04:57.030 --> 04:59.130 Okay, so that's the normal brush. 04:59.130 --> 05:04.010 I need to change the highlighted brush to wide button highlighted. 05:04.020 --> 05:08.840 I need to change the pressed brush to wide button pressed. 05:08.850 --> 05:10.560 Actually I like pressed to. 05:10.560 --> 05:18.150 It's a little bit less dark and for disabled I'm going to set it to wide button grayed out and now our 05:18.150 --> 05:19.830 button looks more appropriate. 05:19.860 --> 05:23.880 Now I also like to change the font a little bit and the text. 05:23.880 --> 05:28.560 I'm going to set the button text to something more than X, I'm just going to set it to button. 05:28.560 --> 05:34.860 And for the Font family, I'd like to set this not to Roboto, but I'm going to search for Pirata. 05:34.890 --> 05:37.470 I like Pirata one regular. 05:37.470 --> 05:40.200 I'm going to set that to Pirata one. 05:40.200 --> 05:42.120 Let's see what that looks like. 05:42.270 --> 05:43.530 Not too bad. 05:43.530 --> 05:45.950 And I think the font size can go up. 05:45.960 --> 05:49.920 I'm going to go from 16 to about maybe 22. 05:50.340 --> 05:51.120 That looks good. 05:51.120 --> 05:53.430 And we can give this some letter spacing. 05:53.550 --> 05:55.170 I'm going to select letter spacing. 05:55.170 --> 06:01.480 By the way, if any of these look grayed out, make sure you go back to WP button and compile and then 06:01.480 --> 06:03.610 you can come back and set these default values. 06:03.610 --> 06:05.830 I'm going to give a letter spacing of 200. 06:06.350 --> 06:08.340 I think that looks pretty good. 06:08.360 --> 06:13.400 And this is wide enough to accommodate for a decent amount of characters. 06:13.550 --> 06:20.900 So now that we have a wide button, we can add a wide button to our overlay, and I'd like to do that. 06:20.900 --> 06:22.940 So again, I'm going to save all. 06:23.520 --> 06:30.560 And I'm going to add a wide button to my overlay by searching for wide button and dragging one in. 06:30.570 --> 06:33.690 And there we have one and we can just play test. 06:33.690 --> 06:34.860 I can press play. 06:34.890 --> 06:40.860 We're getting our widget drawn to the screen and if I highlight it, I see that highlighted version. 06:40.860 --> 06:44.040 If I click, I see the pressed version. 06:44.040 --> 06:45.180 It's looking great. 06:45.180 --> 06:49.800 If I disabled it, we'd see the darker version, the disabled version. 06:49.920 --> 06:50.760 Excellent. 06:50.790 --> 06:52.770 Now it's just called Wide Button. 06:52.770 --> 06:58.320 I'd like to rename this to attribute menu button because that's what this will be. 06:58.320 --> 07:00.090 The attribute menu button. 07:00.210 --> 07:01.920 Let's compile that. 07:02.790 --> 07:10.100 And we have the option to change its text here in the details panel because its text is exposed. 07:10.110 --> 07:14.790 So here in button properties, let's find that text. 07:14.820 --> 07:15.570 Did I? 07:15.570 --> 07:18.260 I might not have exposed the text. 07:18.280 --> 07:19.620 Let's go to WP button. 07:19.620 --> 07:20.160 It is. 07:20.160 --> 07:21.720 It's called button text. 07:21.750 --> 07:23.730 Maybe I'm just not seeing it. 07:23.760 --> 07:24.420 There it is. 07:24.420 --> 07:24.930 Button text. 07:24.930 --> 07:26.130 I don't know why I didn't see it. 07:26.550 --> 07:32.460 I'm going to change this to say attributes, not attribute but attributes. 07:33.190 --> 07:34.650 And now we have a button. 07:34.690 --> 07:40.540 So if we go back and press play, we see attributes and we expect to be able to click that and show 07:40.540 --> 07:42.220 the attribute menu. 07:42.250 --> 07:44.800 That is the ultimate goal. 07:44.800 --> 07:52.270 So the last couple videos, we kind of spent a lot of time just making a button widget and making it 07:52.270 --> 07:56.580 nice and versatile so that we could use it and subclass it. 07:56.590 --> 08:01.600 We've seen that it's quite easy now to just change out these brushes. 08:01.600 --> 08:08.440 We can change the width and height and now we have a really nice button widget that we can use. 08:08.470 --> 08:16.330 Now the only thing to do is to show our attribute menu widget when we click the attributes button. 08:16.540 --> 08:19.600 So that means of course we're going to have to take this button. 08:19.600 --> 08:21.970 Check is variable that way. 08:21.970 --> 08:27.130 In the graph we can get that attribute menu button and do things with it. 08:27.130 --> 08:31.900 And if you wanted to just see what it looks like disabled, we could do that. 08:31.900 --> 08:34.250 We can do it in event construct. 08:34.250 --> 08:37.850 For example, we could take attribute menu button. 08:40.080 --> 08:41.940 We can get the button widget. 08:42.780 --> 08:46.320 And we can call set is enabled. 08:48.020 --> 08:51.230 Passing in false like so. 08:52.420 --> 08:54.370 We can save all and press play. 08:54.370 --> 08:55.870 And now we see what it looks like. 08:55.870 --> 08:58.200 Disabled a little bit darker. 08:58.210 --> 08:59.140 Pretty cool. 08:59.380 --> 09:01.630 Okay, so that's in the overlay. 09:01.630 --> 09:03.730 We don't really need to do that now. 09:04.000 --> 09:06.550 I think this is a good place to wrap it up. 09:06.550 --> 09:08.470 So things are looking good. 09:08.470 --> 09:14.320 And the following videos, we're going to make this button functional so we can show the attribute menu 09:14.320 --> 09:15.490 to the screen. 09:15.490 --> 09:16.840 We'll do that next. 09:16.840 --> 09:19.480 Great job and I'll see you soon.