Labels

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 2


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.

This is the second and final part of my tutorial on how to create a menu in Unreal Engine using UMG. Here we will cover how to hook up blueprint functions to the menu buttons you created in Part 1 to make them work.


1. In your level blueprint, add an "Event Begin Play" node to your graph. Drag a wire from that and use the context menu to "Create Widget." Under the "Widget Type" drop-down box in that node, select the widget blueprint you created earlier. (Note: If you already have certain events set to happen immediately on "Event Play," [e.g., enemies spawning] you may want to create a brand new, empty level to serve as your initial level and then set the "Play" button to open your regular game level to keep your game from running in the background behind your menu)

2. In the "Create Widget" node, drag a wire from the "Return Value" pin and in the context menu choose the "Add to Viewport" node. This node has a few checkboxes in it for how your want your menu to work and what size you'd like it to be, so check the ones that fit your needs.


3. At this point, when you hit "play" in the UE4 editor, it will bring up your menu instead of your game. (I tweaked some of the display settings on the menu since making Part 1 of the tutorial, so mine may look a bit different than yours)

4. Now it's time to start binding actions to the buttons. Open up your menu widget blueprint. Click on the button to which you want to assign the "quit" action, and on the right side in the Details tab, under "Events" open the dropdown menu and click "Add New Event" (if you have previously created a binding already, it will instead read "Create Binding"). This will take you to the graph page of the blueprint.

5. In the My Blueprint tab, you should notice that there is already a function created. If you like, you can rename this to "Quit." Now, on the graph, drag a wire from your new "Quit" function entry node and use the context menu to create a "Quit Game" node. You don't have to assign a player, it will default to the current user. Now drag a wire from the "Quit Game" node to the "Return Node." Compile and save, and you now have a working "Quit" button.

6. Click the "Designer" tab at the top to go back to the Design page of your menu widget blueprint. Just like we did in Step 4 with the "Quit" button, click on the button to which you want to assign the "Play" action, and on the right side in the Details tab, under "Events" open the dropdown menu and click "Create Binding"

Your next move will depend on how you have your game set up: If you opted to create a new blank level in the above Step 1 (check the note), then go to letter (a); If not, then go to (b).

(a) Again, like in step 5, rename your new function to "Play," if you'd like. Over in the Blueprint graph, drag a wire from the "Play" function entry node and use the context menu to add a "Remove from Viewport" node; this will hide the Menu widget when you open your new level. Drag a wire from the "Remove from Viewport" node and use the context menu to add an "Open Level" node. In the "Level Name" text box, type in your game level name (the one where stuff happens, not the blank one). Now connect the "Open Level" node to the "Return" node.

(b) Again, like in step 5, rename your new function to "Play," if you'd like. Over in the Blueprint graph, drag a wire from the "Play" function entry node and use the context menu to add a "Remove from Viewport" node. Connect the "Remove from Viewport" node to the "Return" node.

And that's your menu. Right now I have a Settings and High Score screen created, but I don't have them set up to actually do anything yet. If you'd like to make those, just create a new widget, and bind your menu button to open up that widget. If you'd like to set up Resolution Settings, or if any of the steps didn't quite make sense, most of the steps above followed the Unreal Engine Twitch broadcast on UMG, so you should be able to find your answers in that video.

No comments:

Post a Comment