WEBVTT 00:07.340 --> 00:08.360 Welcome back. 00:08.360 --> 00:13.760 Now our main menu is looking pretty good and it takes us to the load menu. 00:14.000 --> 00:17.450 Now here in the load menu we don't have a whole lot going on. 00:17.450 --> 00:23.270 So we are going to want a widget to show we're going to want our load menu. 00:23.270 --> 00:27.380 So why don't we go into our blueprints UI folder. 00:27.380 --> 00:29.420 We already have a main menu. 00:29.420 --> 00:31.520 Now we need a load menu folder. 00:32.150 --> 00:34.190 So this will be called Load Menu. 00:34.520 --> 00:38.060 And we'll have a widget to add to the viewport. 00:38.060 --> 00:45.680 And for this load menu I'd like to have a widget that can switch between three modes. 00:46.210 --> 00:50.560 I want to show something that indicates that we have a vacant slot. 00:50.560 --> 00:56.980 I want to use the concept of slots and we can save multiple games to individual slots. 00:57.250 --> 01:00.640 So we need some kind of widget that shows us we have a vacant slot. 01:00.640 --> 01:07.240 And then if we're coming in and we wish to load one of our previously saved games, we're going to want 01:07.240 --> 01:10.120 to see that as a taken slot. 01:10.120 --> 01:16.930 So we're going to have vacant slots and taken slots, and then we'll need a third type of widget to 01:16.930 --> 01:20.230 show when we're trying to create a new game. 01:20.500 --> 01:25.750 So if it's vacant, we'll need something that says new game or something to that effect. 01:25.750 --> 01:32.080 And if we click it, then we need to show the user the opportunity to enter in their name and play the 01:32.080 --> 01:32.710 game. 01:32.710 --> 01:37.210 So that would be a enter name slot we could call it. 01:37.240 --> 01:39.730 So we'll need three different widgets. 01:40.060 --> 01:44.200 I'm going to start off with the most simple the vacant slot. 01:44.200 --> 01:46.690 I'm going to create a new widget blueprint for this. 01:46.690 --> 01:50.170 And it's just going to be a user widget. 01:50.620 --> 01:52.600 And we'll see why very shortly. 01:52.600 --> 01:55.870 We're not going to use anything in our user widget for this. 01:55.960 --> 02:03.790 I'm going to select that and call this WB p load slot underscore vacant. 02:05.620 --> 02:08.860 So what is this load slot vacant going to have? 02:08.860 --> 02:10.420 It's going to be quite simple. 02:10.420 --> 02:17.740 I'm going to open it up and add a size box first and foremost so I can control its size. 02:18.310 --> 02:21.640 And I'm going to take this size box. 02:22.030 --> 02:25.030 Set this from fill screen to desired. 02:26.330 --> 02:32.450 Select the size box, click Width and Height override and I'm going to override the size. 02:32.960 --> 02:36.260 Now for the width I'm going to try 256. 02:36.620 --> 02:39.140 For the height I'm going to try 300. 02:39.950 --> 02:41.540 And we'll have this sort of. 02:42.020 --> 02:44.660 Rectangular widget that looks like this. 02:45.230 --> 02:50.540 And I'm going to call this size box size box underscore root. 02:51.630 --> 02:54.330 And I don't plan on changing the size of this. 02:54.330 --> 03:01.080 I'm going to leave it this way, and I'm going to take size box root and add an overlay on top, and 03:01.080 --> 03:03.540 the overlay can go on to the size box root. 03:03.540 --> 03:06.330 And we'll call this overlay underscore root. 03:06.570 --> 03:08.550 So we have our root overlay. 03:09.850 --> 03:15.130 And the overlay is going to have several things on it, including a background, a border. 03:15.160 --> 03:18.790 These are things that I'd like them all to have these load slots. 03:18.790 --> 03:21.490 So I'm going to add a couple of images here. 03:21.940 --> 03:28.930 I'm going to take the first image, drop it on and call this image underscore background. 03:30.150 --> 03:34.590 And I'm going to set horizontal and vertical alignment to fill and. 03:35.310 --> 03:37.500 For the image in the brush. 03:38.270 --> 03:42.590 I'm going to search for flowing and get my flowing UI. 03:42.590 --> 03:43.220 BG. 03:43.250 --> 03:47.840 We have several instances of this, so I'm going to pick one now. 03:47.840 --> 03:52.100 We could change this at any point, but I'm going to select one for now. 03:52.370 --> 03:54.140 And I'd like a border as well. 03:54.140 --> 03:59.390 So I'm going to drag on another image and call this image underscore border. 04:00.320 --> 04:03.860 And this can be fill fill for horizontal and vertical. 04:03.860 --> 04:08.390 And I'm going to search for border and use border one. 04:08.390 --> 04:12.320 Not border one but border one large. 04:12.890 --> 04:19.310 And I'm going to choose to draw this as a border using a margin of 0.5. 04:20.310 --> 04:23.100 And that gives me this border. 04:23.130 --> 04:29.280 But notice the background is right behind it, so the background needs a bit of padding. 04:29.280 --> 04:31.530 I'm going to give it a padding of one. 04:31.740 --> 04:33.930 I think that's going to do the trick. 04:37.330 --> 04:40.120 So now we have a background and a border. 04:40.890 --> 04:42.570 Okay, so this is looking good. 04:42.570 --> 04:45.960 I'm going to go to my border and we can play with our margin. 04:45.960 --> 04:48.780 If I set it to 0.25, it'll be a little thicker. 04:48.780 --> 04:50.820 And that might look a little bit better. 04:50.820 --> 04:52.950 It just depends on what you're going for. 04:53.070 --> 04:57.870 Just make sure that background has enough padding to accommodate for it. 04:59.090 --> 05:02.000 I think it can look pretty good with this amount of padding. 05:02.570 --> 05:08.180 Now I'm going to take this load slot vacant and I'd like to duplicate it twice. 05:08.600 --> 05:10.580 So I'm going to have a load slot vacant. 05:10.580 --> 05:13.790 I'm going to duplicate and have a load slot taken. 05:16.280 --> 05:20.990 And I'm going to duplicate that and have a load slot enter name. 05:22.330 --> 05:27.880 So I find that for this basic background and border, it's going to be easier to duplicate than to use 05:27.880 --> 05:33.700 inheritance with name slots, as these are all going to be drastically different in their functionality. 05:33.700 --> 05:39.310 Okay, so it looks like I still have or a main menu and main menu open as well as project settings. 05:39.310 --> 05:43.630 I'm going to close those and just work on load slot vacant for now. 05:43.630 --> 05:51.550 Now all I want in load slot vacant really is some text that says new game and some kind of icon we can 05:51.550 --> 05:53.530 click to have a new game. 05:53.530 --> 05:55.420 So I'm going to put a vertical box. 05:55.420 --> 06:01.120 This is going to make it easy to have two things text and a button, one on top of the other. 06:01.120 --> 06:06.520 So for this vertical box we'll have it set to fill both vertical and horizontal. 06:06.670 --> 06:08.620 And then we'll put some text in here. 06:10.010 --> 06:18.410 Now the text can be set to horizontal alignment, center and vertical alignment top and justification 06:18.410 --> 06:19.370 to the center. 06:19.370 --> 06:22.100 And the text is going to say new game. 06:23.590 --> 06:30.190 And we're going to replace this hideous Roboto font with Pirata one. 06:30.730 --> 06:36.040 We'll give it an outline size of one, and the vertical box itself could use some padding. 06:36.040 --> 06:37.450 So I'm going to pad it. 06:38.020 --> 06:41.920 We'll try let's say 12 or so. 06:42.250 --> 06:45.010 And our text is looking pretty good. 06:45.010 --> 06:47.560 We could probably give it some letter spacing here. 06:47.800 --> 06:50.680 And beneath new game I'm going to have a button. 06:51.280 --> 06:54.310 So I'm going to drag a button on in just a regular button. 06:54.610 --> 07:01.030 And for this button I'm going to set horizontal and vertical alignment to center. 07:01.820 --> 07:05.720 That way we don't stretch to fill or anything like that. 07:05.720 --> 07:10.070 And for the button image, I'm going to take a look in my assets folder. 07:10.340 --> 07:14.030 Content assets UI and open load screen. 07:14.030 --> 07:15.620 Now we have this icon. 07:15.620 --> 07:22.220 It's called plus icon clear BG I'm going to have that selected in the world outliner. 07:22.220 --> 07:26.300 And I'm going to set this for pressed. 07:26.300 --> 07:28.760 So that's what it's going to look like when pressed. 07:28.760 --> 07:32.570 But with this still selected I'm going to set it for hovered. 07:33.110 --> 07:34.760 I'm going to set it for normal. 07:35.210 --> 07:38.210 And I'm also going to set it for disabled. 07:39.270 --> 07:42.780 The only difference is we can change the tint. 07:43.170 --> 07:48.480 So for normal I'm going to have the tint a little darker all the way down to about here. 07:49.570 --> 07:52.600 And I'm going to make sure to draw this as image. 07:52.600 --> 07:54.670 So it's not a rounded box. 07:54.790 --> 07:57.160 And we can make this image size bigger. 07:57.670 --> 07:59.170 I'm going to go up. 08:02.830 --> 08:07.570 We'll try 120 by 120, but we could even go bigger than that if we wanted to. 08:07.570 --> 08:09.490 But that looks pretty good. 08:09.760 --> 08:12.430 So our normal is kind of a dark gray. 08:14.140 --> 08:17.680 But Harvard is going to be white. 08:17.680 --> 08:19.810 I'm going to bring it all the way up to white. 08:20.670 --> 08:23.490 And for hovered, we can draw as an image as well. 08:23.490 --> 08:30.540 And for pressed, I'm going to make this a sort of maybe a golden yellowish color. 08:31.300 --> 08:34.060 So that way we can see something different when it's pressed. 08:34.060 --> 08:35.890 And we're going to draw this as image. 08:36.450 --> 08:39.030 And then disabled can be drawn. 08:40.090 --> 08:41.020 Really dark. 08:41.020 --> 08:43.630 Let's just make it almost black. 08:44.530 --> 08:45.580 Like that. 08:45.910 --> 08:50.170 And I think we could use a spacer right in between these two. 08:50.200 --> 08:52.180 So I'm going to put that right in between. 08:52.210 --> 08:58.150 Take that spacer and we're going to up its size in the Y. 08:58.150 --> 09:01.960 That way we can get this thing down towards the bottom. 09:04.250 --> 09:07.310 Okay and normal can be just a little lighter. 09:08.430 --> 09:11.400 So there's our widget new game. 09:11.400 --> 09:17.100 It's indicating that we can click plus to add a new slot and start playing the game. 09:17.100 --> 09:18.510 So that's looking great. 09:18.510 --> 09:23.130 And I'd like to just take my image background browse to it. 09:23.130 --> 09:26.070 We have an me flowing UI BG that's what it's called. 09:26.070 --> 09:29.190 I'm going to actually go to its parent material. 09:29.490 --> 09:31.440 It's called M flowing UI. 09:31.440 --> 09:40.680 BG I'm going to duplicate this material and call this M underscore load slot BG because I'd like to 09:40.680 --> 09:43.440 change my background just a bit. 09:43.440 --> 09:49.980 So I'm going to take M load slot BG I'm going to open it up and we can change things here. 09:51.230 --> 09:53.810 I'd like the two noises to be different textures. 09:53.810 --> 09:57.740 So I'm going to take this texture sample and search for noise. 09:59.760 --> 10:01.170 And I'm going to use. 10:03.260 --> 10:04.460 Noise blur. 10:04.490 --> 10:05.510 Min. 10:06.690 --> 10:08.730 We can go to that and see what it looks like. 10:08.730 --> 10:12.570 Now it has three channels red, green and blue. 10:12.570 --> 10:16.560 If we unselect red and green, that's what blue looks like. 10:16.800 --> 10:18.150 Here's what the green looks like. 10:18.150 --> 10:19.080 It's blurry. 10:19.080 --> 10:20.340 Here's what the red looks like. 10:20.340 --> 10:22.740 It's cloudy so we can try any of them. 10:22.740 --> 10:24.180 We can try the blue. 10:24.180 --> 10:26.520 The blue is a kind of cool effect here. 10:27.190 --> 10:34.690 If we take the blue channel only and use that instead of RGB for it, then we'll have a different looking 10:34.690 --> 10:40.360 texture and we could even use this same one noise blur min up here. 10:41.040 --> 10:42.750 And use the blue for that. 10:44.050 --> 10:46.330 That'll give us a sort of different look. 10:46.600 --> 10:52.840 Or we could leave this previous one at what it was and have two different types of clouds. 10:53.570 --> 10:55.760 Now the red was more of a cloudy cloud. 10:55.760 --> 10:59.660 We can leave that as it was there, but notice it looks a little tiled. 10:59.660 --> 11:02.930 So I'm going to take the coordinates and change them. 11:04.430 --> 11:09.770 If I set that to 0.1 and 0.1 and this one down here to point one and point one. 11:15.680 --> 11:18.110 Then the clouds look a bit different. 11:18.680 --> 11:24.590 It looks a little funny, so I'm just going to use this noise blur min for both and just use the red 11:24.590 --> 11:25.220 channel. 11:27.680 --> 11:31.460 Okay, so applying that I can make a material instance out of this. 11:32.660 --> 11:36.950 Called me load slot bg. 11:38.720 --> 11:40.910 And I can take my load slot. 11:40.910 --> 11:41.690 BG. 11:43.320 --> 11:46.110 And I can change properties on it. 11:48.360 --> 11:51.270 So for the color, I can make it more blue. 11:51.750 --> 11:54.540 I can increase that cloud darkness if I like. 11:59.220 --> 12:02.250 And I can go to my load slot vacant. 12:03.050 --> 12:04.190 And set it. 12:06.540 --> 12:08.430 And then change my load slot. 12:24.350 --> 12:27.620 And of course we can change the material itself as well. 12:27.620 --> 12:29.420 Point one might be too small. 12:29.810 --> 12:31.280 We can go the other way. 12:37.200 --> 12:40.050 And make it more cloudy. 12:46.760 --> 12:48.260 So it's really up to us. 12:54.400 --> 12:55.930 So once we have what we'd like. 12:56.680 --> 12:58.840 Then we have our widget. 12:58.870 --> 13:00.760 Now I'm going to take this new game. 13:01.520 --> 13:05.390 And give it some padding on the top. 13:06.500 --> 13:11.540 I'm going to try 12, 15, 20. 13:13.030 --> 13:14.680 And I think that looks great. 13:14.680 --> 13:18.280 I'm going to give its outline size more like two. 13:21.380 --> 13:23.300 And I think I'm happy with that. 13:23.300 --> 13:25.850 Okay, so we have our load slot vacant. 13:25.850 --> 13:31.760 We're now ready to make the other two load slot taken and load slot enter name. 13:31.760 --> 13:33.440 So we'll do those next. 13:33.440 --> 13:38.180 So I'm just going to bring that spacer down a little like that. 13:38.180 --> 13:39.290 We'll do 40. 13:39.960 --> 13:41.790 And I'll see you soon.