WEBVTT 00:06.850 --> 00:08.050 Welcome back. 00:08.320 --> 00:13.540 Now, our job here is to make this attributes button functional. 00:13.570 --> 00:16.000 We want to show something on the screen. 00:16.000 --> 00:19.650 When we click it right, we want to show the attributes menu. 00:19.660 --> 00:23.560 So let's go about making that happen. 00:23.830 --> 00:28.990 First of all, with the attribute menu button selected, we should check is variable that should be 00:28.990 --> 00:29.650 checked. 00:29.650 --> 00:32.350 So in the graph we can access it. 00:32.380 --> 00:34.720 Now I'm going to take event construct. 00:34.720 --> 00:42.700 This is a lot like beginplay for widgets and I'd like to assign to the onClick event for this button 00:42.700 --> 00:51.580 so I can drag attribute menu button out and it's button widget as this is a wide button which inherits 00:51.580 --> 00:53.820 from button. 00:53.830 --> 00:56.850 It's button widget is called button right here. 00:56.860 --> 01:03.340 So here in the overlay, if we have our attribute menu button, we can drag off and type button and 01:03.340 --> 01:04.300 we can get button. 01:04.300 --> 01:09.170 This is the button contained within the attribute menu button widget. 01:09.440 --> 01:17.450 Now these have events inherited from the button widget class for when things happen like the button 01:17.450 --> 01:18.500 gets clicked. 01:18.500 --> 01:26.150 If we drag off and type a sign, we have a sign on clicked, hovered, pressed, released on hovered. 01:26.150 --> 01:28.220 I'm just interested in clicked. 01:28.220 --> 01:35.840 So in event construct here for the overlay we're going to assign to on clicked. 01:35.870 --> 01:41.810 Now I really don't want to put all my logic right here and just make a big string of logic. 01:41.810 --> 01:44.060 So I'd like to make a custom event. 01:44.060 --> 01:52.100 I'm going to say custom event, and this is going to be attribute menu button clicked. 01:53.710 --> 02:00.370 And we're just going to call that event Attribute menu button clicked. 02:00.820 --> 02:08.110 I'm just going to have an event for this and we can just keep it right up here next to our event construct. 02:08.110 --> 02:09.220 That's fine. 02:09.310 --> 02:13.150 And what happens when the attribute menu button is clicked? 02:13.180 --> 02:18.820 We want to open the attribute menu and I'd also like to disable the attribute button. 02:19.840 --> 02:20.290 That way. 02:20.290 --> 02:21.550 We can't just spam it. 02:21.580 --> 02:24.740 We can't even click it if the attribute menu is open. 02:24.760 --> 02:25.750 So I'll do that. 02:25.750 --> 02:27.850 First, I'll take attribute menu button. 02:27.850 --> 02:29.620 We know how to disable it. 02:29.650 --> 02:30.880 We get the button. 02:31.680 --> 02:36.750 And with the button we use set is enabled. 02:37.610 --> 02:39.580 And we pass in false. 02:39.590 --> 02:43.870 So now if we click the button, then we'll disable the button. 02:43.880 --> 02:47.980 I'm going to save all and just test that real quick. 02:47.990 --> 02:49.970 Clicking the button disables the button. 02:49.970 --> 02:50.780 Perfect. 02:50.960 --> 02:53.540 Okay, so back to our overlay. 02:53.570 --> 02:56.240 What else do we do when it's clicked? 02:56.270 --> 03:03.650 Well, I'd like to create the attribute menu widget, so I'm going to use create widget. 03:04.820 --> 03:07.170 And choose the attribute menu. 03:07.190 --> 03:08.960 I'm going to search for attribute menu. 03:08.990 --> 03:11.750 Choose WP Attribute Menu. 03:11.900 --> 03:13.580 Now we need a player controller. 03:13.580 --> 03:20.450 And for now, just to get this working, I'm going to call get player controller passing in an index 03:20.450 --> 03:20.900 of zero. 03:20.930 --> 03:23.030 This is a gameplay statics function. 03:23.030 --> 03:27.230 We're just going to get the player controller for the locally controlled player. 03:27.230 --> 03:29.000 That's fine for now. 03:29.000 --> 03:31.190 And I'm going to add this to the viewport. 03:34.390 --> 03:39.560 So when we click the button, we're going to create the widget and add it to the viewport. 03:39.580 --> 03:41.680 Let's see what happens when we do that. 03:41.770 --> 03:43.210 Let's save all. 03:43.240 --> 03:45.790 Press play and click the button. 03:46.440 --> 03:47.290 And there it is. 03:47.310 --> 03:49.050 We've added it to the viewport. 03:49.080 --> 03:51.890 Now it's filling up the viewport, isn't it? 03:51.900 --> 03:56.240 It's just straight taking over the whole viewport. 03:56.250 --> 03:57.360 But check it out. 03:57.360 --> 03:58.710 Our other buttons are functional. 03:58.710 --> 04:02.430 We can highlight and click them and our scroll box is functional. 04:02.430 --> 04:09.240 We can scroll that and even our close button is functional in the sense that it can be highlighted and 04:09.240 --> 04:09.570 clicked. 04:09.570 --> 04:16.440 It doesn't actually close the menu or anything like that, but it's a step in the right direction right 04:16.620 --> 04:17.100 now. 04:17.100 --> 04:19.650 We don't want it filling the entire viewport. 04:19.650 --> 04:23.490 So we've seen in the past how to fix that. 04:23.490 --> 04:29.010 We have to go to our attribute menu and wrap the whole thing in an overlay. 04:29.010 --> 04:31.470 Now we already have an overlay route. 04:31.470 --> 04:39.210 I'm going to rename this from overlay route to overlay box for lack of a better name, and I'm going 04:39.210 --> 04:44.130 to right click on the size box route and wrap with an overlay. 04:44.130 --> 04:47.470 And this one can be the overlay route. 04:48.310 --> 04:49.300 Compile that. 04:49.300 --> 04:53.680 And now if we press play and open it, now we get the right size. 04:53.680 --> 04:58.060 So the overlay helps us to maintain the correct size. 04:58.060 --> 05:01.330 And now this is looking pretty nice, right? 05:01.330 --> 05:07.750 We still have just a bunch of placeholder text and placeholder buttons and we can't close the menu, 05:07.750 --> 05:12.430 but we can add this to the viewport and we can set the desired size in the viewport. 05:12.460 --> 05:15.520 The viewport position starts at zero zero at the top. 05:15.520 --> 05:15.850 Right. 05:15.850 --> 05:20.080 So say we want some padding of oh 50 pixels or so. 05:20.110 --> 05:22.000 We can do that if we want to. 05:22.030 --> 05:28.420 We can go into our UI, into overlay sub widget and we can find our message. 05:28.660 --> 05:31.570 How did we handle this for our message? 05:31.570 --> 05:33.940 Well, here's our message event. 05:34.180 --> 05:38.200 After we created the widget we called Set position in viewport. 05:38.230 --> 05:44.500 Let's go back up here and we can get our widget and call set position in viewport. 05:45.160 --> 05:51.820 I think I might have said set size, I meant position and we can set the position. 05:51.820 --> 06:01.720 We can hard code 50 and 50, for example, compile that press play and it's in by 50 and down by 50. 06:01.720 --> 06:07.510 And I'm noticing a little black line up here, which means our background could use a little bit more 06:07.510 --> 06:08.470 padding. 06:08.470 --> 06:11.350 So before we wrap up, let's go ahead and just fix that. 06:11.350 --> 06:14.110 Let's take our image background. 06:14.140 --> 06:15.790 Our padding is set to one. 06:15.790 --> 06:19.480 Let's set it to oh, say three. 06:20.100 --> 06:22.500 Maybe even five. 06:22.530 --> 06:23.820 I think that's good. 06:24.150 --> 06:27.120 And we can show that menu and that looks better. 06:27.840 --> 06:31.890 Okay, so we're showing the attribute menu, but we can't close it. 06:31.900 --> 06:36.270 I'm going to actually set that padding to 2525. 06:40.870 --> 06:42.220 That looks pretty good. 06:42.220 --> 06:50.290 And I'd kind of like to see that attributes button when the menu is open just so we can see that it's 06:50.290 --> 06:51.310 grayed out. 06:51.340 --> 06:55.270 Not a big deal, but I'm going to lower it down to about there. 06:56.340 --> 06:58.950 Now we can see it grayed out and that looks better. 06:59.130 --> 07:00.090 Okay, great. 07:00.120 --> 07:01.800 Now we're opening the menu. 07:01.830 --> 07:05.430 We just need to be able to close the menu, and we'll do that next. 07:05.460 --> 07:06.570 I'll see you soon.