WEBVTT 00:07.110 --> 00:13.680 Okay, so now that we have three different types of widgets for slots, we're going to want one overall 00:13.680 --> 00:15.840 widget to show several of these. 00:16.290 --> 00:19.680 So we're going to start in our load menu folder. 00:19.680 --> 00:23.130 We're going to create a user interface based on Widget Blueprint. 00:23.130 --> 00:31.350 And I'm going to choose User Widget and select it and call this Wbhp load menu and Load menu. 00:31.350 --> 00:34.410 I'd like to have a canvas panel. 00:35.790 --> 00:37.710 That's going to be the first thing. 00:38.010 --> 00:43.680 And then I'd like three of these widgets, but I'm not going to just bring in a load slot, take in 00:43.680 --> 00:49.860 or a load slot, enter name or load slot vacant because I'd like them to be switchable. 00:49.860 --> 00:54.180 I'd like it to switch between those three based on the context. 00:54.180 --> 00:55.680 And there's a widget for that. 00:55.680 --> 00:57.690 It's called a widget switcher. 00:57.690 --> 01:03.750 If I bring in a widget switcher onto the canvas panel, then my widget switcher looks like this. 01:03.750 --> 01:09.660 And the widget switcher can have different widgets that it can switch between. 01:10.110 --> 01:11.460 So we'll get to that. 01:11.460 --> 01:15.960 But first I want to anchor it to the center of the screen. 01:15.960 --> 01:25.950 I'd like to set its alignment to 0.5 for the X, and set its position x to zero and position Y to zero. 01:25.950 --> 01:32.010 Actually want my alignment 0.5 in the Y, so zero will make it centered in the Y as well. 01:32.430 --> 01:36.780 So this is perfectly centered, but I'll go ahead and move this one to the left. 01:36.780 --> 01:37.980 And we'll have three of them. 01:37.980 --> 01:40.710 One in the middle, one to the left, one to the right. 01:40.710 --> 01:42.690 So this can go to -500. 01:42.690 --> 01:48.870 Actually now for the widget switcher we have this concept of an active widget index. 01:49.230 --> 01:53.910 And then we can add widgets to the widget switcher depending on the index. 01:54.670 --> 01:57.910 So how do we get widgets into the widget switcher? 01:58.150 --> 02:03.670 Well, if we search for WP load screen or just load, we can bring one in. 02:03.670 --> 02:08.020 Let's get load slot vacant and bring it on to the widget switcher. 02:08.470 --> 02:12.640 So you can see the widget switcher can contain widgets inside of it. 02:12.640 --> 02:14.770 So we can put in a slot vacant. 02:14.770 --> 02:17.470 We can put in a slot enter name. 02:18.180 --> 02:22.170 Right onto the widget switcher and a load slot taken. 02:23.680 --> 02:27.820 And as you can see, we have three widgets in here. 02:27.820 --> 02:31.720 And if I select one it changes what we see right here. 02:34.620 --> 02:39.720 And the widget switcher is going to show one of those, depending on the active widget index. 02:39.720 --> 02:42.510 If I change it to one, it goes to the second one. 02:42.510 --> 02:46.140 If I change it to two, it goes to the third, and so on. 02:47.250 --> 02:55.980 So there's our first widget switcher and I'm going to rename this to switcher underscore zero. 02:56.040 --> 02:57.420 And we'll have three of them. 02:57.420 --> 03:04.560 So I'm going to take switcher zero control C control V only this second switcher needs to go on the 03:04.560 --> 03:07.500 canvas panel not inside of switcher zero. 03:07.500 --> 03:09.480 This is going to be switcher one. 03:09.720 --> 03:11.790 It's going to be anchored to the center. 03:11.790 --> 03:15.660 We'll have its alignment X and Y both set to 0.5. 03:16.050 --> 03:23.520 We'll have its position X set to zero, and we'll have its position y set to zero as well. 03:23.820 --> 03:25.500 Now its size is all out of whack. 03:25.500 --> 03:30.600 So we're going to copy the size from our first widget switcher, which by the way doesn't really have 03:30.600 --> 03:32.040 round numbers here. 03:32.040 --> 03:39.570 We're going to set this to the size that we made our widget 256 for the X 300 for the Y. 03:39.570 --> 03:45.780 And we'll use that for our second widget switcher size x 256 300 for Y. 03:47.200 --> 03:48.760 So there's our second. 03:49.000 --> 03:50.650 Let's control C the first one. 03:50.650 --> 03:52.870 Select the canvas panel this time. 03:52.870 --> 03:58.090 And control V will make this switcher two and anchor it to the center. 03:58.090 --> 04:05.230 Set its position Y to zero and position X to 500 as that first one is -500. 04:08.260 --> 04:09.280 And there we go. 04:09.310 --> 04:14.950 Now there's three things we need, but we want the ability to play the game. 04:14.950 --> 04:22.420 Once we've selected a slot that's valid and we want to be able to exit or return back to the main menu. 04:22.420 --> 04:23.350 So a quit. 04:23.350 --> 04:30.790 And in addition to quitting, I'd like the opportunity to clear a slot to delete the data that was in 04:30.790 --> 04:31.510 one slot. 04:31.510 --> 04:34.930 So really I'm going to have three wide buttons. 04:35.200 --> 04:39.460 So I'm going to bring in one, two and three. 04:40.110 --> 04:44.040 Now the first one, I'm going to increase its size a bit. 04:44.040 --> 04:48.390 I'm going to change its text to say play. 04:49.050 --> 04:59.760 And I'll go ahead and make its size around number 160 for X and 7075 now 65 for Y. 04:59.760 --> 05:04.500 And I'll anchor it to the bottom center and bring its position y down. 05:04.500 --> 05:07.830 We'll actually align it to 0.5 for the X. 05:07.830 --> 05:13.260 And I'll bring it in a bit now because I just did all those changes. 05:13.260 --> 05:14.730 I'm just going to copy this button. 05:14.730 --> 05:22.290 So I'm going to take this first I'll rename it to button underscore Play control C select the canvas 05:22.290 --> 05:27.210 panel control V twice and I'll take the first one. 05:28.410 --> 05:30.690 And I know it's anchored correctly. 05:30.750 --> 05:35.850 I'm going to set its y though position y -139. 05:37.200 --> 05:44.820 We'll put it there, set its position x to zero, and then use the same position y for the third one. 05:45.730 --> 05:50.140 Select the first one to see its position X is -277. 05:50.170 --> 05:52.810 I'm going to make it -270. 05:54.110 --> 05:56.780 And this one will be positive 270. 05:58.140 --> 06:00.780 Now I just need to change their text. 06:00.780 --> 06:04.200 So this one is going to be delete. 06:05.490 --> 06:07.860 And this one is going to say quit. 06:08.850 --> 06:11.670 So we have play delete and quit. 06:11.910 --> 06:16.680 So I plan on being able to select one of these that has a valid slot. 06:17.250 --> 06:22.230 Once we're able to play that slot, play will be activated. 06:22.230 --> 06:27.150 It won't be disabled, but we'll also be able to delete a taken slot as well. 06:27.150 --> 06:29.670 And quit should always be active. 06:30.410 --> 06:32.900 In fact, we could even program quit right now. 06:32.900 --> 06:34.730 We can go to event construct. 06:34.730 --> 06:39.080 We can take that button, which, by the way, these three all need to be variables. 06:40.760 --> 06:45.740 And we can take button quit, which we never actually renamed. 06:46.190 --> 06:48.560 This one is button delete. 06:50.330 --> 06:51.620 This one is button quit. 06:55.570 --> 06:57.730 And we'll take button quit. 06:58.350 --> 06:59.700 We'll get its button. 07:02.100 --> 07:03.660 Assign onclicked. 07:05.450 --> 07:07.400 And we want to return to the main menu. 07:07.400 --> 07:09.800 We're just going to say open level. 07:10.790 --> 07:13.100 And we can even use an object reference. 07:13.100 --> 07:20.240 We can promote this to a variable, and we can set this level if we compile to a default value of. 07:20.240 --> 07:21.170 Main menu. 07:26.740 --> 07:29.110 So at least we have a working quit button. 07:29.200 --> 07:34.210 Now, I'd like to just add this to the viewport in the level blueprint. 07:34.600 --> 07:39.280 Just because I don't really have a designated actor to handle these things. 07:39.280 --> 07:45.700 And for this load menu, using the level blueprint is just fine. 07:45.700 --> 07:47.650 I'm going to create a widget. 07:50.320 --> 07:53.260 It's going to be wbbp load. 07:54.640 --> 07:55.660 Menu. 07:57.870 --> 07:59.910 I'm going to delete event tech. 07:59.910 --> 08:01.800 We're going to add this to the viewport. 08:04.820 --> 08:07.070 And we'll get the player controller. 08:11.150 --> 08:17.420 We're going to set input mode UI only and focus on this widget. 08:17.840 --> 08:23.630 And then we'll show the mouse cursor with set show mouse cursor and we'll set it to true. 08:25.800 --> 08:31.590 And with that we can press play and there's our widget and we can press quit. 08:32.880 --> 08:35.070 And it takes us back and we press quit. 08:35.070 --> 08:35.460 Here. 08:35.460 --> 08:36.480 We exit the game. 08:36.990 --> 08:39.930 So now we have a way to maneuver through our levels. 08:40.500 --> 08:42.960 And we have these three widgets now. 08:42.990 --> 08:46.590 Hovering is making this go a little bit out of whack. 08:46.590 --> 08:50.790 And that's because we didn't set the sizes for on hovered. 08:50.790 --> 08:53.850 And it's kind of making that button smaller. 08:53.850 --> 08:55.440 If I go up to here it's fine. 08:55.440 --> 08:56.580 So we'll fix that. 08:56.580 --> 09:01.320 And I also want to bring these side widgets in to the middle just a bit. 09:03.150 --> 09:04.860 So a couple of small tweaks. 09:04.860 --> 09:07.890 We'll go to load slot vacant. 09:08.640 --> 09:13.110 And the size is 120 for x and y for the normal. 09:13.110 --> 09:14.370 Let's go to Harvard. 09:15.140 --> 09:17.390 And set the image size there. 09:17.930 --> 09:20.360 We'll go to pressed and do the same thing. 09:20.360 --> 09:22.250 Image size one 2120. 09:23.290 --> 09:24.220 Disabled. 09:24.220 --> 09:24.970 Same thing. 09:24.970 --> 09:26.740 Image size one 2120. 09:28.930 --> 09:30.550 That's going to fix that. 09:34.760 --> 09:35.840 Press looks good. 09:35.870 --> 09:36.860 Harvard looks good. 09:36.890 --> 09:38.420 We can't see disabled. 09:38.990 --> 09:42.770 Okay, now we can bring these side widgets in just a bit. 09:42.770 --> 09:44.480 So I'm going to take this one. 09:44.480 --> 09:45.830 And. 09:47.000 --> 09:50.720 I'm actually going to select switcher zero and we'll bring it in a bit. 09:51.260 --> 09:58.100 Let's try -350, which means we'll put this one switcher two at 350. 10:02.970 --> 10:04.590 So that's what it looks like. 10:07.890 --> 10:08.850 Perfect. 10:10.490 --> 10:16.400 And of course, we can always go back to our material if we want to tweak that as well. 10:16.430 --> 10:19.130 I think it might be maybe better. 10:20.010 --> 10:27.570 A different color, or the game aura seems to revolve around the color purple, purples, and blues. 10:28.260 --> 10:30.510 So a purple might be good. 10:38.120 --> 10:40.280 And with that we have a load menu. 10:40.280 --> 10:42.890 Now we just need to make it functional. 10:46.490 --> 10:48.650 I might actually desaturate this a bit. 11:08.010 --> 11:08.400 Okay. 11:08.400 --> 11:09.780 I think I've tweaked with it enough. 11:09.780 --> 11:11.790 And with that we have a load menu. 11:12.780 --> 11:20.280 Okay, so the last thing is to make this functional and to actually be able to load in saved data. 11:20.640 --> 11:28.350 And if we press play, then we need to know which loaded slot we have selected so we can travel to the 11:28.350 --> 11:33.570 correct map and we can load in the stats once we get to that map. 11:33.810 --> 11:39.030 So we have a few things to do to make this functional, and we'll continue in the next video. 11:39.060 --> 11:40.140 I'll see you soon.