Welcome back.
Now, before we start adding a save game system, we're going to need some menus.
And when we first open the game we need a main menu.
So in this lecture I'd like to create that.
And I'm going to start by duplicating this level so that we can have our post-process volume settings
as well as basically the general atmosphere.
I'd like to kind of use this as a backdrop.
So what I'm going to do is I'm going to go into my maps folder, take my dungeon and duplicate this
map, and I'm going to call the duplicate main menu.
So we have a map called Main menu.
And I'm going to double click it and open it up.
And now I'm in the main menu level.
And what I'm going to do for the main menu is I'm going to delete any characters that we have in here.
The main menu also doesn't need a nav mesh.
I'm going to delete the nav mesh bounds volume.
That's unnecessary and I'd like to have my player start start right here facing this area.
But I think I'd like to have something in front, like a wall.
I'd like to take this wall, for example, and place it in front.
Now it doesn't have to be a fade actor.
These are fade actors.
I can go into Assets dungeon, and I can find my three by two, or even a three by three by three if
I want a bigger one, and I can place it in here.
I'm going to turn snapping on.
And do that again.
So I have it snapped to the grid.
And now I can pull this up.
And I have a bit of a larger area here.
Like this.
Now just looking straight on, straight ahead.
I see that my torches are not perfectly aligned.
So what I can do is I can move this one over a bit.
Like so and I can move my player start.
I'm going to take snapping off and move my player start.
To where I want it to be now when I press play.
I'm going to start as aura, which is not what I want.
That's because we're spawning Ora at the player start according to our game mode default classes, but
I'm going to select none for my game mode, so when I press play.
I start with the default pawn now?
Yes, that means I can click and look around and even move around, but we'll fix that.
We can disable input, but I'm going to take this default pawn and move it to where I want it to be
when we start off so that I'm looking at what I want to look at.
So something like this.
And it's important to take a look at full screen.
So that we can make sure things are centered properly and not off center.
For example, this torch here could be moved a little bit to the left.
Okay so far this is a good start, but I do want to show something.
I want to show aura, perhaps posing in front of the camera.
And for that I have an asset.
I can go to assets character aura animations and we have this aura pose.
Here's what she looks like.
And I've animated her so that we can have something above her hand like a fireball.
So I'd like to make a special type of character blueprint specifically for the loading screen for the
main menu.
So I'm going to go into Blueprints Character Aura and create a new blueprint just based on the character
class.
In fact, it doesn't even have to be a character.
It could even be an actor.
If we make an actor or just click on actor here, we can call this BP aura.
Main menu.
And this is going to be what we see in front of the camera for the main menu.
Now if I add a skeletal mesh component.
Called Aura Mesh.
I can set this to aura.
And I can set the animation mode to use animation asset and I can choose or oppose.
And now we have a skeletal mesh playing the aura pose animation and she's just standing there.
It's nothing really too special, but along with this, we can also add additional components such as
a Niagara system.
And I can call this fireball.
And I'm going to choose for the Niagara system component fire underscore four.
Now this is a special Niagara system component with fire, which is a small flame designed specifically
for this purpose for aura to have levitating above her palm like this.
So I'm going to make sure that it's right there above the palm.
And we can take this aura main menu actor.
And we can place it right here in front of the player start.
So I'm going to drag it in.
I'm going to rotate it by 90 degrees.
And if I press play, I can see where she is in relation to the player start.
Now she's a bit far, so I'm going to bring aura a bit closer.
So something like this looks a bit better.
Now aura is going to want her staff.
So I'm going to add to Aura Mesh a skeletal mesh.
Another one and I'll call this staff.
And I'll set this to Ora's staff.
Now that puts it at the origin here.
I'm going to want to connect it or attach it rather.
To the hand socket weapon hand socket.
So I can choose right here by selecting right next to parent socket.
It's grayed out.
You can't enter a name, but you can click on the magnifying glass and browse and get that socket.
So now.
She's holding her staff and it's looking good.
So this is a pretty good looking start.
I'd like Ora's head to be centered right here in the central brick.
So what I'm going to do is move her over.
And down a little.
And in addition to that.
If I press play and I full screen after clicking in the viewport, I want to make sure that aura is
at a good size.
So far things are looking pretty good.
I'll move her up just a tad.
And that looks pretty good now.
We're levitating this fireball above Aura's hand.
I'd like that fireball to sort of bob up and down a bit.
I'd like some sinusoidal motion, and for that I can use tick.
And I can take my fireball and set its location.
Now, sine is a mathematical function perfect for bobbing up and down.
And if I'm going to use the sine function, I'm going to want a running time.
So I'm going to promote delta time to a variable called.
I'll just call it time.
And I'm not going to set it to delta time.
I'm going to set it equal to time plus delta time.
So I'm going to take delta seconds.
I'm going to add to it adding time and take the result and assign that to time.
And if I'm using the sine function the sine function is periodic.
It's periodic every two pi pi being the number 3.14159.
If I take that number and multiply it by two, then I get two pi 6.28318.
Now every time time reaches this number, we can reset it to zero, because that's the period for the
sine function every time it reaches two pi.
Then as the time continues to increase, that bobbing sinusoidal motion has come back to the middle
and is beginning to start over.
And if you'd like to learn more about the sine function, I explain this in my Unreal Engine five C
plus plus the Ultimate Game Developer course, which teaches more of the basics.
But all you need to understand is that two pi is the period for the sine function.
So if I'm going to use the sine function, I'm going to reset my time to zero as soon as it reaches
two pi.
And that way we'll never get an overflow in our float by increasing it too much.
So I'm going to place a check to see if time is greater than 6.28318.
That's two pi.
And if so, then we'll set time to zero.
So we're going to say.
Set time to zero.
Now I'm going to collapse these to a function.
And I'm going to call this update time.
And now we have a running time that we can use for the sine function.
Now I'm going to take that time.
And I'm going to hook it up to the sine function.
Now sine comes in two flavors degrees and radians.
Because the sine function takes a value in as an angle.
Now what we want is sine in radians.
And this is going to give us periodic behavior.
Let's just see what that value is by printing a string the sine of time.
Let's go ahead and press play.
And we see that it goes from zero up to one all the way back down, keeps going down to negative one
and back to zero.
And it's resetting because we're resetting that time every period of the sine which is two pi of an
untransformed sine.
Now we can take that value retrieved from sine.
And we can scale it.
We can multiply it by what we refer to in mathematics as an amplitude.
So if I multiply and promote this to a variable called amplitude.
And use this instead.
Then sign will be scaled by amplitude and we can compile and give it a default value such as ten.
And now if we press play, we see that it goes all the way up to plus ten, all the way down to negative
ten, and it smoothly oscillates between the two.
Now, what I'd like to do is use that to move my fireball.
I'd like to set the location of the fireball in the Z direction, and I'd like to get the fireballs
location from the start.
So I'm going to drag actor, begin overlap, and get that out of the way.
But in Begin play, I'm going to take my fireball and I'm going to call Get World location on it.
And with this world location, I'm going to store it, promote it to a variable called fireball.
Initial location.
We'll store that first thing, and then every frame we're going to add to that, we're going to add
to its Z according to this amount here.
So what I'm going to do is I'm going to take my fireball initial location.
And I'm going to add to it.
And what I'm going to add is simply a value to its z component.
So I'm going to right click on this.
Split the struct pin and add the vector.
00Z, where z is this value here which we can collapse and make a pure function.
I'm going to call this sine of time sin.
Time is short for sine of time.
I'm going to compile that and I'm going to convert it to a pure function.
So we have a nice neat little sign of time node.
And we'll take this.
And we're going to set our fireball location.
So I'm going to get the fireball.
And I'm going to call set world location.
And we're going to set its world location to this value.
And we should see it now floating up and down.
Let's see how that looks.
And there it goes.
Oh it's burning.
Aura.
Just a bit.
So it's probably going up a little too much, which means we could go into sign of time and we could
change the amplitude.
We didn't have to go into sign of time for that.
But we can change it.
We can set it to five.
Now it won't go up so high.
And it won't come down so low.
And that looks pretty good.
I think I like it, I might even make it just a little lower, maybe 3.5.
We can make it bob up and down even less, and I think that is going to look pretty good.
Okay, so that's looking nice.
What about something behind aura?
Now, we do have a magic circle.
And a magic circle might look kind of nice.
We could add a decal component to this actor.
By clicking add we can search for decal.
We can choose that.
And we can call this simply decal.
That's fine.
Or Magic Circle decal if we want.
And we can take this Magic Circle decal and we can set its material.
Now we do have Magic circle the material.
We also have Magic Circle Blue.
And if we want, we can even go into this folder and duplicate that and make a new one.
Or simply right click on Magic Circle and create a material instance.
And we can call this My Magic Circle underscore.
Main menu.
And we can set this to that one.
Main menu.
I'm gonna not be so lazy on that name.
I'm going to capitalize.
Main and menu.
Now by default, this is the configuration we get right.
We're going to want to rotate it.
First of all going to rotate it by 90.
And I'm going to move it back.
And I'm going to compile and take a look.
Here in the world we see that it's not quite reaching that wall behind her.
So we're going to need to move it back.
And what I'd like to do is move this window off screen and on the other screen while I'm adjusting it,
I'm going to simply move this back.
In fact, I don't need to go to the other screen.
I can just do it here.
I'm going to move it back.
And up and make sure that it's centered on Ora's head.
Now, it's a little hard to do from within the blueprint, so in this case, I am going to move it to
the other screen.
I'm going to press play first.
It's pretty centered, but it could be adjusted a bit.
I'm going to hit stop and without even really moving anything, I'm going to come over to my other screen.
In fact, I'll just bring it here so you can see what I'm doing.
I'm going to move it so that Ora's head is centered here.
Like that.
So that's looking pretty nice.
I'm liking that.
And you know what would be even better?
A nicer touch is if this were rotating.
If we were rotating.
Our decal every frame.
That would be nice.
So what we can do is add a local rotation to it.
We can go into event graph to event tick here.
And we can add some local rotation to the Magic Circle decal by calling Add Local Rotation.
And if we do this we can split the delta rotation struct pin and we can add to one of its rotational
components.
Which one?
Well let's see if we were to rotate about its x axis direction.
You know, what helps me to visualize this is to look in the direction of its forward vector like this.
And if the z is up and the green, the y is to the right, red is forward, then what rotational axis
is it?
If we were tilting our head to the side, well we know shaking our head no.
Is your right.
Looking up and down is pitch.
So the other dimension tilting to the side.
That would be roll right.
So we're going to add to its roll.
So to the role we're going to add at least delta time times something.
So I can take Delta seconds.
Come over here and multiply it by something.
And you know what?
Rather than just bringing it over there, I'd like to just get world delta Delta seconds.
Same thing.
It's just.
Easier that way.
And I'm going to multiply by some value and I'm going to promote it to a variable.
I'm going to call this magic circle rotation rate.
I'm going to compile that and set it to a value, maybe 12, and hook that into the role.
Compile that, press play and we have it rotating.
I'd like it to rotate the other way actually.
So I'm going to take this rotation rate and make it negative.
And in fact it's a little high I'm going to set it down to about four.
So I think I like that.
In fact, I might even bring it down to about two.
Yeah, I like it slow.
Like this.
This looks pretty good.
Okay, so that's looking nice.
And this would be a pretty good looking main menu.
I'm going to click into the viewport and press F11 and see how it looks.
Are we centered is the question.
And.
I think it looks pretty much centered.
But of course you're going to want to do some tweaking until everything is perfectly centered.
I think we could probably move everything here over to the right just a bit, but not much.
So I'm going to select my player start.
I'm going to select aura.
I'm going to select the brick wall behind her and the two pillars here.
And we're going to drag holding shift slightly to the right.
And just make sure that we're centered here.
And I can hit alt P to play and see what it looks like.
I think this looks pretty good now.
That's nice for an opening screen, but we need a title here.
And for the name of our game.
I've chosen aura and she's an elementalist.
She's a master of the elements.
I'd like that to be the title.
I'd like the title of the game to be aura master of the elements.
So we're going to add yet another component to this actor.
And it's going to be a widget component.
Now that means we need a widget, right.
And I'm starting to think that all of this should be in a folder dedicated to the main menu.
So I'm going to actually create a new folder called Main Menu and bring this actor into it because it
doesn't really belong in our character folder.
So what I'm going to do is make sure main menu is visible there.
And I'm going to bring our main menu into the main menu.
I'm going to move it there.
And now we can put all things main menu here.
And that includes our new widget blueprint which I'm going to base on just user widget.
It doesn't have to be an or a user widget.
It doesn't have to change at runtime or anything like that.
We'll call this Wbgp.
I'm going to call it title, that's all.
Just title and title can get an overlay.
And tidal can get a desired size.
We're going to go ahead and change from fill screen to desired.
And we're going to find it.
Where did it go?
Got a zoom in to see it.
Here's our little square and I'm going to bring text onto it.
And this text is going to say aura in all caps.
And this is a really hideous font.
So we're going to change that font.
Amaranth is okay, but I think I'd rather do Pirata.
Pirata won here.
And for this font.
We're going to want to see how big it looks on the screen, but I definitely think it could use some
letter spacing.
I want it to be justified to the center.
And I want it horizontally aligned to the middle and vertically aligned to the top.
I want it to have an outline size of probably a lot, maybe not four.
Maybe 2 or 3, and I'm going to increase the font size a good deal.
Now I want to see what this looks like just by itself.
And I'm going to add it.
In a widget component to aura main menu.
So I'm going to take Aura's mesh and on top of the mesh we're going to add a widget component.
And if we don't want the widget component moving with the animation, we could just attach the widget
component to the default scene route.
And the widgets we'll call title widget.
And we'll set its widget class to WB title.
And there it is.
Now we see that it's facing that way.
So we can rotate it by 90 degrees and we can bring it back behind aura.
And I'm going to undock this actor so that we can adjust it while looking here in the world.
I actually kind of like that yellowish outline that it has by default.
Now I'm going to bring it back and notice this is in world space.
Now, if I were to change this so that it's in screen space.
Well, it's going to look different.
We won't.
First of all, we won't see it until we press play.
And then we'll see what it looks like in screen space.
That's what it looks like.
So we can move it around and see what it looks like.
I obviously need to increase the size of it now.
That's what it looks like in screen space.
It looks pretty good, but we can also use world space and then aura can block the widget.
If we set this to world space, suddenly we can see it in the viewport.
And if I move it behind the staff, for example.
Well, now we can see that the staff blocks it, which is actually kind of cool, I like that.
So I'm going to take its location and reset it.
So it's centered.
And then I'm going to move it back behind aura.
And another cool thing about these world space widgets they cast shadows.
Look at this.
The default behavior is to cast shadows, and that's another cool aspect of them.
Now I'm going to put it all the way up here, but it needs to be bigger, obviously.
So I'm going to increase the font size and that means I need to go into WP title.
I'm going to dock it right here so we can see it and see what we're doing here.
And here's the size.
It's 69.
And I can move it up to about 100.
And if I hit compile, then we'll see that change reflected behind aura.
So I'm going to make the.
Size about 120.
Compile.
A little bit better.
I can go back to the aura actor.
Bring this back up.
And then I can increase the size again.
I think 120 is just about right.
I'll try 125 though.
Okay, so another thing I'm noticing is the widget itself has the decal on top of it.
And that's because our decal needs to be moved back a bit.
So we're going to move.
Not the widget, not aura herself.
I'm going to undo that change.
I'm going to take aura.
And I need to select that decal.
So here's what I can do I can.
Move those off screen and with Ora selected, at least this Ora actor.
Here she is.
I can select that magic circle decal and I can move it back, but.
It would be better to move it on the Or actor itself.
So here's the Magic Circle decal.
I'm moving it back.
And now we see that it's only on the wall.
All right.
Saving my progress.
We now have a working title and with a few tweaks.
We can go back and forth between playing, going to full screen, seeing what it looks like and adjusting.
You'll notice that the world space widgets do appear a little bit more blurry, so if you're not okay
with that, you can change that.
I'm going to move it up slightly.
And press play with alt P.
That looks pretty good.
And at this point I'm feeling good about aura, the words.
So I'm going to add the subtitle in the widget.
So I'm going to add some more text here.
And this text is going to be aligned.
Horizontally to the middle and vertically to the bottom.
And I'm going to try amaranth for the font.
That's not amaranth.
There it is.
And I'm going to say for the text.
Master of the elements.
And I think I'd like the size to be a little smaller, maybe 18, maybe 20.
I'm going to give it an outline size of two.
And I'm going to increase its letter spacing quite a bit.
So something like that.
Now compiling this.
This is possibly going to throw things out of whack.
And I'm not seeing it here on aura, but that's because it's down there.
So we have a size problem, right?
So what we need to do is go back into aura, select that widget.
And we're going to check draw a desired size.
That's going to put it where it should be, but we might have to adjust it again.
So we're going to do some adjusting.
So moving it up a bit.
And just pressing play and seeing what it looks like.
Full screening as well.
So it could go a little higher.
Now here's the thing.
We can also make this.
A little bit curved.
So this can be flat, or we can change geometry mode from plane to cylinder and it'll be curved.
Now that's going to have a different look and require us to move it as well.
But if you like that kind of title, if you like that kind of look, then you can do that.
And you can also just adjust it in the actor here.
Until it comes forward.
Now it's kind of two curved, but we can adjust parameters on it.
We have a cylinder arc angle that we can change.
So here the cylinder arc angle can be decreased.
We can make it so that it's barely arched at all.
We can see what it looks like in full screen.
It's clearly going to need to come down.
And go back.
Okay, so still too high, too much forward.
So I'm going to take it and angle it down a bit.
I'm going to full screen this because it's hard to see anything that's going on here.
And I'm going to angle it down just a tad.
I'm going to take snapping off.
Angle it down.
Move it down.
And then adjust it from off screen.
While we're looking in full screen mode here, I'm going to alt P to play.
Press escape.
Move it back.
And I think I'll decrease.
That cylinder arc angle.
So I'm actually thinking that I'm going to make it flat.
So I'm going to put it back to plain.
I think it's a little too problematic.
So I'm going to reset its rotation.
And position.
Okay.
And I think I might change the font size just a tad.
So the title can go from 125 down to 115.
Master of the elements can go down to probably 18, maybe 16.
Let's see how this looks.
That's looking pretty good.
Okay, I'm feeling pretty good about this.
I might give master of the elements a bit larger of an outline, perhaps three.
But other than that, things are looking pretty good.
All we have left to do is add a couple of buttons, and those are going to be in a separate widget,
because this widget blueprint goes on the main menu or actor.
So aura main menu takes care of that title.
So I personally like the look of having the staff in front of the letters like that.
I think it looks cool, but you may not like that.
You may wish to have just a regular screen space widget and that's totally fine as well.
So now that this is looking great, in the next video, we'll add a play button and a quit button so
that our opening screen looks more like an actual opening screen and not a animated wallpaper.
Right?
Okay.
Great job.
I'll see you soon.