WEBVTT 00:07.110 --> 00:08.130 Welcome back. 00:08.130 --> 00:15.390 Now we have a pretty nice looking opening main menu level, but we'd like to add more to it. 00:15.420 --> 00:21.720 We need some buttons and I'd also like to add some music that would be really nice when we press play, 00:21.720 --> 00:27.180 if we get some nice ambient music that makes us feel like we want to play the game. 00:27.660 --> 00:31.620 Now for this, we could really use the aura main menu actor. 00:31.620 --> 00:33.330 We could use the level blueprint. 00:33.330 --> 00:38.370 I kind of like using actors in the world as opposed to the level blueprint. 00:38.370 --> 00:42.930 So I'm going to open my aura main menu and go to its event graph. 00:42.990 --> 00:47.790 And in begin play I'm going to simply play sound. 00:48.920 --> 00:53.630 And we'll use Playsound 2D and we can simply play a sound. 00:53.630 --> 00:55.370 And now what are we going to play? 00:57.300 --> 01:04.560 Well, if we go to content assets sounds and into this folder called music, here's some music that 01:04.560 --> 01:06.330 we have in our game project. 01:06.330 --> 01:10.260 We can select that and we can simply play this sound. 01:10.830 --> 01:15.600 Now I'm going to open up this sound though, and make sure that it's set to looping. 01:15.810 --> 01:20.790 So if I check that looping check box then we'll just get that music looping. 01:20.790 --> 01:26.910 And with that we can just play test and see how this feels with that music. 01:26.910 --> 01:30.240 And I'm going to play it for a while to make sure it loops on itself. 01:30.240 --> 01:31.590 So let's try this. 02:51.310 --> 02:51.880 Okay. 02:51.880 --> 02:54.940 So with that we have successful looping. 02:54.940 --> 03:00.040 So that looks and sounds good and I'm happy with that. 03:00.040 --> 03:01.900 I'm going to leave it like that. 03:01.900 --> 03:07.720 And shout out to Carlos Jimenez for making this music and all the sounds for this game project. 03:07.960 --> 03:11.590 So reach out to Carlos if you need some professional sounds. 03:11.620 --> 03:14.800 I really appreciate Carlos making these sound effects. 03:14.800 --> 03:17.680 It really adds a lot to the game project. 03:18.010 --> 03:22.270 So now that we have sound check, now we need buttons. 03:22.270 --> 03:24.910 So we're going to make another widget. 03:24.910 --> 03:28.900 And for this we can go into blueprints UI. 03:28.900 --> 03:32.680 And we're going to make a new folder here we'll call this main menu. 03:32.680 --> 03:35.140 And we'll add a new widget blueprint here. 03:35.680 --> 03:41.260 So let's go ahead and make one I'm going to go to User Interface Widget Blueprint. 03:41.260 --> 03:45.190 And we really don't need an Ora user widget for this either. 03:45.190 --> 03:49.150 We're just going to want two buttons a play button and a quit button. 03:49.360 --> 03:53.110 So I'm going to choose User Widget and call this Wbhp. 03:53.110 --> 03:54.520 Main menu. 03:56.190 --> 03:59.310 And our main menu is going to be super, super basic. 03:59.310 --> 04:03.150 It's going to have a canvas panel, something that we use sparingly. 04:03.150 --> 04:03.660 Right. 04:03.660 --> 04:06.210 Only our overlay in this project has one. 04:06.210 --> 04:08.940 Well we're going to use one for the main menu as well. 04:08.940 --> 04:10.800 It's okay to use a canvas panel. 04:10.800 --> 04:14.730 In this case we're going to go ahead and add a couple things. 04:14.730 --> 04:16.710 We're going to get a wide button. 04:16.830 --> 04:21.270 The wide button is our nice special red button. 04:21.270 --> 04:24.780 And we can size it how we want it to be sized. 04:24.780 --> 04:27.540 And we can put a nice message here. 04:27.540 --> 04:28.860 We can say play. 04:30.870 --> 04:39.720 We can even give it some different settings, such as a font size, maybe 26, maybe 28. 04:39.720 --> 04:42.480 We can give it more letter spacing if we like. 04:44.750 --> 04:50.300 I think that looks pretty nice, and I'm going to make sure that it's anchored to the center and the 04:50.300 --> 04:51.080 bottom. 04:51.620 --> 04:55.490 And I'm going to set its alignment in the X to point five. 04:55.820 --> 04:59.690 That way, if I set its position x to zero, it goes to the middle. 04:59.690 --> 05:02.240 But I don't want its position x to zero. 05:02.270 --> 05:07.310 I want it off to the left a little bit, because I want a button to the right as well. 05:07.310 --> 05:10.670 I'm going to give its position x -250. 05:10.910 --> 05:13.310 And then I'm going to add another wide button. 05:13.310 --> 05:15.440 Now I'm going to take this first wide button. 05:15.440 --> 05:17.630 And I'm going to copy its properties over. 05:17.630 --> 05:21.680 So I'd like its size and all that to be the same. 05:21.680 --> 05:23.810 Now its size is 166. 05:23.810 --> 05:32.570 I'm going to make it 160 to have a nice even number and 85 and I'll use 160 and 85 for this other button, 05:32.570 --> 05:37.070 160 for size x 85 for size y. 05:37.070 --> 05:39.950 And I'm going to copy its y position. 05:40.310 --> 05:44.060 Its -177 but I'm going to make it -180. 05:44.450 --> 05:47.300 And I'm going to set that here position y. 05:47.330 --> 05:53.810 Now before I do that actually I need to anchor it to the bottom center and set its alignment to 0.5 05:53.810 --> 05:54.560 and the X. 05:54.560 --> 05:56.960 That way we're working with similar values. 05:56.960 --> 05:59.180 And now I can set position y. 06:01.090 --> 06:02.230 Copy that over. 06:02.230 --> 06:07.810 And position x I'm going to set to positive 250 because the other one is -250. 06:07.840 --> 06:11.380 Now we have equidistance from the center. 06:12.070 --> 06:12.580 Okay. 06:12.580 --> 06:15.940 So let's use the same font settings as well. 06:15.940 --> 06:18.910 So we had a font size of 28. 06:18.910 --> 06:21.280 Letter spacing can be 400. 06:22.000 --> 06:28.000 So 28 and 400 here 28 for the font size 400 for letter spacing. 06:28.000 --> 06:34.180 And it looks like that's going to be well we don't know if it's too much because we only want four letters. 06:34.180 --> 06:35.050 Play and quit. 06:35.050 --> 06:36.460 Both have four letters each. 06:36.460 --> 06:38.110 So that works perfectly. 06:38.590 --> 06:39.850 Let's see how this looks. 06:39.850 --> 06:42.910 If we add this now how are we going to add this. 06:42.910 --> 06:45.460 Well we could do it really in the level blueprint. 06:45.460 --> 06:47.470 We could do it in or a main menu. 06:47.500 --> 06:52.660 Since we're handling most of our things in or a main menu, that would probably be a good place. 06:52.660 --> 06:55.630 Here in our main menu we can call Create Widget. 06:56.050 --> 07:03.310 We can select the main menu widget WB main menu, and we can add it to the viewport. 07:05.080 --> 07:06.790 So add to viewport. 07:06.820 --> 07:10.060 Now another thing I'd like to do is I'd like to. 07:10.740 --> 07:18.270 Not be able to move, which means we need to set our input mode to UI only and set our widget to focus. 07:18.300 --> 07:21.660 Now I'm going to call Get Player Controller. 07:22.500 --> 07:24.270 This will get us the player controller. 07:24.270 --> 07:29.820 This allows us to call set input mode and I'm going to choose UI only. 07:31.000 --> 07:34.990 And for the widget to focus, we're going to use the main menu. 07:35.960 --> 07:41.210 And I'll also take the player controller and call set show mouse cursor. 07:41.210 --> 07:45.050 We're going to set this to true so we can still see the mouse cursor. 07:45.050 --> 07:46.430 And with that. 07:47.270 --> 07:48.650 Let's press play. 07:49.780 --> 07:56.770 Now we can't full screen because we can't click in here and focus, but we can click on the buttons. 07:58.750 --> 07:59.770 And that's great. 08:00.220 --> 08:02.140 So things are looking pretty nice there. 08:02.140 --> 08:05.560 And we just want these buttons to be functional. 08:06.130 --> 08:08.890 So for now I'm done with our main menu. 08:08.890 --> 08:11.380 I'm done with the title widget. 08:11.380 --> 08:12.940 I'm done with the music. 08:13.240 --> 08:17.890 But here in the main menu I want to assign to the on clicked events here. 08:18.160 --> 08:19.870 So I'm going to go to the graph. 08:19.870 --> 08:26.110 And in event construct, this is a good enough place to assign on clicked events to both of these, 08:26.110 --> 08:28.540 which now need to be set as variables. 08:28.540 --> 08:33.790 So is variable is set for both of them and we should give them meaningful names. 08:33.790 --> 08:35.500 This is going to be button. 08:36.750 --> 08:37.710 Play. 08:39.180 --> 08:44.130 And then this one is going to be button quit. 08:45.580 --> 08:49.810 All right, let's save and go back to the graph and we'll first do the quit button. 08:49.810 --> 08:51.160 We're going to get button quit. 08:51.160 --> 08:53.800 Remember this is a WPP wide button. 08:53.800 --> 08:55.150 And it has a button. 08:55.150 --> 08:59.500 So we need to get the button and assign to the buttons on clicked. 09:00.310 --> 09:05.500 So once we assign on clicked then right here in our event we can decide what happens. 09:05.500 --> 09:06.760 And this is the quit button. 09:06.760 --> 09:09.790 So I just want to quit game. 09:10.420 --> 09:11.710 We're going to call quit game. 09:11.710 --> 09:12.700 Simple as that. 09:13.370 --> 09:15.170 Now for the button play. 09:15.170 --> 09:16.340 We're going to bring that in. 09:16.340 --> 09:17.570 We're going to get button. 09:19.080 --> 09:21.480 And assigned to its onclicked. 09:26.880 --> 09:28.950 And what are we going to do for this one? 09:28.950 --> 09:30.780 Well, I'd like to open a level. 09:30.780 --> 09:34.770 I'd like to go into the next level, which looks different. 09:34.770 --> 09:41.730 Perhaps it may be the same area, but without aura there either case I want to change to a different 09:41.730 --> 09:42.300 level. 09:42.300 --> 09:48.690 And that level is going to be where we load up our progress or choose to play a new game with a brand 09:48.690 --> 09:49.800 new character. 09:50.100 --> 09:51.720 So I'm going to need a new map. 09:52.140 --> 09:56.040 So I'm going to go to the maps folder and I'm going to take this main menu. 09:56.040 --> 09:59.850 By the way, I should save all and I'm going to duplicate this main menu. 09:59.850 --> 10:04.140 I'm going to duplicate it and call this load menu. 10:04.670 --> 10:05.990 So we have a main menu. 10:06.020 --> 10:10.760 We have a load menu and we have a dungeon load menu is where I'd like to go. 10:10.790 --> 10:12.500 Once I click on play. 10:12.500 --> 10:16.130 So right here I'm going to call Open Level. 10:16.460 --> 10:18.470 And we can open level by name. 10:18.470 --> 10:21.920 We can open level by object reference to if we wanted to do that. 10:21.920 --> 10:30.860 And then we could just promote this to a variable called load menu and compile and give this a default 10:30.860 --> 10:31.460 value. 10:31.460 --> 10:32.840 And we can choose load menu. 10:32.870 --> 10:35.420 We could do that or we could load it by name. 10:35.420 --> 10:36.740 Either way is fine. 10:36.770 --> 10:39.170 A variable is pretty nice too. 10:39.170 --> 10:41.120 Now we could rename these events. 10:41.120 --> 10:44.870 We can say play button clicked. 10:45.610 --> 10:46.660 And quit. 10:46.660 --> 10:48.010 Button clicked. 10:51.370 --> 10:56.590 Compile and save and now save all. 10:56.590 --> 11:02.380 What I'm going to do is go into the load menu, and once we get into the load menu, we can start removing 11:02.380 --> 11:03.190 things. 11:03.220 --> 11:05.350 I'm going to remove aura. 11:06.530 --> 11:07.610 As now. 11:07.610 --> 11:11.720 We're not going to have any of that stuff if we press play. 11:11.750 --> 11:14.930 We're just going to have just an empty level. 11:15.590 --> 11:20.210 So we'll get to what happens in this level soon enough. 11:20.210 --> 11:24.410 But for now, I'm going to save all and go back to main menu. 11:24.410 --> 11:29.450 So we still have all this, but if we press play, we now have music buttons. 11:29.450 --> 11:31.520 If we click quit, we quit. 11:31.520 --> 11:35.600 And if we click on play now we go to this level. 11:36.110 --> 11:42.230 And the load menu level doesn't have a whole lot, but we'll get to that soon enough. 11:42.740 --> 11:50.540 For now, we have a working main menu, and I believe that is complete now, and we can even set this 11:50.540 --> 11:53.750 to be the map that loads up when you start the game. 11:53.750 --> 12:00.980 So if we go to Edit and project settings, we can go to Maps and modes and we can set our game default 12:00.980 --> 12:04.160 map, we can set it to the main menu. 12:04.550 --> 12:10.970 And when we do that, if we launch the game as a standalone game, we'll go to that level. 12:11.570 --> 12:12.170 Okay. 12:12.170 --> 12:12.980 Perfect. 12:12.980 --> 12:15.470 So with that, we're done with the main menu. 12:15.500 --> 12:19.010 We're ready to start on the load menu and we'll do that next. 12:19.310 --> 12:20.240 I'll see you soon.