How to Create a Menu in Unreal Engine 4.5 using Unreal Motion Graphics (UMG) - Part 1

Unreal has changed up how the Unreal Motion Graphics tool works between release 4.4, when it was experimental, and 4.5 for the official release. If you updated your old project to 4.5 and you had a menu in place from 4.4, you probably found that certain menu items may have been removed and that your key bindings no longer work.

This updated tutorial set will cover how to create a UMG menu so that works in Unreal Engine 4.5.

(Note: If your menu still looks fine, but does not function correctly, skip over to my post on how to update your UMG 4.4 Menu to 4.5)



1. First you're going to import your menu background. Before, in 4.4, you had to do this by creating a new "Slate Brush," but now you can simply import a regular image file (or use an existing texture) to use as your menu background. 

(Note: If you don't want a background for your menu, skip this step) 

2. Now create a new "Widget Blueprint" by navigating to New > User Interface > Widget Blueprint

3. Name your widget blueprint and double-click it to open it. Delete the "Canvas Panel" out of the "Hierarchy" tab. 

(Note: Skip this step if you skipped step 1)

4. Now, under the Palette tab, drag a "Border" into the graph. Left-click the border under the Hierarchy tab to select it. In the Details tab, under "Appearance," click the arrow to expand the options next to "Brush" and set the texture you want to use as your background.

(Note: Again, skip this step if you skipped steps 1 and 3)

5. Now under the "Panel" heading in the Palette tab, drag a "Canvas Panel" onto your graph. (You won't be able to see a difference in the graph on your viewport when you add this, but it will show up in your Hierarchy tab)

6. Next drag a "Vertical Box" into your graph. Re-size and position it to your liking. (This is going to hold your buttons and line them up vertically).

Under the Details panel select "Anchors" and choose the one that fits where you plan to have your menu (so if you want it to be centered, choose the one where the light gray box is in the center of the dark gray box). This will ensure that your menu will stay in the appropriate place if you change your window size. 

A white flower icon should appear in the middle of your graph (or at the point where you set the anchor) to show you that you've set your anchor point.

7. Now that you have a box to house your buttons, drag some buttons from the palette into it (I made four in the example, but use as many buttons as you want options). You can manually set the size for your buttons by clicking on each of them and navigating to Style>Normal>Image in the details panel adjusting their X and Y values.

Alternatively, you can click each and set them to fill the space in the vertical box by navigating to Layout> Padding and selecting "Fill." (If you choose this option, make sure to add all of your buttons first because it's hard to squeeze in extra buttons when there is one filling the space already.)

8. Next drag a "Text Block" into each of your buttons. In the Details Tab, find the "Content" heading and type in the name of each of your buttons in the "Text" field.

Your font is likely small compared to your buttons, so under Appearance> Font increase the value for "Size" until it fills your button to your liking.

That's it for the basic setup. In Part 2 of the tutorial (coming soon) we'll go over what you need to do in UE4 Blueprints to make the menu show up when you start up the game and how to connect the buttons to different functions.