WEBVTT 00:07.540 --> 00:08.650 Welcome back. 00:08.650 --> 00:11.560 Now we have a few new widgets right. 00:11.560 --> 00:17.080 We have load slot taken load slot, vacant load slot, enter name. 00:17.080 --> 00:24.820 And tying it all together we have our load menu which has three widgets which are widget switchers. 00:25.120 --> 00:30.460 And each of these widget switchers has all three widgets inside of it. 00:30.940 --> 00:38.110 Now this is just the widget switcher widget type that's built into the engine, but we're going to actually 00:38.110 --> 00:40.630 want our own custom widget switcher type. 00:40.630 --> 00:48.190 That way it can have its own concept of which particular slot it belongs to. 00:48.190 --> 00:56.380 So then if we click on say, a button like select slot, for example, and we'd like to play that slot, 00:56.380 --> 01:00.580 then that widget switcher will know what slot it is. 01:00.940 --> 01:05.560 So we're going to create a special widget switcher of our own. 01:05.560 --> 01:14.020 So let's go into the blueprints UI load menu and we'll make a special new widget blueprint here. 01:14.020 --> 01:23.410 Now I'm just going to choose User Widget and it's going to be Wbhp load slot underscore widget switcher. 01:24.570 --> 01:28.260 And here we can have our own class for our widget switcher. 01:28.260 --> 01:30.960 And the first thing we're going to add is a widget switcher. 01:33.650 --> 01:40.970 We'll change it from full screen to desired, and we'll just add the three types of widgets we need 01:40.970 --> 01:44.270 vacant enter name and taken. 01:44.270 --> 01:47.870 So we're going to find WB load. 01:47.870 --> 01:52.250 And we're going to take load slot vacant and drag it on. 01:52.610 --> 01:53.900 And here we see it. 01:53.900 --> 01:57.890 Now we're going to take enter Name and drag that onto the widget switcher. 01:57.890 --> 02:02.690 And we're going to take our taken and drag that onto the widget switcher. 02:02.690 --> 02:07.880 And now we have a class designated for this that we can use. 02:07.880 --> 02:14.360 And now that we have this special widget switcher, we can go back to our load menu and start to replace 02:14.360 --> 02:18.230 each of these with our special type of widget switcher. 02:18.230 --> 02:23.030 Now the easiest way to do this is to take all three widget switchers and just delete them. 02:23.120 --> 02:27.770 And we can bring in our new load slot widget switcher. 02:29.660 --> 02:31.520 So we're going to bring in three of these. 02:31.520 --> 02:34.730 I'm going to bring one in onto the canvas panel first. 02:36.100 --> 02:37.090 And select it. 02:37.090 --> 02:38.500 There it is up there. 02:38.800 --> 02:43.480 I'm going to bring it down though, and anchor it to the center. 02:43.630 --> 02:49.960 I'm going to set its size x to 256, size Y to 300. 02:51.430 --> 02:52.540 Now it looks blank. 02:52.540 --> 02:57.340 But if we go back to our load slot widget switcher and compile it. 02:58.010 --> 03:00.950 Then it won't be blank looking here. 03:01.400 --> 03:03.590 Now I have its anchor set to the middle. 03:03.590 --> 03:11.510 I'm going to set its alignment to 0.5 for x and y and its position x and y just to zero, and then move 03:11.510 --> 03:12.590 the position over. 03:12.590 --> 03:17.900 And I believe I had 250 -250 for the X there. 03:17.900 --> 03:21.830 That might be a little bit too close, maybe -300. 03:22.730 --> 03:25.550 So I have this widget switcher I'm going to copy it. 03:25.550 --> 03:30.980 Control C click on the canvas panel control V and this one. 03:31.650 --> 03:38.070 Can get position y of zero, position x of zero, and then I'll copy it again. 03:38.070 --> 03:41.430 Control C canvas panel control v. 03:41.430 --> 03:47.280 And this one can get a position y of zero and a position x of 300 okay. 03:47.280 --> 03:53.130 So we've replaced those widget switchers with our custom widget switcher, which is going to make things 03:53.130 --> 03:56.970 a lot easier for us to control each one as a whole. 03:56.970 --> 04:00.240 And then each one can have its own view model. 04:00.660 --> 04:03.990 I'm going to call this first one switcher underscore zero. 04:04.470 --> 04:13.680 I'm going to call the next one switcher underscore one and the next one switcher underscore two. 04:14.160 --> 04:17.640 So they'll be designated those indices. 04:18.090 --> 04:20.550 Now for our load menu map. 04:20.550 --> 04:25.140 If we go to it in Maps and open load menu we can save all first. 04:25.670 --> 04:31.700 We can press play and see these widgets because we're adding them to the viewport in the level blueprint. 04:31.700 --> 04:34.940 If we open the level blueprint, we can see that we're doing that here. 04:35.510 --> 04:42.860 Now I'm actually going to remove this logic because it was a good way to get things working and showing 04:42.860 --> 04:43.880 on the screen. 04:43.880 --> 04:48.770 But now we're going to have a little bit more fine tuned control in the C plus plus domain. 04:48.770 --> 04:52.760 So I'm going to go ahead and remove that from our level blueprint. 04:52.760 --> 04:55.310 And now if we press play we don't see anything. 04:55.700 --> 05:04.670 The reason for that is I'm going to have our own full on game mode and HUD for the load screen. 05:04.670 --> 05:10.880 And the HUD is going to have its own C plus plus class that will construct the widget and show it, 05:10.880 --> 05:13.970 add it to the viewport and set its view model. 05:13.970 --> 05:20.330 So that way we can create its view model in C plus plus and control the timing of things so that when 05:20.330 --> 05:25.520 the time comes for that widget to have its own view model, we'll know for sure that that view model 05:25.520 --> 05:26.810 has been constructed. 05:27.530 --> 05:29.960 So we need a few classes. 05:29.960 --> 05:33.050 We need to construct that view model and we'll see how. 05:33.050 --> 05:39.500 But we also need a game mode for the load screen map and a HUD for the load screen map. 05:39.500 --> 05:42.680 So we're going to create several new classes right now. 05:43.520 --> 05:50.090 I'm going to go to C plus plus classes, Aura Public and go into game where we have our aura game mode 05:50.090 --> 05:52.340 base, and I'm going to make a new game mode. 05:52.340 --> 05:52.820 Now. 05:52.820 --> 05:56.270 The game mode itself doesn't have to be a new C plus plus class. 05:56.270 --> 05:58.700 It can just be based on aura game mode base. 05:58.700 --> 06:06.020 I can right click and make a blueprint based on it and stick it in blueprints slash game and call this 06:06.050 --> 06:11.870 BP underscore or a load screen game mode. 06:12.440 --> 06:15.560 I can even take the aura out to make it a little bit shorter. 06:15.560 --> 06:17.090 Load screen game mode. 06:17.510 --> 06:19.610 We can create this blueprint class. 06:19.940 --> 06:26.870 Now that we have it, I'm going to close that content browser, and here in the load menu map, I'll 06:26.870 --> 06:32.480 go to World Settings and set the game mode to BP Load screen Game mode. 06:32.600 --> 06:35.870 And now we can control what HUD gets spawned. 06:35.870 --> 06:41.720 And the HUD can control things like the widgets, as that's the proper separation of concerns. 06:42.320 --> 06:49.310 So now that we have a game mode assigned, we can save all and we can create that HUD class that we 06:49.310 --> 06:55.730 need to assign here for the load screen as well as a view model class. 06:56.490 --> 06:59.490 So let's go to C plus plus classes. 07:00.170 --> 07:08.150 Where we were here, and we'll go into UI, we'll go into HUD and we'll make a new class for the load 07:08.150 --> 07:09.620 screen HUD. 07:09.950 --> 07:12.050 Now this can be just a new a HUD. 07:12.050 --> 07:14.150 It doesn't have to be based on your HUD. 07:14.150 --> 07:16.070 It's going to be completely different. 07:16.070 --> 07:18.920 And we can find the HUD class here. 07:18.920 --> 07:19.970 Click next. 07:19.970 --> 07:25.940 And right here in UI slash HUD I'm going to have a load screen HUD class. 07:26.330 --> 07:31.040 I'm going to create the class I'm going to click no I don't want to recompile. 07:31.100 --> 07:35.810 I want to create another class before closing the editor down. 07:35.810 --> 07:37.490 I want to make a ViewModel. 07:37.490 --> 07:42.560 Now if I'm going to make a ViewModel, I have to enable the mVVM plugin. 07:42.920 --> 07:46.490 So I have to go to Edit Plugins. 07:46.880 --> 07:51.350 And if I search for ViewModel, here's the UMG ViewModel. 07:51.350 --> 07:52.010 It's in beta. 07:52.010 --> 07:55.490 If we check it, we get a warning saying this is in the beta version. 07:55.490 --> 07:59.990 Epic recommends using caution when shipping projects with beta plugins. 07:59.990 --> 08:03.650 So we're going to click yes and we need to restart. 08:03.650 --> 08:05.240 So we're going to restart now. 08:06.300 --> 08:12.510 And now that we've restarted, we can make a new class based on the view model that we've been talking 08:12.510 --> 08:12.780 about. 08:12.780 --> 08:20.880 So I'm going to go ahead and right here in Aura Public UI, I'll make a new C plus plus class and search 08:20.880 --> 08:24.660 all classes for MV M. 08:24.810 --> 08:31.650 That stands for Model View ViewModel mVVM View Model Base. 08:32.400 --> 08:34.740 That's the class we need to use. 08:34.920 --> 08:39.390 So we'll select this class mVVM view model base. 08:39.390 --> 08:41.040 And we're going to rename this. 08:41.040 --> 08:45.750 And this is going to be the view model for our load screen widget. 08:46.080 --> 08:49.470 So I'd like to prefix each of these with VM. 08:49.470 --> 08:52.440 You could prefix them with mVVM if you like. 08:52.440 --> 08:53.010 Sure. 08:53.010 --> 08:53.730 Why not. 08:53.730 --> 08:56.790 And let's make this one load screen. 08:57.120 --> 09:01.740 And in the UI folder I'd like to put it in the view model subfolder. 09:01.740 --> 09:06.870 So we're going to have a new view model folder and a new mVVM load screen. 09:06.870 --> 09:08.670 I'm going to create this class. 09:09.280 --> 09:14.830 And I'm almost done and ready to close the editor, but I'd like to create yet one more class. 09:15.310 --> 09:21.340 And that's because if we're doing all this stuff in C plus plus, it would be wise to have a C plus 09:21.340 --> 09:29.080 plus class backing our widgets when using the ViewModel system, much like we have a C plus plus class 09:29.080 --> 09:35.170 backing our widgets for the widget controller system we have or a user widget, right? 09:35.170 --> 09:41.530 Well, I'd like a C plus plus class backing our load screen widgets. 09:41.530 --> 09:43.870 So I'm going to make a new C plus plus class. 09:43.870 --> 09:46.420 And this will be a user widget. 09:47.620 --> 09:52.000 So similar to our user widget only it's just user widget. 09:52.000 --> 09:58.510 And we're going to put this inside of UI slash widgets along with the other widgets. 09:58.510 --> 10:02.320 And this is going to be our load screen widget. 10:03.460 --> 10:08.260 So we'll just have a C plus plus class behind our load screen widgets. 10:08.260 --> 10:11.620 And we could parent those user widgets to this class. 10:12.460 --> 10:17.230 So we're going to create that class and we can finally close our editor down. 10:18.560 --> 10:23.420 Now back here in our IDE, we can start opening these new things we made. 10:23.420 --> 10:25.490 So we kind of made a lot of things. 10:25.490 --> 10:27.710 We first made a new game mode. 10:27.710 --> 10:29.690 Well we didn't make a C plus plus class. 10:29.690 --> 10:34.280 We made that just a blueprint based on aura game mode base. 10:34.280 --> 10:37.580 So we don't have anything new to open up here for that. 10:37.580 --> 10:40.040 But we did make a new HUD class. 10:40.040 --> 10:47.540 We went to UI HUD and added a load screen HUD so we can get that header and cpp file open here. 10:47.930 --> 10:54.050 We also created a new view model and there's our new view model folder. 10:54.050 --> 11:00.200 We have mVVM load screen and we have the dot h and cpp files for that. 11:00.200 --> 11:03.170 So we need to figure out how to tie that together. 11:03.170 --> 11:10.160 And we finally made a load screen user widget and UI slash widget called load screen widget. 11:10.160 --> 11:12.650 So we have that new class as well. 11:12.650 --> 11:16.130 We can get the header and cpp files open for that. 11:16.610 --> 11:24.290 And we know that our game mode load screen, game mode, the new one is now going to want to use our 11:24.290 --> 11:32.090 load screen HUD, which means we should make a load screen HUD blueprint and set that in our game mode 11:32.090 --> 11:32.870 blueprint. 11:33.430 --> 11:40.360 And then we can go about doing things with our load screen, HUD, creating widgets, creating view 11:40.360 --> 11:43.360 models, and learning how those work, all that great stuff. 11:43.390 --> 11:44.350 We'll do that next. 11:44.350 --> 11:50.890 But first, let's just compile and launch our engine and create our load screen HUD blueprint and set 11:50.890 --> 11:52.420 that in the game mode. 11:53.710 --> 11:58.870 So back in the editor, I'm going to go into my maps folder. 12:01.300 --> 12:03.130 An open load menu. 12:03.550 --> 12:07.090 Here we have our BP load screen game mode. 12:07.120 --> 12:08.890 Now it has its own HUD class. 12:08.890 --> 12:15.610 But we need to set what that is so we can open BP load screen game mode and find the HUD class. 12:15.610 --> 12:16.510 We can set that. 12:16.510 --> 12:20.350 We do need a blueprint based on our C plus plus class. 12:20.350 --> 12:28.390 So let's go to blueprints UI, HUD, and right next to aura HUD, we'll make a new blueprint class based 12:28.390 --> 12:31.060 on load screen HUD. 12:31.450 --> 12:32.320 Here it is. 12:33.510 --> 12:37.350 And we'll call this BP load screen HUD. 12:38.310 --> 12:38.550 Now. 12:38.550 --> 12:39.960 There's nothing to set in here. 12:39.960 --> 12:42.150 It's just a HUD blueprint. 12:42.150 --> 12:44.670 Nothing really special about it yet. 12:44.850 --> 12:52.680 Not yet, but we'll go to our load screen game mode and set its HUD class to be load screen HUD. 12:52.680 --> 13:01.770 And now whenever we go into this load menu map, well, we know that the load screen HUD is active and 13:01.770 --> 13:05.700 it's Beginplay has already been called and all that great stuff. 13:05.700 --> 13:11.670 We're ready to start doing things in that load screen HUD such as creating widgets, add them to the 13:11.670 --> 13:15.930 viewport, set variables, tie things together and the like. 13:15.930 --> 13:17.460 So we'll do that next. 13:17.790 --> 13:21.480 Great job on creating all those classes and I'll see you soon.