WEBVTT 00:07.310 --> 00:08.540 Welcome back. 00:08.570 --> 00:14.270 Now, before we start adding a save game system, we're going to need some menus. 00:14.270 --> 00:17.390 And when we first open the game we need a main menu. 00:17.840 --> 00:20.480 So in this lecture I'd like to create that. 00:20.480 --> 00:27.680 And I'm going to start by duplicating this level so that we can have our post-process volume settings 00:27.680 --> 00:31.400 as well as basically the general atmosphere. 00:31.400 --> 00:34.400 I'd like to kind of use this as a backdrop. 00:34.400 --> 00:41.630 So what I'm going to do is I'm going to go into my maps folder, take my dungeon and duplicate this 00:41.630 --> 00:45.860 map, and I'm going to call the duplicate main menu. 00:46.130 --> 00:48.830 So we have a map called Main menu. 00:48.830 --> 00:51.650 And I'm going to double click it and open it up. 00:52.260 --> 00:55.320 And now I'm in the main menu level. 00:55.980 --> 01:02.910 And what I'm going to do for the main menu is I'm going to delete any characters that we have in here. 01:02.910 --> 01:07.530 The main menu also doesn't need a nav mesh. 01:07.530 --> 01:10.230 I'm going to delete the nav mesh bounds volume. 01:10.230 --> 01:19.140 That's unnecessary and I'd like to have my player start start right here facing this area. 01:19.140 --> 01:23.280 But I think I'd like to have something in front, like a wall. 01:23.280 --> 01:27.180 I'd like to take this wall, for example, and place it in front. 01:27.180 --> 01:29.220 Now it doesn't have to be a fade actor. 01:29.220 --> 01:30.690 These are fade actors. 01:31.260 --> 01:40.020 I can go into Assets dungeon, and I can find my three by two, or even a three by three by three if 01:40.020 --> 01:43.110 I want a bigger one, and I can place it in here. 01:44.670 --> 01:46.500 I'm going to turn snapping on. 01:47.430 --> 01:48.870 And do that again. 01:48.870 --> 01:50.910 So I have it snapped to the grid. 01:51.300 --> 01:53.130 And now I can pull this up. 01:53.130 --> 01:56.430 And I have a bit of a larger area here. 01:57.610 --> 01:58.870 Like this. 01:59.570 --> 02:02.570 Now just looking straight on, straight ahead. 02:02.600 --> 02:07.430 I see that my torches are not perfectly aligned. 02:07.430 --> 02:11.390 So what I can do is I can move this one over a bit. 02:17.140 --> 02:20.380 Like so and I can move my player start. 02:20.380 --> 02:24.370 I'm going to take snapping off and move my player start. 02:26.020 --> 02:29.020 To where I want it to be now when I press play. 02:31.030 --> 02:33.910 I'm going to start as aura, which is not what I want. 02:34.690 --> 02:40.390 That's because we're spawning Ora at the player start according to our game mode default classes, but 02:40.390 --> 02:44.620 I'm going to select none for my game mode, so when I press play. 02:45.550 --> 02:48.070 I start with the default pawn now? 02:48.070 --> 02:54.460 Yes, that means I can click and look around and even move around, but we'll fix that. 02:57.890 --> 03:05.180 We can disable input, but I'm going to take this default pawn and move it to where I want it to be 03:05.180 --> 03:08.720 when we start off so that I'm looking at what I want to look at. 03:09.640 --> 03:10.960 So something like this. 03:10.960 --> 03:13.570 And it's important to take a look at full screen. 03:14.260 --> 03:19.690 So that we can make sure things are centered properly and not off center. 03:19.690 --> 03:23.680 For example, this torch here could be moved a little bit to the left. 03:30.400 --> 03:35.920 Okay so far this is a good start, but I do want to show something. 03:35.920 --> 03:40.060 I want to show aura, perhaps posing in front of the camera. 03:40.540 --> 03:42.970 And for that I have an asset. 03:42.970 --> 03:49.210 I can go to assets character aura animations and we have this aura pose. 03:49.210 --> 03:50.710 Here's what she looks like. 03:50.710 --> 03:56.170 And I've animated her so that we can have something above her hand like a fireball. 03:56.470 --> 04:02.890 So I'd like to make a special type of character blueprint specifically for the loading screen for the 04:02.890 --> 04:04.000 main menu. 04:04.030 --> 04:11.860 So I'm going to go into Blueprints Character Aura and create a new blueprint just based on the character 04:11.860 --> 04:12.580 class. 04:13.370 --> 04:15.860 In fact, it doesn't even have to be a character. 04:15.860 --> 04:18.110 It could even be an actor. 04:19.390 --> 04:25.900 If we make an actor or just click on actor here, we can call this BP aura. 04:25.990 --> 04:27.610 Main menu. 04:27.850 --> 04:32.470 And this is going to be what we see in front of the camera for the main menu. 04:32.500 --> 04:35.110 Now if I add a skeletal mesh component. 04:37.300 --> 04:38.980 Called Aura Mesh. 04:38.980 --> 04:41.650 I can set this to aura. 04:44.180 --> 04:51.290 And I can set the animation mode to use animation asset and I can choose or oppose. 04:52.120 --> 04:58.330 And now we have a skeletal mesh playing the aura pose animation and she's just standing there. 04:58.330 --> 05:05.020 It's nothing really too special, but along with this, we can also add additional components such as 05:05.020 --> 05:06.370 a Niagara system. 05:07.950 --> 05:10.650 And I can call this fireball. 05:11.070 --> 05:17.340 And I'm going to choose for the Niagara system component fire underscore four. 05:17.370 --> 05:26.370 Now this is a special Niagara system component with fire, which is a small flame designed specifically 05:26.370 --> 05:32.700 for this purpose for aura to have levitating above her palm like this. 05:33.180 --> 05:36.060 So I'm going to make sure that it's right there above the palm. 05:37.620 --> 05:40.920 And we can take this aura main menu actor. 05:40.920 --> 05:45.030 And we can place it right here in front of the player start. 05:45.030 --> 05:46.680 So I'm going to drag it in. 05:47.070 --> 05:49.890 I'm going to rotate it by 90 degrees. 05:54.090 --> 05:59.340 And if I press play, I can see where she is in relation to the player start. 06:01.020 --> 06:05.280 Now she's a bit far, so I'm going to bring aura a bit closer. 06:08.900 --> 06:10.970 So something like this looks a bit better. 06:11.150 --> 06:14.150 Now aura is going to want her staff. 06:14.150 --> 06:18.650 So I'm going to add to Aura Mesh a skeletal mesh. 06:19.240 --> 06:22.180 Another one and I'll call this staff. 06:24.180 --> 06:26.340 And I'll set this to Ora's staff. 06:28.270 --> 06:30.610 Now that puts it at the origin here. 06:30.610 --> 06:34.390 I'm going to want to connect it or attach it rather. 06:35.100 --> 06:38.130 To the hand socket weapon hand socket. 06:38.130 --> 06:42.360 So I can choose right here by selecting right next to parent socket. 06:42.360 --> 06:43.260 It's grayed out. 06:43.260 --> 06:49.320 You can't enter a name, but you can click on the magnifying glass and browse and get that socket. 06:49.710 --> 06:50.970 So now. 06:53.090 --> 06:55.460 She's holding her staff and it's looking good. 06:55.760 --> 06:58.040 So this is a pretty good looking start. 06:58.560 --> 07:03.300 I'd like Ora's head to be centered right here in the central brick. 07:03.600 --> 07:05.760 So what I'm going to do is move her over. 07:08.810 --> 07:10.160 And down a little. 07:12.440 --> 07:14.600 And in addition to that. 07:17.130 --> 07:22.620 If I press play and I full screen after clicking in the viewport, I want to make sure that aura is 07:22.620 --> 07:24.090 at a good size. 07:24.300 --> 07:26.190 So far things are looking pretty good. 07:26.190 --> 07:27.960 I'll move her up just a tad. 07:30.350 --> 07:32.360 And that looks pretty good now. 07:32.880 --> 07:36.420 We're levitating this fireball above Aura's hand. 07:36.450 --> 07:40.320 I'd like that fireball to sort of bob up and down a bit. 07:40.920 --> 07:45.480 I'd like some sinusoidal motion, and for that I can use tick. 07:45.960 --> 07:49.830 And I can take my fireball and set its location. 07:50.070 --> 07:55.050 Now, sine is a mathematical function perfect for bobbing up and down. 07:55.050 --> 08:00.180 And if I'm going to use the sine function, I'm going to want a running time. 08:00.270 --> 08:03.120 So I'm going to promote delta time to a variable called. 08:03.540 --> 08:05.010 I'll just call it time. 08:05.010 --> 08:08.130 And I'm not going to set it to delta time. 08:08.130 --> 08:11.220 I'm going to set it equal to time plus delta time. 08:11.220 --> 08:13.320 So I'm going to take delta seconds. 08:13.350 --> 08:19.530 I'm going to add to it adding time and take the result and assign that to time. 08:19.980 --> 08:25.860 And if I'm using the sine function the sine function is periodic. 08:25.860 --> 08:32.070 It's periodic every two pi pi being the number 3.14159. 08:32.640 --> 08:38.670 If I take that number and multiply it by two, then I get two pi 6.28318. 08:38.700 --> 08:46.380 Now every time time reaches this number, we can reset it to zero, because that's the period for the 08:46.380 --> 08:49.620 sine function every time it reaches two pi. 08:49.620 --> 08:57.000 Then as the time continues to increase, that bobbing sinusoidal motion has come back to the middle 08:57.000 --> 08:59.040 and is beginning to start over. 08:59.040 --> 09:04.890 And if you'd like to learn more about the sine function, I explain this in my Unreal Engine five C 09:04.890 --> 09:09.090 plus plus the Ultimate Game Developer course, which teaches more of the basics. 09:09.090 --> 09:13.980 But all you need to understand is that two pi is the period for the sine function. 09:13.980 --> 09:20.820 So if I'm going to use the sine function, I'm going to reset my time to zero as soon as it reaches 09:20.820 --> 09:21.900 two pi. 09:21.900 --> 09:26.700 And that way we'll never get an overflow in our float by increasing it too much. 09:26.700 --> 09:36.150 So I'm going to place a check to see if time is greater than 6.28318. 09:36.150 --> 09:37.380 That's two pi. 09:38.120 --> 09:41.540 And if so, then we'll set time to zero. 09:41.540 --> 09:42.620 So we're going to say. 09:43.810 --> 09:46.360 Set time to zero. 09:46.390 --> 09:49.120 Now I'm going to collapse these to a function. 09:49.660 --> 09:52.360 And I'm going to call this update time. 09:53.710 --> 09:57.820 And now we have a running time that we can use for the sine function. 09:58.390 --> 10:00.610 Now I'm going to take that time. 10:01.860 --> 10:04.620 And I'm going to hook it up to the sine function. 10:04.620 --> 10:08.280 Now sine comes in two flavors degrees and radians. 10:08.280 --> 10:13.770 Because the sine function takes a value in as an angle. 10:14.610 --> 10:17.730 Now what we want is sine in radians. 10:17.730 --> 10:21.450 And this is going to give us periodic behavior. 10:21.450 --> 10:27.450 Let's just see what that value is by printing a string the sine of time. 10:27.450 --> 10:30.420 Let's go ahead and press play. 10:30.630 --> 10:36.390 And we see that it goes from zero up to one all the way back down, keeps going down to negative one 10:36.390 --> 10:38.010 and back to zero. 10:38.010 --> 10:47.220 And it's resetting because we're resetting that time every period of the sine which is two pi of an 10:47.220 --> 10:49.410 untransformed sine. 10:49.410 --> 10:53.670 Now we can take that value retrieved from sine. 10:53.670 --> 10:55.050 And we can scale it. 10:55.050 --> 11:00.570 We can multiply it by what we refer to in mathematics as an amplitude. 11:00.570 --> 11:06.090 So if I multiply and promote this to a variable called amplitude. 11:07.660 --> 11:09.310 And use this instead. 11:09.310 --> 11:16.330 Then sign will be scaled by amplitude and we can compile and give it a default value such as ten. 11:16.330 --> 11:22.510 And now if we press play, we see that it goes all the way up to plus ten, all the way down to negative 11:22.510 --> 11:26.410 ten, and it smoothly oscillates between the two. 11:27.500 --> 11:31.940 Now, what I'd like to do is use that to move my fireball. 11:31.940 --> 11:38.840 I'd like to set the location of the fireball in the Z direction, and I'd like to get the fireballs 11:38.840 --> 11:40.910 location from the start. 11:41.390 --> 11:45.410 So I'm going to drag actor, begin overlap, and get that out of the way. 11:45.410 --> 11:51.980 But in Begin play, I'm going to take my fireball and I'm going to call Get World location on it. 11:52.220 --> 11:58.430 And with this world location, I'm going to store it, promote it to a variable called fireball. 11:59.270 --> 12:01.160 Initial location. 12:02.320 --> 12:07.780 We'll store that first thing, and then every frame we're going to add to that, we're going to add 12:07.780 --> 12:11.200 to its Z according to this amount here. 12:11.200 --> 12:16.480 So what I'm going to do is I'm going to take my fireball initial location. 12:17.410 --> 12:19.630 And I'm going to add to it. 12:22.150 --> 12:26.980 And what I'm going to add is simply a value to its z component. 12:26.980 --> 12:28.510 So I'm going to right click on this. 12:28.510 --> 12:32.260 Split the struct pin and add the vector. 12:33.240 --> 12:40.500 00Z, where z is this value here which we can collapse and make a pure function. 12:40.530 --> 12:44.190 I'm going to call this sine of time sin. 12:44.220 --> 12:46.620 Time is short for sine of time. 12:46.620 --> 12:51.360 I'm going to compile that and I'm going to convert it to a pure function. 12:52.830 --> 12:57.240 So we have a nice neat little sign of time node. 12:57.900 --> 12:59.340 And we'll take this. 12:59.880 --> 13:03.330 And we're going to set our fireball location. 13:03.330 --> 13:05.100 So I'm going to get the fireball. 13:05.100 --> 13:09.570 And I'm going to call set world location. 13:09.570 --> 13:12.450 And we're going to set its world location to this value. 13:12.450 --> 13:15.240 And we should see it now floating up and down. 13:15.240 --> 13:16.710 Let's see how that looks. 13:17.890 --> 13:19.420 And there it goes. 13:20.140 --> 13:21.130 And there it goes. 13:21.130 --> 13:22.060 Oh it's burning. 13:22.090 --> 13:22.450 Aura. 13:22.450 --> 13:23.170 Just a bit. 13:23.170 --> 13:28.990 So it's probably going up a little too much, which means we could go into sign of time and we could 13:28.990 --> 13:30.730 change the amplitude. 13:30.730 --> 13:32.770 We didn't have to go into sign of time for that. 13:32.770 --> 13:33.610 But we can change it. 13:33.610 --> 13:35.020 We can set it to five. 13:36.930 --> 13:38.730 Now it won't go up so high. 13:39.420 --> 13:41.940 And it won't come down so low. 13:43.250 --> 13:45.200 And that looks pretty good. 13:45.230 --> 13:51.260 I think I like it, I might even make it just a little lower, maybe 3.5. 13:51.260 --> 13:57.470 We can make it bob up and down even less, and I think that is going to look pretty good. 14:01.130 --> 14:03.140 Okay, so that's looking nice. 14:03.560 --> 14:05.450 What about something behind aura? 14:05.480 --> 14:07.550 Now, we do have a magic circle. 14:07.550 --> 14:10.550 And a magic circle might look kind of nice. 14:10.550 --> 14:13.610 We could add a decal component to this actor. 14:13.610 --> 14:17.120 By clicking add we can search for decal. 14:17.120 --> 14:18.290 We can choose that. 14:18.290 --> 14:20.480 And we can call this simply decal. 14:20.480 --> 14:20.990 That's fine. 14:20.990 --> 14:25.160 Or Magic Circle decal if we want. 14:25.160 --> 14:29.120 And we can take this Magic Circle decal and we can set its material. 14:29.330 --> 14:31.880 Now we do have Magic circle the material. 14:31.880 --> 14:34.250 We also have Magic Circle Blue. 14:34.370 --> 14:40.790 And if we want, we can even go into this folder and duplicate that and make a new one. 14:40.790 --> 14:45.710 Or simply right click on Magic Circle and create a material instance. 14:45.710 --> 14:51.050 And we can call this My Magic Circle underscore. 14:51.050 --> 14:52.040 Main menu. 14:52.800 --> 14:56.160 And we can set this to that one. 14:56.160 --> 14:57.330 Main menu. 14:58.680 --> 15:01.860 I'm gonna not be so lazy on that name. 15:01.860 --> 15:02.760 I'm going to capitalize. 15:02.760 --> 15:04.470 Main and menu. 15:05.350 --> 15:09.400 Now by default, this is the configuration we get right. 15:09.400 --> 15:11.410 We're going to want to rotate it. 15:11.410 --> 15:14.260 First of all going to rotate it by 90. 15:14.260 --> 15:15.910 And I'm going to move it back. 15:16.500 --> 15:19.440 And I'm going to compile and take a look. 15:19.440 --> 15:24.240 Here in the world we see that it's not quite reaching that wall behind her. 15:24.240 --> 15:25.800 So we're going to need to move it back. 15:25.800 --> 15:33.600 And what I'd like to do is move this window off screen and on the other screen while I'm adjusting it, 15:33.600 --> 15:36.960 I'm going to simply move this back. 15:36.960 --> 15:38.610 In fact, I don't need to go to the other screen. 15:38.610 --> 15:39.870 I can just do it here. 15:39.870 --> 15:41.250 I'm going to move it back. 15:42.240 --> 15:48.090 And up and make sure that it's centered on Ora's head. 15:48.420 --> 15:55.050 Now, it's a little hard to do from within the blueprint, so in this case, I am going to move it to 15:55.050 --> 15:56.130 the other screen. 15:56.130 --> 15:58.170 I'm going to press play first. 15:58.170 --> 16:01.440 It's pretty centered, but it could be adjusted a bit. 16:01.440 --> 16:09.300 I'm going to hit stop and without even really moving anything, I'm going to come over to my other screen. 16:09.300 --> 16:11.880 In fact, I'll just bring it here so you can see what I'm doing. 16:11.880 --> 16:15.420 I'm going to move it so that Ora's head is centered here. 16:16.390 --> 16:17.500 Like that. 16:20.960 --> 16:22.850 So that's looking pretty nice. 16:22.850 --> 16:24.200 I'm liking that. 16:24.200 --> 16:27.620 And you know what would be even better? 16:27.620 --> 16:30.950 A nicer touch is if this were rotating. 16:30.950 --> 16:32.510 If we were rotating. 16:33.270 --> 16:36.570 Our decal every frame. 16:37.140 --> 16:38.340 That would be nice. 16:38.340 --> 16:41.520 So what we can do is add a local rotation to it. 16:41.520 --> 16:45.960 We can go into event graph to event tick here. 16:46.230 --> 16:54.450 And we can add some local rotation to the Magic Circle decal by calling Add Local Rotation. 16:54.450 --> 17:01.950 And if we do this we can split the delta rotation struct pin and we can add to one of its rotational 17:01.950 --> 17:02.520 components. 17:02.520 --> 17:03.300 Which one? 17:03.300 --> 17:10.050 Well let's see if we were to rotate about its x axis direction. 17:10.710 --> 17:17.310 You know, what helps me to visualize this is to look in the direction of its forward vector like this. 17:17.820 --> 17:27.120 And if the z is up and the green, the y is to the right, red is forward, then what rotational axis 17:27.150 --> 17:27.630 is it? 17:27.660 --> 17:31.500 If we were tilting our head to the side, well we know shaking our head no. 17:31.500 --> 17:32.850 Is your right. 17:32.850 --> 17:34.710 Looking up and down is pitch. 17:34.710 --> 17:38.040 So the other dimension tilting to the side. 17:38.040 --> 17:39.270 That would be roll right. 17:39.270 --> 17:40.920 So we're going to add to its roll. 17:43.530 --> 17:49.530 So to the role we're going to add at least delta time times something. 17:50.800 --> 17:53.140 So I can take Delta seconds. 17:53.140 --> 17:56.260 Come over here and multiply it by something. 17:56.260 --> 17:57.310 And you know what? 17:57.310 --> 18:05.380 Rather than just bringing it over there, I'd like to just get world delta Delta seconds. 18:05.380 --> 18:06.670 Same thing. 18:07.420 --> 18:08.140 It's just. 18:08.830 --> 18:10.030 Easier that way. 18:10.030 --> 18:13.810 And I'm going to multiply by some value and I'm going to promote it to a variable. 18:13.810 --> 18:18.550 I'm going to call this magic circle rotation rate. 18:19.380 --> 18:25.200 I'm going to compile that and set it to a value, maybe 12, and hook that into the role. 18:26.310 --> 18:30.390 Compile that, press play and we have it rotating. 18:30.390 --> 18:32.520 I'd like it to rotate the other way actually. 18:32.520 --> 18:35.370 So I'm going to take this rotation rate and make it negative. 18:35.370 --> 18:39.420 And in fact it's a little high I'm going to set it down to about four. 18:43.850 --> 18:45.110 So I think I like that. 18:45.110 --> 18:48.290 In fact, I might even bring it down to about two. 18:51.340 --> 18:52.720 Yeah, I like it slow. 18:52.720 --> 18:53.260 Like this. 18:53.260 --> 18:54.520 This looks pretty good. 18:55.090 --> 18:57.520 Okay, so that's looking nice. 18:57.520 --> 19:01.450 And this would be a pretty good looking main menu. 19:01.450 --> 19:06.040 I'm going to click into the viewport and press F11 and see how it looks. 19:06.040 --> 19:08.620 Are we centered is the question. 19:08.620 --> 19:09.790 And. 19:10.360 --> 19:13.420 I think it looks pretty much centered. 19:13.980 --> 19:19.470 But of course you're going to want to do some tweaking until everything is perfectly centered. 19:19.500 --> 19:27.510 I think we could probably move everything here over to the right just a bit, but not much. 19:27.510 --> 19:29.550 So I'm going to select my player start. 19:29.550 --> 19:30.900 I'm going to select aura. 19:31.560 --> 19:36.180 I'm going to select the brick wall behind her and the two pillars here. 19:36.450 --> 19:41.490 And we're going to drag holding shift slightly to the right. 19:41.490 --> 19:44.130 And just make sure that we're centered here. 19:45.960 --> 19:49.470 And I can hit alt P to play and see what it looks like. 19:49.470 --> 19:51.780 I think this looks pretty good now. 19:51.780 --> 19:56.370 That's nice for an opening screen, but we need a title here. 19:56.370 --> 19:59.340 And for the name of our game. 19:59.340 --> 20:02.640 I've chosen aura and she's an elementalist. 20:02.640 --> 20:04.680 She's a master of the elements. 20:04.680 --> 20:05.970 I'd like that to be the title. 20:05.970 --> 20:10.260 I'd like the title of the game to be aura master of the elements. 20:11.370 --> 20:16.680 So we're going to add yet another component to this actor. 20:16.680 --> 20:19.590 And it's going to be a widget component. 20:19.830 --> 20:22.170 Now that means we need a widget, right. 20:22.170 --> 20:29.100 And I'm starting to think that all of this should be in a folder dedicated to the main menu. 20:30.390 --> 20:37.410 So I'm going to actually create a new folder called Main Menu and bring this actor into it because it 20:37.410 --> 20:40.560 doesn't really belong in our character folder. 20:40.980 --> 20:44.610 So what I'm going to do is make sure main menu is visible there. 20:44.610 --> 20:47.850 And I'm going to bring our main menu into the main menu. 20:47.850 --> 20:49.050 I'm going to move it there. 20:49.320 --> 20:51.780 And now we can put all things main menu here. 20:51.780 --> 20:58.500 And that includes our new widget blueprint which I'm going to base on just user widget. 20:58.500 --> 21:00.690 It doesn't have to be an or a user widget. 21:00.690 --> 21:04.140 It doesn't have to change at runtime or anything like that. 21:04.140 --> 21:06.030 We'll call this Wbgp. 21:06.210 --> 21:08.070 I'm going to call it title, that's all. 21:08.070 --> 21:12.540 Just title and title can get an overlay. 21:13.400 --> 21:16.880 And tidal can get a desired size. 21:17.210 --> 21:21.140 We're going to go ahead and change from fill screen to desired. 21:21.960 --> 21:23.820 And we're going to find it. 21:23.820 --> 21:24.900 Where did it go? 21:25.600 --> 21:27.430 Got a zoom in to see it. 21:27.430 --> 21:31.960 Here's our little square and I'm going to bring text onto it. 21:33.900 --> 21:38.820 And this text is going to say aura in all caps. 21:39.970 --> 21:42.880 And this is a really hideous font. 21:42.880 --> 21:44.950 So we're going to change that font. 21:46.520 --> 21:50.210 Amaranth is okay, but I think I'd rather do Pirata. 21:50.540 --> 21:51.950 Pirata won here. 21:52.010 --> 21:53.810 And for this font. 21:54.890 --> 21:59.750 We're going to want to see how big it looks on the screen, but I definitely think it could use some 21:59.750 --> 22:00.830 letter spacing. 22:01.280 --> 22:04.490 I want it to be justified to the center. 22:08.830 --> 22:13.120 And I want it horizontally aligned to the middle and vertically aligned to the top. 22:13.120 --> 22:18.130 I want it to have an outline size of probably a lot, maybe not four. 22:18.740 --> 22:23.990 Maybe 2 or 3, and I'm going to increase the font size a good deal. 22:25.710 --> 22:28.860 Now I want to see what this looks like just by itself. 22:29.530 --> 22:31.180 And I'm going to add it. 22:31.740 --> 22:34.740 In a widget component to aura main menu. 22:34.770 --> 22:41.670 So I'm going to take Aura's mesh and on top of the mesh we're going to add a widget component. 22:43.670 --> 22:49.490 And if we don't want the widget component moving with the animation, we could just attach the widget 22:49.490 --> 22:51.650 component to the default scene route. 22:53.000 --> 22:56.780 And the widgets we'll call title widget. 22:59.110 --> 23:04.120 And we'll set its widget class to WB title. 23:05.950 --> 23:06.820 And there it is. 23:06.820 --> 23:09.130 Now we see that it's facing that way. 23:09.490 --> 23:14.950 So we can rotate it by 90 degrees and we can bring it back behind aura. 23:14.950 --> 23:24.220 And I'm going to undock this actor so that we can adjust it while looking here in the world. 23:26.340 --> 23:30.180 I actually kind of like that yellowish outline that it has by default. 23:30.760 --> 23:35.080 Now I'm going to bring it back and notice this is in world space. 23:35.320 --> 23:39.160 Now, if I were to change this so that it's in screen space. 23:39.910 --> 23:41.650 Well, it's going to look different. 23:41.650 --> 23:42.040 We won't. 23:42.040 --> 23:44.740 First of all, we won't see it until we press play. 23:44.740 --> 23:47.200 And then we'll see what it looks like in screen space. 23:47.200 --> 23:48.340 That's what it looks like. 23:48.760 --> 23:51.610 So we can move it around and see what it looks like. 23:51.610 --> 23:55.930 I obviously need to increase the size of it now. 23:55.930 --> 23:57.820 That's what it looks like in screen space. 23:57.820 --> 24:05.290 It looks pretty good, but we can also use world space and then aura can block the widget. 24:05.290 --> 24:09.580 If we set this to world space, suddenly we can see it in the viewport. 24:09.580 --> 24:12.130 And if I move it behind the staff, for example. 24:12.130 --> 24:17.920 Well, now we can see that the staff blocks it, which is actually kind of cool, I like that. 24:18.160 --> 24:20.680 So I'm going to take its location and reset it. 24:20.680 --> 24:21.940 So it's centered. 24:21.940 --> 24:25.030 And then I'm going to move it back behind aura. 24:26.760 --> 24:30.720 And another cool thing about these world space widgets they cast shadows. 24:30.750 --> 24:31.710 Look at this. 24:32.010 --> 24:36.930 The default behavior is to cast shadows, and that's another cool aspect of them. 24:38.590 --> 24:42.580 Now I'm going to put it all the way up here, but it needs to be bigger, obviously. 24:42.580 --> 24:49.210 So I'm going to increase the font size and that means I need to go into WP title. 24:49.420 --> 24:54.370 I'm going to dock it right here so we can see it and see what we're doing here. 24:54.370 --> 24:56.410 And here's the size. 24:56.410 --> 24:57.820 It's 69. 25:03.470 --> 25:06.410 And I can move it up to about 100. 25:06.800 --> 25:11.240 And if I hit compile, then we'll see that change reflected behind aura. 25:11.240 --> 25:12.740 So I'm going to make the. 25:13.630 --> 25:15.490 Size about 120. 25:16.460 --> 25:17.480 Compile. 25:18.730 --> 25:19.900 A little bit better. 25:19.900 --> 25:22.120 I can go back to the aura actor. 25:22.120 --> 25:23.890 Bring this back up. 25:24.840 --> 25:28.380 And then I can increase the size again. 25:28.380 --> 25:30.270 I think 120 is just about right. 25:30.270 --> 25:31.950 I'll try 125 though. 25:33.620 --> 25:41.000 Okay, so another thing I'm noticing is the widget itself has the decal on top of it. 25:41.000 --> 25:44.660 And that's because our decal needs to be moved back a bit. 25:44.660 --> 25:45.830 So we're going to move. 25:45.830 --> 25:47.930 Not the widget, not aura herself. 25:47.930 --> 25:49.490 I'm going to undo that change. 25:49.490 --> 25:51.110 I'm going to take aura. 25:51.900 --> 25:54.660 And I need to select that decal. 25:54.660 --> 25:56.640 So here's what I can do I can. 25:57.540 --> 26:03.720 Move those off screen and with Ora selected, at least this Ora actor. 26:05.190 --> 26:06.000 Here she is. 26:06.000 --> 26:12.360 I can select that magic circle decal and I can move it back, but. 26:16.700 --> 26:19.190 It would be better to move it on the Or actor itself. 26:19.190 --> 26:21.260 So here's the Magic Circle decal. 26:21.530 --> 26:22.730 I'm moving it back. 26:24.090 --> 26:27.210 And now we see that it's only on the wall. 26:28.780 --> 26:29.440 All right. 26:29.440 --> 26:31.150 Saving my progress. 26:36.570 --> 26:40.440 We now have a working title and with a few tweaks. 26:42.310 --> 26:49.600 We can go back and forth between playing, going to full screen, seeing what it looks like and adjusting. 26:49.600 --> 26:55.330 You'll notice that the world space widgets do appear a little bit more blurry, so if you're not okay 26:55.330 --> 26:57.430 with that, you can change that. 26:57.430 --> 26:59.200 I'm going to move it up slightly. 26:59.790 --> 27:01.590 And press play with alt P. 27:05.490 --> 27:07.530 That looks pretty good. 27:08.450 --> 27:13.460 And at this point I'm feeling good about aura, the words. 27:13.940 --> 27:18.230 So I'm going to add the subtitle in the widget. 27:19.370 --> 27:21.410 So I'm going to add some more text here. 27:24.090 --> 27:27.090 And this text is going to be aligned. 27:27.780 --> 27:32.130 Horizontally to the middle and vertically to the bottom. 27:33.570 --> 27:36.960 And I'm going to try amaranth for the font. 27:39.310 --> 27:40.360 That's not amaranth. 27:40.390 --> 27:41.320 There it is. 27:41.320 --> 27:44.350 And I'm going to say for the text. 27:44.350 --> 27:46.480 Master of the elements. 27:48.050 --> 27:57.710 And I think I'd like the size to be a little smaller, maybe 18, maybe 20. 27:58.160 --> 28:00.800 I'm going to give it an outline size of two. 28:01.550 --> 28:05.660 And I'm going to increase its letter spacing quite a bit. 28:08.220 --> 28:09.750 So something like that. 28:13.050 --> 28:14.430 Now compiling this. 28:14.430 --> 28:17.730 This is possibly going to throw things out of whack. 28:19.320 --> 28:25.830 And I'm not seeing it here on aura, but that's because it's down there. 28:25.830 --> 28:28.200 So we have a size problem, right? 28:28.200 --> 28:33.360 So what we need to do is go back into aura, select that widget. 28:34.220 --> 28:37.430 And we're going to check draw a desired size. 28:38.030 --> 28:42.710 That's going to put it where it should be, but we might have to adjust it again. 28:42.710 --> 28:44.720 So we're going to do some adjusting. 28:49.110 --> 28:50.760 So moving it up a bit. 28:51.910 --> 28:56.200 And just pressing play and seeing what it looks like. 28:57.480 --> 28:59.280 Full screening as well. 29:01.940 --> 29:04.040 So it could go a little higher. 29:05.240 --> 29:06.020 Now here's the thing. 29:06.020 --> 29:07.760 We can also make this. 29:09.240 --> 29:10.680 A little bit curved. 29:10.680 --> 29:18.630 So this can be flat, or we can change geometry mode from plane to cylinder and it'll be curved. 29:18.630 --> 29:23.640 Now that's going to have a different look and require us to move it as well. 29:23.970 --> 29:29.070 But if you like that kind of title, if you like that kind of look, then you can do that. 29:29.070 --> 29:32.850 And you can also just adjust it in the actor here. 29:33.710 --> 29:35.210 Until it comes forward. 29:36.330 --> 29:42.780 Now it's kind of two curved, but we can adjust parameters on it. 29:42.810 --> 29:46.260 We have a cylinder arc angle that we can change. 29:51.890 --> 29:56.000 So here the cylinder arc angle can be decreased. 29:56.000 --> 29:59.180 We can make it so that it's barely arched at all. 30:02.090 --> 30:04.340 We can see what it looks like in full screen. 30:04.550 --> 30:06.920 It's clearly going to need to come down. 30:08.160 --> 30:09.420 And go back. 30:18.720 --> 30:22.590 Okay, so still too high, too much forward. 30:22.890 --> 30:25.860 So I'm going to take it and angle it down a bit. 30:27.910 --> 30:32.590 I'm going to full screen this because it's hard to see anything that's going on here. 30:33.250 --> 30:36.100 And I'm going to angle it down just a tad. 30:36.130 --> 30:38.110 I'm going to take snapping off. 30:38.860 --> 30:40.270 Angle it down. 30:41.440 --> 30:42.490 Move it down. 30:44.210 --> 30:46.730 And then adjust it from off screen. 30:47.590 --> 30:52.660 While we're looking in full screen mode here, I'm going to alt P to play. 30:53.850 --> 30:55.110 Press escape. 30:55.110 --> 30:56.580 Move it back. 30:59.830 --> 31:02.410 And I think I'll decrease. 31:02.910 --> 31:04.860 That cylinder arc angle. 31:05.640 --> 31:09.090 So I'm actually thinking that I'm going to make it flat. 31:09.090 --> 31:11.070 So I'm going to put it back to plain. 31:11.100 --> 31:13.110 I think it's a little too problematic. 31:13.110 --> 31:15.270 So I'm going to reset its rotation. 31:16.230 --> 31:17.490 And position. 31:25.740 --> 31:26.490 Okay. 31:26.490 --> 31:32.040 And I think I might change the font size just a tad. 31:34.070 --> 31:38.900 So the title can go from 125 down to 115. 31:39.770 --> 31:44.930 Master of the elements can go down to probably 18, maybe 16. 31:44.930 --> 31:46.130 Let's see how this looks. 32:02.790 --> 32:04.440 That's looking pretty good. 32:04.860 --> 32:07.380 Okay, I'm feeling pretty good about this. 32:08.830 --> 32:14.200 I might give master of the elements a bit larger of an outline, perhaps three. 32:17.190 --> 32:19.590 But other than that, things are looking pretty good. 32:20.660 --> 32:26.330 All we have left to do is add a couple of buttons, and those are going to be in a separate widget, 32:26.330 --> 32:31.880 because this widget blueprint goes on the main menu or actor. 32:32.590 --> 32:35.980 So aura main menu takes care of that title. 32:36.970 --> 32:43.030 So I personally like the look of having the staff in front of the letters like that. 32:43.030 --> 32:45.760 I think it looks cool, but you may not like that. 32:45.760 --> 32:50.560 You may wish to have just a regular screen space widget and that's totally fine as well. 32:51.190 --> 32:58.360 So now that this is looking great, in the next video, we'll add a play button and a quit button so 32:58.360 --> 33:05.110 that our opening screen looks more like an actual opening screen and not a animated wallpaper. 33:05.110 --> 33:05.710 Right? 33:06.160 --> 33:06.820 Okay. 33:06.820 --> 33:07.750 Great job. 33:07.780 --> 33:08.890 I'll see you soon.