Saturday, August 23, 2014

[Unreal Engine version 4.4 only] How to Create a Menu in Unreal Engine 4 using Unreal Motion Graphics (UMG) - Part 1

There are several options (both free and paid) that you can use to create menus for your game in UE4. The latest menu tool that Epic has been creating is called Unreal Motion Graphics or UMG. Right now this is an experimental tool and they are still adding features to it , but it's been developed enough to start using in your projects. This is Part 1 of a tutorial on how to use UMG to add a menu to your game.

Note: Since the update to Unreal Engine 4.5 this tutorial is out of date. If you are using Unreal engine 4.4, then this is the correct tutorial for you. Otherwise, please go here to my updated tutorial.

First you're going to make your menu background. Open your project and begin by creating a new "Slate Brush." Do this by either clicking the "New" button or right clicking in a blank area in your content browser and navigating to New > User Interface > Slate Brush. 

Set the name for your new slate brush and double-click it to open it. Choose a texture file to set as your background (make sure to import your texture first) and save your brush.

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

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

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," set the brush you created earlier.

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)

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 little white box is in the center of the big gray box). This will ensure that your menu will stay in the appropriate place if you change your window size.

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). Next drag a "Text Block" into each of your buttons. 

Name each of your buttons by clicking on the text block in the graph and renaming them in the Details tab under "Text."

That's it for the basic setup. In Part 2 of the tutorial 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.

No comments:

Post a Comment