♪♪♪
Wes Bunn: Hello friends, welcome back.
In the previous video, we set up thumbnails for our characters.
We imported the textures.
We have created all these thumbnails,
we set up some settings in our maps, etc.
We also set up our Player Info and Save Games.
In this video, we are going to start working on the front end of the Main Menu inside UMG.
Let's go ahead and continue.
Make sure you are on the MainMenuMap.
Go to the UI folder and select MainMenu.
Double-click to open up MainMenu.
We are inside of UMG on the Designer tab.
Let's start out over in the Palette.
We are going to need a Border.
Select Border and drop it on top of the Canvas Panel.
We are going to need a Vertical Box On top of the Border to keep all of our options
aligned.
Expand Panel and select Vertical Box.
Drag-and-drop the Vertical Box on top of the Border.
Inside of the Vertical Box, we are going to have some text.
Drag-and-drop Text on top of Border.
Underneath the Text, we are going to have all of the Buttons for our options.
Drag a Button onto the Vertical Box.
On top of that Button, we are going to have some text.
Drag Text on top of the Button.
We are going to have four (4) options from the Main Menu.
Copy Button.
Paste it three (3) times on top of the Vertical Box.
We should have four (4) Buttons and some text.
It doesn't look like much inside of the Graph, but let's make some changes so we can
see it a little bit better.
I am going to stretch the Border out a little bit for now.
I am going to move it over to the center.
I am also going use an Anchor to center the Border so it always appears in the center.
Let's change the Border color to something other than white.
Select the Border and go down to Details panel < Appearance < Brush Color.
Is Brush Color is the one we want?
No.
Type 0 for R,G, and B.
Set the Alpha to 0.5.
Our background is going to be black anyway, so it is not going to matter.
We are not going to see anything. If we had this menu on top of a Lit level, we would
still want a Border behind our menu options so that we can see it better.
That Border will have some transparency to it, since we changed the Alpha to 0.5.
Select the Text Block.
This is going to be our header. Call this "Main Menu" over in the
Details panel.
Let's change the Font size of this.
Increase this to 64 so it is a bit bigger.
Under Justification, center it.
Select Border and in the Details panel, click the option Size to Content so it will look like that.
That will be our menu.
There we go.
Change the Text on each of the Buttons.
The first one will be "Host Game".
Before we do this, let's Delete this Button.
We can do this a lot easier actually.
Delete all of the Buttons and keep only Host Game. We want to style this Button
so it changes color when we hover over it.
If we do it now and then Copy it, we won't have to do it on each Button.
Go to the Details panel < Appearance < Style. Make sure you have the Button selected.
Go to Style and expand Hovered.
Under Tint, we are going to pick a yellowish color.
Before pressing OK, drag-and-drop the color on the drop down menu so we have reference
to this exact color a little bit later.
Click OK.
Rename this Button in the Hierarchy.
Press F2 and call it "HostButton".
We could change the color of the font.
Feel free to stylize this however you would like, but I think this is good.
This is good for now.
Select this Button, Copy it and Paste it three (3) times.
Now they will all have those settings for us.
We won't have to come back and do that.
We could have done this and clicked the Color Picker, but we are going to use
this later for other Buttons as well.
Change the name.
Press F2 on this Button.
Call this the "FindButton".
Press F2 on the third one and call this the "OptionsButton".
Press F2 on the last one and call this the "QuitButton".
Those are all of our Main Menu options.
Feel free to add more Buttons if you have more options.
Change the Text from Host Game to "Find a Match".
Expand OptionsButton and select the Text. Change the Text to "Options", or settings, etc.
Select the Text under QuitButton. Change the Text to "Quit".
Our Main Menu is actually set up from a design perspective.
We do need to go over to the Graph and determine what happens when the player clicks
on these Buttons.
Let's go ahead and do that.
Let's go to the Graph.
This is going to be pretty short, so let's go ahead and do this in this video.
This video is actually going to be short because there is really nothing to the main menu.
It is just a central location for all of our other functions and everything.
Delete the EventTick.
We won't need that.
We do need the EventConstruct. We are going to need to get a reference to GameInfoInstance
and store that.
Right-click in the Graph and type "Get Game Instance'.
Drag off of the Return Value, type and select "Cast to GameInfoInstance".
Connect the Event Construct to the Cast to GameInfoInstance.
Right-click on As Game Info Instance and select Promote to Variable.
We will call this variable the "GameInstanceRef".
GameInstanceRef or Game Instance Reference.
That is all we are going to do for this Event Construct script.
Press C to make a comment box and type "Get a reference to the Game Info Instance".
That is all it does.
We need to figure out what happens when the player clicks the Host Button. Select HostButton.
Down in the Details panel, add an OnClicked event for the HostButton.
The first thing we are going to do is Right-click in the graph and type "Remove from Parent".
We are going to Remove from Parent.
We are saying for it to remove the Main Menu.
Hold CTRL and drag-and-drop GameInstanceRef.
Drag off of Game Instance Ref and type "Show Host Menu".
We started with the Game Instance first because now we are calling that here.
That is all we need to do.
Press C to add a comment around this and type "Bring up and display the Host Game Menu".
This is very similar to the Find Button and Options Button.
Select the FindButton and add an OnClicked event.
Select both Remove from Parent and Game Instance Ref, then Copy and Paste.
Connect the OnClicked event to Remove from Parent.
Drag off Game Instance Ref and type "Show Server Menu".
Add a comment around this.
"Bring up and display the Server Menu."
Go to the Options and add an OnClicked event.
Select both the Remove from Parent and Game Instance Ref, then Copy and Paste.
Plug the OnClicked event into Remove from Parent.
Drag off of Game Instance Ref and type "Show Options Menu" and select it.
Connect Remove from Parent to Show Options Menu.
Add a comment around that.
"Bring up and display Options Menu".
The last thing we need to do is set up what happens when we quit.
Select the QuitButton.
Add an OnClicked event for Quit.
Right-click in the Graph and type "Quit Game".
Select Quit Game.
It is asking for the Specific Player.
We can just drag off of this and type "Get Owning Player".
This is the player associated with this UI, so Get Owning Player. That is all we need to do.
Add a comment around this and type "Quit the game".
I believe that is it.
That is all we need to do for our Main Menu.
Our Main Menu is very simple actually.
Compile and Save.
Close the MainMenu.
If we press Play now, we should see our Main Menu.
It is right there.
We can highlight over things.
If we click Quit, we should quit, which we do.
I think we are good.
This is a short video, but I didn't want to start on a separate section in
this video.
We are going to wrap here.
We are done with our Main Menu for now.
We are going to go on to the Host Menu in the next video.
It is going to be a little bit different than what we did now.
We are going to pause and we will pick it back up in the next video where we start working
on our Host Menu.
♪♪♪