Open the widget "UMG_TitleScreen" in UMG UI Designer. The elements that we will use are the three menu buttons.
Select one of the buttons, be careful not to select the image that is inside the button, it is easier to select the button in the "Hierarchy" tab.
In "Details" tab, category "Events", event "onClicked", click the button with the "+" symbol, as the image below. This will create an event that will be triggered when the button is pressed.
Do the same for the other two buttons. It is important that the buttons have meaningful names to identify the events in EventGraph. The image below shows the events created for each of the buttons.
Let's start with the "Start" button. It only loads the game level and remove the widget from the screen:
 |
| Click to enlarge |
The name of the level used in the function "Open Level" must be complete, that is, the Path plus the name. To get the Path of the level, just move your mouse over the icon of the level in the Content Browser.
To make the transition between the "Title" screen and the "About" screen we will first create a variable of type "User widget" that will hold a reference to the "About" screen widget. This variable should be editable.
To show the "About" screen, we will modify the "Visibility" property of the Title screen and of the About screen. The Title screen will be hidden and the About screen will be displayed.
 |
| Click to enlarge |
The Exit button will end the game using the "Quit Game" function:
 |
| Click to enlarge |
These are the actions that belong to the "UMG_TitleScreen" widget. The other actions will be made in the Level Blueprint.
In the main editor click on the "Blueprints" button and then in the "Open Level Blueprint" option to edit the Blueprint of the level "TitleScreen".
First we will create two variables to store references to the Title screen and the About screen.
The image below shows the two variables that were created. The variable "TitleScreenWidget" must be of the type "UMG_TitleScreen" in order to access the variable "AboutWidget" that we created in the Title screen.
The variable "AboutWidget" can be of the type "UserWidget" or "UMG_About", because we did not create any variables that need to be accessed in the About screen.
The initialization actions of the widgets screens will be made in the "Begin Play" event of the Level Blueprint. Let's create the widgets of the two screens and store their references in the variables "TitleScreenWidget" and "AboutWidget". The two widgets will be added to Viewport, but the About screen will be hidden.
 |
| Click to enlarge |
At the beginning of the event, a property of the Player Controller is modified so that the mouse appears on the Title screen. After the creation of the "UMG_About" widget its reference is also stored in the variable "AboutWidget" of the Title screen.
We need to define one way to exit the About screen and return to the Title screen. I opted not to include a button in the About screen. To exit the About screen you must press the "Enter" key. These actions are also in Level Blueprint:
 |
| Click to enlarge |
By pressing the "Enter" key, a test is done to check if the About screen is visible. If it is visible then it will be hidden and the Title screen appears.
