How to make a simple "main menu" for the game in the Unreal Engine 4. Part 1

This tutorial is my first “article” on the Unreal Engine 4. I myself relatively recently began to master this engine and game development in general, and now I am working on creating a more or less simple game. Recently I finished the basic version of the menu for my project and decided to describe my experience in this article.

This article does not require any special skills and you only need to install the engine itself . I will use the latest stable version to this day: 4.16.2.

What do we do?

I made this menu for the game I'm working on. As a result of the tutorial we will do something similar. (The game itself is not included in the tutorial) .
')

1. The main menu is the first screen of the game (this article).
2. The “pause” menu is the same menu, but with an additional “Continue” button.
3. Animations and smooth transitions when opening / closing the menu.

Since the article turned out to be long because of the screenshots, parts 2 and 3 will go separate articles (I hope, during this week).

0. Create a project

Let's take as a basis the template for the First Person Shooter. You can use any other template or use a blank (Blank) template - it does not matter for this article.

I will use the blueprint template because In any case, the menu is more convenient to create widgets and visual scripts via UMG, and working with UMG from C ++ is not very convenient ( however, it depends on complexity and preferences — in the project I mentioned above, I use a mixed approach ).

After launching the Unreal Engine, you will see the project creation screen:



Choose New Project -> Blueprint -> First Person .
Enter the path to save the project and the name of the project, click Create Project .

After launching the Unreal Engine you will see something like the following:



You can immediately click Play , if you are wondering what the FPS game template is.

1. The main menu - the first screen of the game

The easiest way to make the main menu is to create a new empty level for the menu and launch the game from it.

So, create a new level!

Left in the Content Browser open the Maps folder



Here, from scratch we call the context menu and select the Level item.



MainMenu call the new level MainMenu .

Double-click on the level and see that the level is nothing - just a black viewport.



In this case, it is exactly what we need!

In the Content Browser return to the level above and through the same context menu create a New Folder , call it UI .

Open the UI folder, create a new widget through the context menu: Widget Blueprint



Let's call it original again: MainMenu . Open the widget by double clicking and see the next screen. By default, it opens in a new window, but you can drag a tab into the main window or simply expand it to full screen.



In the upper right corner of the viewport there are display settings (they affect only how you see the widget in the editor, but not in the game). For myself, I will set the resolution to 1080p and center the viewport so that the widget itself occupies the entire usable area



From the Palette on the left, drag a Text element onto the main field and enter some string into it. To automatically set the size of the element in accordance with the text, check the Size To Content option.

And click the Save button in the toolbar.
UE4 likes to fly out unexpectedly, and in the case of departure, all unsaved changes you lose.



The added text will be the name of our game. Using the “chamomile” we will center it horizontally and at a height of 20% from the top edge of the screen. "Chamomile" allows you to align widgets and tie them to the right points, it is very convenient if you need to make interfaces that will work at different screen resolutions.

If you do not see the "daisy" - select our text element by clicking on it with the left mouse button.



On the right, in the Details panel, the Position X Y options determine the position of the element relative to the anchor point (the “Chamomiles” center) and are calculated according to the values ​​of the Alignment option, which specifies the point of the element itself in values ​​from 0.0 to 1.0 .

For example, the value X 0.5 Y 0.0 sets the point in the middle of the element horizontally and on the upper border of the element vertically.

By the way, you can control the "chamomile" through the Anchors option.

In the same Details panel, set the font size to a larger one, for example, 60 units.

Creating the menu itself

For the menu, the UE4 offers a convenient Vertical Box element - it allows you to automatically align several child elements; in our case, these will be buttons.

Vertical Box can be found in the Palette panel, in the Panel section.



Set a reference point for it approximately in the middle of the screen, it can be slightly higher.

Inside the Vertical Box place the Button element, and inside the Button , place the Text element. On the left, in the Hierarchy , you can verify that everything is located correctly. If not, then there you can move the elements to get the desired nesting.



Colors in UE4 are mainly defined by four variables of the type float (RGBA: red, green, blue, alpha), each value can be from 0.0 to 1.0 .
Make the button background transparent by setting the alpha value to zero in the Background color parameter. Do not forget to select the button, and not the text element inside it.



The text element can be set to a larger font size, for example, 35 units. And the text itself is changed to " ".
I will not insert a picture how to do this; we have already changed the font size a bit earlier when adding a title.

Add some more buttons. To do this, in the Hierarchy panel, call the context menu on the Button element, select the Copy item (or press Ctrl+C / ⌘+C ), then select the Vertical Box and paste the copied button 3 times.

Change the text of the new buttons: " ", " ", " ." The latter is illogical and should be placed at the very top. To do this, select the button and use the navigation buttons that we have thanks to the Vertical Box .

At this stage, the menu should look something like this:

Display the menu in the game

Now we will make the created widget displayed when we start our MainMenu level.

Let's move to the main tab of UE4, where we have an empty level with a black viewport.



In the top toolbar, click the Blueprints button and in the menu that appears, select Open Level Blueprint . The blueprint editor will open, where you can create handlers for various events and generally write the logic of the game (not specifically in the level blueprint, but in the same interface).



Blueprints is a powerful programming language, despite the fact that here you are not writing code, but composing it from blocks (nodes). “Under the hood” C ++ still works there, but many things are much easier and more convenient to do via Blueprints, instead of writing the code directly “manually”. However, the opposite is also true: many other things are more convenient / easier to do in code. Therefore, when creating a game, my recommendation is to use a combined approach, and not to focus on one thing.

If you don’t see BeginPlay nodes, then add it via the context menu and search string. The location of the node on the field does not matter, but in the case of complex scripts, it is better to try to locate the node immediately so that you do not get confused later.



By analogy with BeginPlay create next to the Create Widget node:



An event node (events, events) usually has only one outgoing pin-pin - exec pin ( from “execute” ), a run pin. Other nodes may have parameter pins and result pins. The colors of the parameters and results of the pins show the type of value (boolean, int, string, etc., a lot of various options).

To make it clear to the engine that we want to execute the Create Widget node when the BeginPlay event BeginPlay , connect the outgoing exec-pin of the BeginPlay node with the incoming exec-pin of the Create Widget node. To do this, left-click on the pin and without releasing the button drag to the incoming pin.

In the Create Widget node, in the Class parameter, select our MainMenu widget



From the pin of the parameter Owning Player draw a line to an empty place (yes, this is also possible), release and look for the Get Player Controller node in the menu, add it. Since UE4 is a multiplayer engine, this parameter determines which player will be shown the widget. In the case of a single player, you can simply leave the Player Index equal to zero.



Now when you start the game, the widget will be created, but we will not see anything, because it still needs to be displayed. And also - transfer control from the game itself to the interface.

To do this, from the Return Value Create Main Menu Widget node, drag the connection to an empty place and look for the Add to Viewport node in the menu. In this case, when creating a node, an exec-connection should connect automatically.



The triangle in the bottom of the new node says that there are some hidden parameters. Click it and see the ZOrder option - it sets the order in which the widgets will be superimposed on each other if we add several widgets to the screen at once. For the menu, it will be logical to put a larger value so that the menu is always on top of the other widgets. For example, 9999 .

The final touch (at this stage) - you need to switch the input mode. We need a Set Input Mode UI Only node. As the Target parameter Target you need to specify the same Player Controller as before, and as the widget, the object created by the Create Widget node.



In the top toolbar, click the Compile button. Go back to the main tab, save everything (menu File -> Save All ) and press the big Play button in the toolbar!



If everything was done correctly, then you should see a menu on a black background. However, there is a problem: the cursor turns out to be invisible. Ok, in the toolbar, click Stop (or just Esc on the keyboard).

This is easy to fix. Go back to the Main Menu - Level Blueprint tab Main Menu - Level Blueprint .
From the Get Player Controller node, we pull out the connector and create a new Set Show Mouse Cursor node.

Tick ​​the Show Mouse Cursor parameter (dark red of the pin is Boolean ; setting the tick equals setting the value to true , unchecking the tick is false ). We connect the node between BeginPlay and Create Main Menu Widget and move the nodes so that they do not get confused.



Hint: Mouse wheel can change the zoom of blueprint.

Press Compile again and return to the main tab. Click Play .
This time the cursor should be visible, and the buttons should be pressed (albeit without result).

Creating button handlers

We return to the tab of our MainMenu widget. If you have closed or lost it - you can always open it again by double-clicking on the necessary asset in the Content Browser panel.

Since the article turns out to be long, in this part we will make only the buttons “ ” and “ ”. And the other buttons, for now, turn off.

Select the " " button (it is more convenient to do this in the Hierarchy panel to select the button itself, rather than the text element) and on the right in the Details panel we find the Is Enabled option. In order not to dig into a bunch of parameters, you can always use the search bar at the top just enter " enabled ". Uncheck it.
We do the same with the " " button.

In the editor, nothing will change outwardly, but if you start the game again, the buttons will be gray and inactive.

Hint: elements of the widget can be renamed, so as not to be confused in several of the same name Button 'ah. To do this, in the Hierarchy panel, select the desired item and click on it once, or select Rename in the context menu. I renamed the buttons to ButtonContinue , ButtonStart , ButtonOptions and ButtonExit respectively.

Select ButtonStart and scroll the Details panel down to the Events section. There will be some green buttons.



Click the OnClicked button and get into the blueprint of our widget with the newly created On Clicked (ButtonStart) event On Clicked (ButtonStart) . Create an Open Level node, connect it to the event, and specify the " FirstPersonExampleMap " parameter in the Level Name (the name of the default level can be viewed in the Content Browser ).

It would seem that everything ... but not quite. If you remember, earlier we switched the input mode to UI Only . Now we need to do the opposite - switch to Game Only .

To do this, from the event node pull out the connector and create the Set Input Mode Game Only node. At the same time, the Open Level node will automatically reconnect to the new node; you will only need to align them. Well, let's not forget that you need to specify the Target parameter in the new node - connect the Get Player Controller node there.



Click Compile and Save , launch, click " " ... Hooray, we are in the game!

Creating a ButtonExit handler ButtonExit left for homework - it is even simpler: you just need to use the Quit Game node with the default parameters. To return from the blueprint of the widget to return to the UI editor, you can use the switch at the top right.



That's all for today!