How To Create UMG UI in Unreal Engine - Common UI Pause Menu

this is another Unreal Engine tutorial this is the third part of my Unreal Engine umg UI Series in this video we're going to learn how to install the common UI plugin and use it to build a simple pause menu so here's my current setup when I hit play and I hit the P button I have set up a pause menu system so you can see the there's a slight transition when you when it pops up on the screen and like the traditional one where it's very upload when it goes options it's a stackable option here I could go back and then transition from there and I hit grid and it would just quit the new so we're gonna learn how to build that using common UI let's go so first off go under the plugins and search for common UI and activate that and then restart the editor once you started um create some folder here for your structure I already created mine so under the UI folder here I'm just gonna right click and select uh widget blueprint and I'm going to search for common user widget select that give it a name I'm gonna call it base open that up and search for the canvas panel drag that like so and then search for common activatable widget stack that's what we want just going to quickly anchor that like so then put it in the middle cool save and let me dock that and then we're going to create a couple of functions here so go under the graph and hit on function so first we're gonna create a function called push widget we're gonna reference that common activatable widget variable and we're gonna say push widget so we'll grab that function hook that like that and we're gonna parametize this function so drag this activator widget section here and drop it to the function like so to create a parameter cool save that next [Music] um another function this time I'm going to call it remove widget I'm gonna do something similar get that and then this time search for remove widget and hook my lap pad and do the same thing parametize that function cool so that's all we need to do here um go back to the content drawer let's create the menu the user interface so right click select user interface the widget blueprint and this time select for common activatable widget so this time I'm going to create one and name it boss menu and I'll quickly create one so just here search for the canvas panel and then we're gonna search for the vertical box and quickly accurate in the middle I'm going to reset this guy's set this to 600 by 500. and put that in the middle like so next we're going to search for Dex and drag it like that and probably 35 and change it to the D call and then search for a buttons so we need those buttons and just drag like that change the background color so you could select a color here drag it like so like that to remember the color later next search for it drag it like so for the button here I'm just gonna quickly name this to resume and the text I'm gonna change it to resume and also add some padding so I'm gonna put a padding of 50. I'm just going to select that button duplicate it a couple of times so the second button it's going to be called options and the text under it is called options and then last button is quit and the bottom under it is the text is also called quit it will also add a blur so drag a blur and then just anchor that all the way to the side reset that and I think if I put the offset to zero and the zero it would um cover the entire area and change the Z order to -1 and for the blur strength change that to probably 0.15 and that should be good enough so go back to the content drawer here and we're just going to quickly duplicate this and this one is going to be called options menu and then just swap out some information here so options we're gonna We're Not Gonna implement the functionality here I'm just gonna put some placeholder text so here I'm just gonna put a text block here or put a padding of maybe then this is gonna be sound and then I'm just gonna duplicate that and this is music and we also need a button so for the button just drag it like that on top up here so it's not covering the entire canvas just gonna reset those there change this to 200 by 50 and add some text text also I'm going to change that button color to here and the text I'm just gonna copy back cool so we haven't wired any functionality yet but let's first hook up the um the let's first hook up the widget to the viewport so go under the third person here open the blue prints folder and then the BP third person character so search for the event begin play so we want to hook up at the end of this so I'm just going to create a custom function a custom event and say add widget from here I'm gonna drag and say create widget for that node and for here I'm just select WB base which the one we just created and add to viewport that and and here add widget call that custom event cool and next we're going to bind some keys so first right click and search for keyboard P so I'm using the P keyboard here and then I'm gonna actually need to create a reference here so I'm just gonna quickly disconnect that create a reference here which I think I already have graded here so I'm just gonna delete that and redo that again so promote our variable I'm going to call this widget reference like so hook that up like that and drag that in here so I could use it and from here I'm going to say push widget and unpress push that the one that we want is the plus menu so let's quickly test this out and hit play and hit P all right so the pause menu is working but the background is not proper so if I go back to my plus menu here uh the background blur instead of 15 it should be 50.15 should be 15 and probably do the same here on the options menu so hit that and I'm gonna hit play now and hit P yeah now I get the background View background blur um now the functionality are not wired yet so let's do that so first let's go back to third person character so because we want to set the input mode so search for input mode to UI only and get the player controller so and hook that up to that so right now it's a little bit of crap in here I'm just going to move that comment and say pause I'm also going to put a comment here add widget cool save now let's wire them up so first on the plus menu here go under the graph and we want to initialize so on init event initialized we want to get the player character and we want to get the test to be to the third person BP third person character and then we want to get the widget reference so get widget reference and we want to promote this as a variable so hook that up like that and hook it up like so and the rest here we don't need so you can delete that so for the resume button here click on on click and want to get that reference to this one so on resume we want to remove the current widget so here say remove widget and we want a reference to self so we want to remove this current widget to pause menu save and then on the options menu click on on click there get reference to that widget again and this time you want to push widget hook that up like so and for the activatable widget class select the options window this time save and then for the quit button just we don't even need the reference we just say quit game shoot it save now jumping back to the options menu we implemented this back button so we need to kind of do the same but we need a reference to that same widget so on init here go up get the player controller player character cast to BP third person hook it up like so get the widget reference and promote that as a requireable and hook that like that and we don't need any of these you just need this drag it up a little and basically you want to say get that and remove widget which is itself and write it up like that compile save replay and then hit the pause menu it's blurred resume and back and I don't have control of the mouse so go back to the post menu there and went on resume get back to search for input mode and search for a gaming UI and get the player controller and hook it up like that and save let's try it again so play hit the pause button and assume back to the game plus button options I'm thinking here back but I don't see that pause button back there so let's see what's wrong let's put it in the middle uh so I'm just going to Anchor it here and play again so pause options I get this options hit back and back and hit quit and out of the game so there you go how to use the common UI to build a pause menu hope you like this video thumbs up thumbs down please subscribe to the channel cheers bye for now

Channel: Just Another Dang How To Channel

Views: 1,981

Keywords:

Id: 4Z0fKE-HaA0

Length: 14min 5sec (845 seconds)

Published: Wed Aug 16 2023