Unreal: Menus

Main Menu

I created a User Interface widget Blueprint file



In the Blueprint I was able to start designing the main menu user interface. Using two buttons from the UI panel and text to go on top of them.



With the button highlighted I created a new "Events" "OnClicked" to determine what happens upon clicking the button.

This is where I constructed the blueprints to make loading the game possible.



With the OnClicked event for the quit button, it was as simple as linking the "Quit Game" node. Now when the quit button is pressed, the game will quit.

With the Play Button, we have to use 'Remove from Parent' to disable the main menu overlay from the viewport. Once we start the game we must enable the player's movement by activating the player controller and player character. Finally, we set the game pause state to false which activates all actors in the game world.

Game Over
The Game Over menu is extremely simple. I have used the same method as the main menu to create a simplistic game over UI to begin with.





Identical to the other quit button, we use the Quit Game node.
To restart the game, using the "Play Again" button, we use the "Open Level" node and type in the name of the level to load. In my case, the naming of my level is still the default level name from the First Person template "FirstPersonExampleMap".

Pause Menu
 

The Pause Menu UI was created in the same way as the other menus, except for the fact that I am using a border. The User Interfaces are plain and I intend to redesign them at a later stage, and for the time being the functionality is the main purpose.



The reason I have used the Escape key and P key is because the "Escape" key exits the play mode and I would have to build an executable version of the game to test it. For this reason, I have implemented the "P" key to pause the game, and will possibly remove this before the final version.

Using the branch node, I have checked the condition of IsGamePaused, then set the game to be paused or unpaused based, and adjust the boolean variable state based on the condition result.

If the game is paused, we add the PauseMenu user interface widget to the viewport, and if the pause state is false we use "Remove from Parent" to remove the user interface.

Controls Menu


Using the UI elements from Unreal I have created a menu to explain the controls. I used buttons for the backgrounds, which may not have been the wisest choice because they are interactive even though they have no functionality (except Return). I was unable to find a solution to making them non-clickable.



I simply remove the UI from the parent, then activate the Pause Menu widget to the viewport, then set the cursor active. After testing the menu system, I found a problem with the cursor disappearing after the first click or switching between menus.



I was easily able to resolve the issue by going through all the menu systems and ensuring that I am activating the cursor when we change the menu and make sure it is deactivated when we begin playing again.

The implementation of menus is extremely simplistic for the basic features. One issue I encountered was importing an image to use as a background, and it does not seem to be a case of dragging and dropping it in, or importing it as expected. I have lost quite a bit of time looking for the answer because it seems as if many of the solutions are out-dated, and have currently settled for the basic UI for the time being. The other problem I have is that I have included the controls menu on the "Main Menu" and "Pause Menu" and attempted to implement the "Return" button to have two functionalities, returning to the corresponding menu based on the one it was previously on. Unfortunately, I was unable to find a solution to the problem, and the return button currently loads the Main Menu regardless of the previous menu. The menus are practically identical at this stage so the issue is minor.