Friday, January 23, 2015

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

Alright guys. After a very long hiatus, IDKUDK has returned with our UMG tutorial series UE4.6 has been released (and 4.7 is pending), so here's the newest iteration of how to build a basic menu using UMG. Epic has added new features to UMG, including the ability to use 3D menus, but that will have to wait for a later tutorial.

This tutorial picks up where we left off in the last UMG tutorial.

Before you begin, make sure to follow our tutorial on adding in Rama's VictoryPlugin because we will be utilizing some of these Blueprint nodes.

1. Make sure that you have your UMG blueprint menu open and click on the "Play" button (make sure to click the button, and not the text). On your right, in the details panel, navigate to "Events" and click the button that reads "Add OnClicked" or "View OnClicked" if you've previously assigned an event to the button. 

Make sure you click each button and add an "Onclicked" event for each of the buttons. Once each of your buttons have an "OnClicked" added, either click the button that reads "View Onclicked" or click the "Graph" button at the top right hand side of the Blueprint window to take you to the Blueprint Event Graph.

2. Drag a wire from the OnClicked Play_Button node and use the context menu to create a Remove from Parent node (before this used to be Remove from Viewport, but that node has been replaced in this version of UE4). Now drag a wire from the Remove from Parent node and use the context menu to create an "Open Level" node. In the box under "level name," type in the name of the level you wish to open using your menu.

(Note: If your Menu is set to show up on the same "map" as your first level, omit the "Open Level" node because this will just result in your menu opening over and over again)

3. Both the "Settings" and "High Scores" menus will involve the same sets of nodes, so either perform this step twice or use CTRL+C and then CTRL+V to copy and paste the nodes. Drag a wire from the "Onclicked High Scores" node and create a "Remove From Parent" node. Drag a wire from this node and use the context menu to make a "Get All Widgets of Class" node (don't worry about filling in the drop down boxes yet). Uncheck the boolean option for "Top Level Only." Drag a wire from this node and use the context menu to create an "Add to Viewport" node. Also connect the blue "Found Widgets" output from the "Get All Widgets of Class" node to the "Target" input node.

(NOTE: if the "Get All Widgets of Class" node does not appear in your context menu, make sure you correctly installed Rama's VictoryPlugin)

4. Finally, for the "Onclicked Quit_Button) Event, simply drag off a wire and use the context menu to create a "Quit Game" node.

5. Now that we have the logic set up for the main menu, we need to go back and create menus to link to the Settings and High Scores buttons. Close this Blueprint and right click on an empty space within the Content Browser and use the pop-up menu to create a new Widget Blueprint. This Blueprint will serve as your High Scores menu, so use your naming convention to name it accordingly.

Repeat this step to create your "Settings" menu (and any other buttons you may have created). We will set up these menus in the next tutorial.

6. Open your original Menu Blueprint from steps 1-4 and navigate to the graph. Find the "Create Widget" nodes connected to the Settings and High Scores and use the drop down boxes to set the corresponding widget type that you made in step 5.

And that's all for the basic structure of the menu. We still need to go through one more step to get everything working correctly, so check that out in Part 3 of this tutorial.

No comments:

Post a Comment