Unreal Motion Graphics is a visual UI creation tool which can be used to create UI elements such as in-game ads in edits at all widgets or other interface related graphics at the core of you, imgur widgets. These are premade functions that can be used to construct interfaces fast and include things like buttons, checkboxes and sliders. These widgets can be edited in a specialized widget blueprint, which is made up of two main components. The design at all, which lets you create and alter the visual layout of the widgets contents and the blueprint graph tool, which lets you bind logic to those widgets, such as changing the color of a button when the user presses it to create a new UMG widget blueprint. Right click in the content browser select user interface and Select Widget Blueprint and choose the user widget class as the base. Then give it a name such as BP, underscore, UI underscore, demo. Now double click this widget blueprint to open it in the widget loop an editor by default. This opens up the design at all. You can use these buttons on the right of your editor to toggle between this and the blueprint graph. By default, the designer to have this layout which places the palette over here on the left. This window contains the list of widgets that you can drag into the visual designer window or widget hierarchy to include in your interface. In this palette, search for canvas panel and drag this into the visual designer graph will set the screen size displayed to be the 27 inch monitor as that is what we're using to demo this then we'll bring our entire canvas into view by pressing the zoom to fit button. This canvas allows other widgets to be laid out anywhere within it, with anchors Z Orderings and custom layouts. As well as enabling these widgets to have their own nested widget. To demonstrate this search for vertical box in the palette window and drag it into the canvas, then with this vertical box selected press the anchors dropdown in the Details panel. This contains a set of commonly used anchor presets allowing you to anchor you widget to a specific part of its parent widget. In our case, the canvas if we select the center anchor, you can see that the anchor gizmo has moved to show us our anchors new location. If we reset our position to the center, you can see that our vertical box is slightly offset from the center. This is because our widgets alignment is pivoted at 00, which can be interpreted as the bottom right. These values should be set between 00 and 11 which would be interpreted as the top left as we want our vertical box to be centered at the origin. We'll set this alignment to point five and point five. Let's add some buttons to this vertical box by searching for a button in the pallet window and dragging two of these onto the vertical box widget in the hierarchy. As you can see, we have a slight problem here. Our buttons are exceeding the bounds of our vertical box. We can fix this in one of two ways. We either change our button sizes to fill the space given to them by that parent widget. In our case, as being the vertical box or we can set our vertical box to resize itself to its contents, which will let the size of our buttons dictate the total size of the vertical box. In our case, we use the former sending our button sizes to fill the space assigned to them by our vertical box. We'll also resize our vertical box to 400 in the X and 400 in the way. This way we can clearly see what's going on. Will then set both of our buttons to have five pixels of padding in all directions. This way they're not directly touching each other or the borders of the vertical box. We could also change our buttons colors and define how they react to their interactions by altering their style. In the details panel, we'll set the top button to have a red background and the bottom of have a blue background. Let's also give our buttons more representative variable names such as Button, Underscore, Top and button underscore button. Now we'll switch over to our widget blueprints event growth. As you can see, this tool looks a lot like the regular blueprint graphs with our widgets variables such as our buttons being displayed in the variable section. Notice how our canvas and vertical box aren't being displayed in. If you want to change that, we would enable the variable checkboxes by the variable name in the details panel of the designer door. If we select our top button variable, we can see some useful override all events such as Uncollectable on hovered. Let's pass the Green Plus button next to the Onclick event. This is created Onclick event node, which will get called when the press is this button. Let's get a reference to our top button variable by dragging it into the blueprint graph will then drag off it and search for background. Color will cache this color in the local linear color variable which will name button top background color cache and we'll do this as soon as our widget is constructed. Then in our Onclick event, we'll set the color of our top button to be green. And what are the two second delay node and then reset its color to be the one and our cash for demonstration. When I use the third person template character blueprint to spawn and kill this widget in our blueprint graph will add an event node that will get triggered when our player pressed the one key on the keyboard, then drag off this node and set for the create widget node. Then Under-class will select our custom UI demo widget blueprint will also add a private variable named UMG underscore demo underscore widget cache and said its type to be that of our demo widget. Well, then set the value of this variable to be the demo widget we just created. Next, we need to add an add to viewport node which will add our widget to our game's viewport. Filling up the entire screen by default if we wanted this only fill up some of our viewport, we would explicitly need to set the size what you want us to have. Now, if we press play our level editor and then press one, we can see that our UI has been created. However, you'll notice that we can't currently interact with it. This is because we need to set our players input mode to game and UI passing in our place. Controller is a parameter and finally, as we want our mouse to be visible, we need to set the mouse cursor variable to true again passing in our player controller as a parameter. Now if you press play, hit the one key and press the top button, you can see that it changes to green for 3 seconds before going back to its cache red color. Let's now bind the event of the user pressing the two key to remove our widget from the viewport. Now if we press the play button and then press the one key, you can see our UI shows up. Then if we press the two key, it disappears. Another way to set this up would be through event binding, but that's out of the scope of this video. So far, we've barely scratched the surface of what you can do with UMG. Subscribe to be notified when we release our tutorial series on how to recreate the entire Overwatch two user interface, including transitions in effects using the system and all of its tools. Don't forget to like the video. We've been your game death panels. If you found this video useful, consider checking out our patrons. Tell somebody you love them and we'll see you in the next one.
