4/2

Open up content drawer

Open Content Folder

Open Up your UI Folder UI

Open up your UI Folder

Right Click

Go to User Interface

Select Widget Blueprint

Choose User Widget

Name it WB_MainMenu

MainMenu or whatever you want then open up your blueprint

Once you have opened your BluePrint

Search for Canvas Panel

Drag it into Main Menu

In your Palette

Search for Vertical Box

Drag it into Canvas Panel

Select your Vertical Box in the Hierarchy

Increase the size of your vertical box

Select Anchors

Choose Center anchor

In your Palette

Search for Button

Drag three instances of the button into the vertical box in your hierarchy

Select each button and change the bottom padding to 100

Padding puts space between the buttons just like HTML

In your Palette

Search for Text

Drag the text directly on to your button

Do this for each Button

Change the text in your buttons by changing the Text Content in your details panel

Use the appearance tab in your Details Panel to style the text as you wish

Return to your first person map

Click File

Click New Level

Click Empty Level

Click Create

Save your level in your content folder

When you start the game in this level, it adds a player which we do NOT want

All we want is the menu to open

In order to do this, we need to add a blueprint to our UI Folder

Open your content drawer

Make sure your UI Folder is open 

Right Click

Add Blueprint Class

Game Mode Base

Name it BP_MenuGameMode

Go to World Settings (Top Right)

Drag your MenuGameMode Blueprint Class into GameMode Override

Open the Level Blueprint

From the Event BeginPlay, pull out a Create Widget Node

In Class, chose MainMenu

From your Widget, pull out Add to Viewport from your Return Value

When you play the level, your menu should now appear

Open your Main Menu Widget Blueprint

Click your Start Button

In the details panel find On Clicked under Events

Click On Clicked

Pull out from the exec on On Clicked and select Open Level (by name)

Add the name of your Level Map (You can find it in your Content Drawer in the maps folder)

Click on Designer (top right) to get back to your Main Menu Widget

Chose your Quit Button

Find On Clicked again in your Details Panel

Click On Clicked 

Pull out from the On Clicked Exec and add Quit Game

Now we are going to add a background to the start menu

Open your Content Drawer

Open your UI Folder

Add an image to the folder

Select your image in the folder

Right Click on the image

Select Sprite Actions

Select Apply Paper2D Texture Settings

Open Up your main Menu and select designer

In the pallet search for Image

Drag it in your menu

Select your image and in the details panel open up anchors

Choose the full screen anchor on the bottom right

Under Anchors, make all your offsets 0

In the details panel

Locate Brush

Expand the Brush Panel

Select None

Choose your image (idea resolution is 1920 x 1080)

In the details panel

Change the Z Order to -1 so that it sends the image behind the buttons

Now let's fix the mouse functionality when you start the game

Go back to your event graph for the main menu

Find event Construct

Right Click and add Get Player Controller

Drag out a new node from the Blue Return Value of the Get Player Controller

Add Set Show Mouse Cursor

Check the Show Mouse cursor Box in the Set Show Mouse Cursor Node

Connect the Exec from Event Construct to the input Exec of the Set Show Mouse Cursor

What we are doing is making the mouse cursor appear in the game

Pull out another node from the blue Return Value of your Get Player Control

Add Set Input Mode UI Only

Connect the output Exec of your Set Show Mouse Cursor Node to the Input exec of the Set Input Mode UI Only 

Now we will make the Mouse disappear when we start the game

Copy your Get Player Controller Node and Set Show Mouse Cursor Nodes and paste them by your On Clicked Node

Connect the Open Level (by Name) exec Node to the input Exec of the Set Show Mouse Cursor that you just pasted

Uncheck the Show Mouse Cursor Box so the mouse is hidden

From your Return Value of the Get Player Controller, pull out a new Set Input Game Mode Only node

Connect the Set Show Mouse Cursor

Now when your game is at the start menu, the cursor will remain and when you start the game, the cursor will disappear

Now let's build the options menu

Open up your UI Folder

Right Click

Go to User Interface

Select Widget Blueprint

Choose User Widget

Name it Options or WB_Options or whatever you wish to call it then open your blueprint

Once you have opened your BluePrint

Search for Canvas Panel in the pallet 

Drag it into Main Menu

From your palette search, add a text 

Add it to the canvas

Change the Text to Resolution

Move the text where you want it to be in the options menu

Grab the corner of the Flower Looking Anchors and place them around your text

This is so that if you change the resolution, the text stays in the same position.

Add a horizontal box from the palette search and drag it in the panel

Make your Horizontal Box Larger and add the anchors

In the Palette Search, find button and drag it in your horizontal box (you can name the button if you wish to be more organized

In the palette search, find text and drag it in your button in the hierarchy then change the test to 720p

Use the Details Panel to modify the text to your liking

In your hierarchy panel, duplicate your button by right clicking and select duplicate three time then change the text in buttons to 1080p, 2K and 4K

Select your 1080p button and add 100 to the left padding

Do the same for the 2k and 4k to add some spacing

Move your horizontal box to fit your resolution buttons and move your anchors

Duplicate your Resolution Text, change the name to Texture and set the anchors

Duplicate the Horizontal Box, Delete 4k and change the names of the buttons to Low, Med and High

Once you have created all the buttons, duplicate your horizontal box again, remove all but one button, set the anchors and change the text to Back.

In your Hierarchy, give a name to all your buttons if you have not already done so

Switch from Designer Mode to Graph Mode

Select your High Button from the top left of your My Blueprint

Select On Click in the events panel

From the On Clicked Exec Node, pull out and add set game settings

From the Return Value of Get Game User Settings, pull out set texture quality

Set the value in Set Texture Quality to 2 (high)

From the Return Value of the Get Game User Settings, pull out and add Apply Settings

Connect the output Exec from the Set Texture Settings Node to the input exec of the Apply Settings Node

Remove the Check for Command Line Overrides Box in the Apply Settings Node

Repeat these steps for Your Medium and Low Buttons

Make sure you change the values of the Set Texture Quality

Select all your texture nodes and create a comment by pressing C

Go back to your Main Menu in designer mode

Click on the options button

Click on the On Clicked Event in the Details Panel

When you click the On Clicked, it will add an On Clicked Node in the Event Graph

From the exec, pull out and add a Create Widget

In Class, select the Options Widget Blueprint that you created

From your Return Value of the Widget, right click and select Promote to Variable

Name the variable OptionsWidget

From the output of the OptionsWidget, pull out and add a Add to Viewport Node

Compile and save

Go back to your WB_Options in Designer Mode

Select your Back Button

Click the + On Clicked

In Graph Mode from your On Clicked Exec, pull out a Open Level Node

Add the Level Name of your Start

Compile and Save

Test your Menu

In design Mode of your WB_Options, select your  720p button and add On Clicked from the Details Panel under Events

From the exec of the On Clicked Node, pull out and add Get Game user Settings

From the get Game User Settings Node, pull out Set Screen Resolution from the return Value

Pull out the Resolution from the Set Screen Resolution and add a Make IntPoint Node

Set the resolution to X = 1280 Y = 720

From the Get Game User Settings Node, pull out Return Value and add Apply Resolution Settings Node

Connect the Exec output from Set Screen Resolution to the Input Exec of the Apply Resolution Settings Node

Repeat this process for 1080p, 2k and 4k

1280×720 (HD), 1920×1080 (Full HD), 2560x1440 (2k), 3840×2160 (4K UHD)

Select them all and create a comment

Open your game Level

Open your level blueprint

Change Open Level to your Start Level

Compile, save and test

That's a wrap