Common UI pause menu : an empty Unreal Engine 5.2 blueprint only project overview

hi everyone in this video I'll go over a project that I've set up to understand common UI better and it's a blueprint only project and started from an empty unreal project in this project I've set up common UI so it has a HUD and then when you press Escape you have this pause menu it pauses the game and you can use all this input to go back to continue to quit and as soon as you start using your Gamepad it switches to accordingly so you can use the focus you can use the B button for the back Handler and it'll go back to the game and you will have input for your game again I'll do an overview of the project and how to get it so that you can start exploring and see how I've I've set this one up and I pretty much just followed unreal's documentation for common UI quick setup and also Lessons Learned From Lyra and how they handle the HUD and the stack of activatable widgets so yeah I will just quit this so this project is very small because it started with a fully empty project so there's no starter content or anything okay so what you'll want to do is you can click on the GitHub link that I've provided in the description and then you can get this project by just clicking the code button and then you can either download it as a zip folder and extract those files or you can download GitHub desktop and then you can just clone this repo so that you could always updated or actually if you want to make changes to it you could always Fork this repository so you'd have your own version yeah so just get the project and then just open up the new project just to make sure I capture the current state of the documentation I am just going to put my project in the documentation side by side and we'll go through every section so this is just the First Time walkthrough through common ui's cooler features um yeah so the first step we're going to do is just set up the viewport to support input routing so from what I understand this just means that this input routing will take care of whenever you're Using a Gamepad or a keyboard or at least in this project since I don't have support to switch and all that so yeah let's go ahead and go to edit project settings and then under engine general settings okay so right here so you'll see that the game viewport client class that I've set is the common game viewport client okay and here it says you could always you can always modify it yourself that would be definitely in C plus okay so now we have our game viewport client set up okay so the next step is to create an input action data table so I'm just going to find my data table for that and you'll see I am using a different name um or I don't think they actually specify in here um so for all the assets I've created I've made sure to name them the same as Lara or without the Lyra name um just so you can like match it up and compare and see how how it's different sort of similar to Lara so mine is is just called the universal actions and I've placed it under all content UI okay so uh the only row we have in this uh data table is just a default forward and the default back so this just defines uh the default forward and back actions for your UI input handling so the default back I set it to the GamePad face button right um and the Escape key and then the default forward uh it just has none for the key uh I think that's because the click is already handled in but I have to double check if someone knows the answer please comment in this video okay this one is the GamePad face button button that is a hard thing to say so the other part of the documentation mentions that you can also have input overrides so in the case of the switch the Nintendo switch if you want to override the yes option or the default forward option you would you would pretty much set it in this uh right here so I don't have the option for the switch because I don't have the switch as a platform okay um yeah so these UI widget map these abstract actions their actual inputs and we'll use it in our next step which is getting the default navigation action setup so in this one we just need a common UI input data file so I don't think I've made any changes that that's what it was okay I'm just going to close this and so the next step is just the common input data uh so this asset this is where you actually set or you use the data table you just created uh just to set the default click action and the default back action okay let's scroll down next is the controller data bindings and those ones I migrated from Lyra because there's a lot of assets uh pretty much the graphic representation of your keys and what corresponds to what um so that one is in the content and then UI and I think it's Foundation platform input and then those are all the ones I I got from Lyra so as an example the Xbox one if you open that one it has all the information for the brush data map so this is what your UL will pull when it knows it's let's say uh it's it's us I'll try to find the UI we are actually going to use so yeah the a button maps to this and it maps to the input and then to compare the keyboard and mouse okay keyboard and mouse it has like the mouse axes the special button and then for the mouse you don't need too much Graphics because a lot of time the buttons you can click on it to confirm okay so those are those are the assets you can use and let's say you had the switch or you were supporting the switch also that you'd have the graphics in here to set as the switch controller or even if you had the joy-cons Okay so we have the graphics for controller data next uh we can also Define common styles for our widgets so that our buttons always look have the same style the text has the same style the same font yeah in this one I think I put them in yeah in Foundation text so I'm using Roboto or Roboto size 24 so this this is style I could use in any like text field for the widgets and I think I have a few buttons Styles yeah yeah so a clear style and a primary Style so what uh the clear style it pretty much gets rid of uh the default button that like unreal has so it's clear and you can set it all through the the widget itself that represents your button okay so this is what this all goes on and there's also a section where you can set your default styles so that is inside your project settings plugins okay and then it's in common UI editor so those are the basic templates I get if I don't set anything um yeah there's a few there's a few other project settings you can you can navigate to there's a default material for when um when something is loading or when they have a common load guard widget that Lara uses and this is also from Lyra the throbber base um yeah I think this one Lara uses to set the input so that the Escape Action always has Focus I had to do a little differently in this project because we don't I wanted to keep it blueprint only and a lot of the input action router stuff is not exposed to blueprints oh yeah so that's what I went through so the default throbber uh or you can have like a placeholder for us it's that have not been yet loaded so that again is here I didn't set anything here but you could set um it's just a texture so a texture that's also not heavy so it doesn't have to load as well um yeah so that's that's all the quick start covers another thing I didn't cover is that your common input data the blueprint we created we put it inside the game common input settings okay and uh this is this is how your default input is chosen so on Windows the default input type is mouse and keyboard if you wanted to default to Gamepad then you can choose that here if you want to not support the mouse keyboard you can uncheck this or if you don't want to support gamepl Ines you can swap out or you can use your start using your Gamepad or just your keyboard and mouse and this is where we link all the controller data that has all the textures and they're Associated action and another thing I checked on is allow autofocus device input Lara had it on and it seems to help with Focus issues okay so I will maximize my project and I don't need the project settings anymore I'm just going to explain how I I set up the inputs and our HUD so it all starts with the player controller um yeah I this would be nice to use the at enhanced input system but since I wanted to just focus on common UI I just made the easiest or simplest setup I could possibly do which is just listening for the Escape key or the GamePad special right um yeah oh yeah okay so let's start at the beginning so whenever your player controller is spawned it creates your UI layout widget yeah let's just navigate to that one I'm just going to open it up so this is your overall UI layout and it's a common user widget and it essentially holds all the stacks of of your UI of activatable widget Stacks so actable activatable Widgets or widgets that you can activate or deactivate um so instead of collapsing them um it's just a nicer way of dealing with widgets so I just Lara has four different Stacks I just kept the two the game layer stack and the game video stack so the game layer is where I decided to put my HUD and then the game menu stack is where I decided to add the the pause menu and the lower on the stack sorry the lower in the hierarchy of the overlay this is um the higher it'll be so if I put my menu uh below the game or on top of the game layer stack then it would it would go behind the HUD um yeah and pretty much the only logic I added to it is logic that's in C plus in Lara so on the uh whenever this is initialized so whenever this is created by the player controller it just registers it registers these two layers uh to this layer map which is yeah so it's essentially going to be uh this UI layer game has this widget and this tag has that widget so that if you um if you call Push widget to layer stack it will push the widget to the right layer so let's say you have a modal that says are you sure okay or not then you would know to push that to the modal stack so it's at it's at the right Z order or it Stacks correctly okay so these layers are registered and then it adds this to the viewport and it sets it as this variable called root layout and then it pushes the HUD to the layer game okay and then if you press Escape or Gamepad spatial special right then it pushes the pause menu to the game menu so then that widget would be on this stack okay so let's go over this oh I left some unhooked nodes I will change that okay I'll make sure to push that before sharing live coding our life life blueprinting so our HUD layout class I will just open that one so yeah our HUD I essentially just put a overlay with the color and it has a canvas panel you could have like Health hearts or reticle all that but I just kept it really simple just to show that it exists and it's stacked correctly so there's not much to our HUD in this project uh but yeah let's let's get back to this here so whenever this push this pause menu is pushed to the layer stack we oh let me undo some of that I still need myself um okay okay so yeah when you push your widget to the layer stack so we want this the input mode to be game Nui at that point and then we pause the game so let's navigate to the pause menu okay so this is the pause menu it uses some common buttons and I'll go over those two um and it essentially just um binds on click to an action and to see these events I had to make sure that these Widgets or the menu button were variables so that we can then set up some events so whenever this is clicked we deactivate this widget and whenever the quit button is clicked we just click the game so on this widget being deactivated first we'll make sure that the player controller is valid so let's say you quit the game the player control will not be valid anymore and then we just set the game to the input mode to game only and we hide the cursor and we unpause the game next I want to go over how the menu buttons work and how the a the a or the b or whatever key how it shows up and and then after that I'll go over the bottom action bar and how that works um yeah so this these buttons are a widget so click click on that and then you'll be directed to the menu button this is very similar to what Lara has the most important part of this for it to work is to have the input action widget which is also a blueprint I've created it's its parent is common action widget and yeah so what this does is it will take whatever action is bound to it and it will get uh the icon for it so the input action is default forward which is the um the face down button and another thing I noticed is that if you call it exactly input action widget it will handle the selection correctly so when you scroll up and down when you're with your gamepad so scroll up and down it will make sure that the action widget is only visible on the currently selected button you'll notice sometimes that it feels like your the input is stuck to the viewport so what you want to do is either you just click on the quit game or you can always do shift F1 and so that's what they say up there click for Mouse control or shift F1 for mouse cursor just so you can see your cursor this button it has a a few a few overridden functions so on click I'd play an animation very simple animation same with unselected this again you can also see the example in Lyra um yeah so actually those animations I can show where they are in your designer tab you can navigate to I'll close it because I already have it open so yeah it'll be at the bottom of your window it's just animations and then you have the animation for uncovered so if I press I can see what that looks like so very simple animation nothing fancy like Lara has and then on press it just gets darker okay so that's pretty much it for the menu button on event construct I set the text which is just the button text so the continue button has that text here quick button has that text so it doesn't show up right here but it does when you play or when the UI gets constructed okay and then the next thing we have in the pause menu is the bottom action bar so that one is also a widget and it's based on just the common user widget but it uses this common bound action bar yeah which in turn uses the bound action button Okay so so this is the uh this is the blueprint for what your back action would look like or if you had any other bound action button that's what it would look like this one also has a few animations uh they're pretty much the same ones that the other one I had but you can get really fancy with your animations and you have full control of what you want your buttons to look like and then you can use them everywhere okay so your bound action is pairing classes bound action button and again we are using the input action widget and just make sure that's the same name and this has this uh class has some logic to show or hide this input action widget based on if you have the GamePad on or off and if you navigate back to your pause menu so the magic happens in the uh just make sure you have the pause menu selected and then in the back category if you have isback Handler sorry turned on that just means that you can use the bound back input so Escape or the face right button to deactivate this widget and go back to the previous Focus and another part is that you can check on if the back action is displayed at the action bar so this what it will do is that if you have a action bar and we do it will populate it with the action for back so yeah this common UI handles a lot of stuff um and it's great that epic is adding documentation and even just today looking at the documentation I saw that it was already updated um yeah so I I hope this project helps you as much as it did for me to make to help me understand how common UI Works how to set it up um you could definitely migrate these widgets and pretty much anything in this project to your own project and then all you'd have to do is just make sure that you have the same project settings for the common UI setup that I have in the start of this video so yeah you can you can also use this project um add to it I think a maybe in the future I'll I'll try to go over setting up a settings screen with that tabable widgets like Lara has um yeah it's it's been nice creating something from a clean project but it's also always great to to look at Lyra's reference um it's its own common UI classes uh or their classes that were derived from common UI have a lot of helpful uh things so one thing that's the the biggest thing that's a difference in this project that I couldn't Implement in Blueprint is or had to do it another way is how we set the game input so Lyra's activatable widgets um they have an enum for setting what the focus should be so game get UI UI only all right I forget exactly what the enum is um but the only thing that's exposed to the blueprint is um the button itself it overrides that Focus in our class defaults yeah inner class defaults in the input section in the advanced section you can see their input mode override and it sets it to menu so that the input is only received by the UI but then there's nowhere else that we can set this back to the game in a blueprint only project uh which is is too bad so in this case this is why we weren't using the uh a common ui's input mode but we are still using or just making sure our player controller has the right input so that's definitely something that is great about Lyra's activatable widgets so yeah there you have it an overall explanation of how this project works and how it's set up um I hope you find Value in just digging in and seeing how things are set up and improving it and yeah I'm I'm finding that coming UI solves a lot of focus issues it's definitely amazing to have that support for the input routing so the the GamePad input updating the UI and the UI knowing which key to show it's incredibly useful it's great that it's starting to get more documentation so yeah I I hope this video was helpful for you um I first thought about showing it from uh scratch with nothing like starting from an empty project uh but it definitely had a lot of steps to it so um if that's something that viewers want that I I could eventually do um but I for myself anyways I I always find it useful and I learn better if I'm just digging around trying things out and it's always great to have examples so yeah thanks for watching

Channel: NanceDevDiaries

Views: 9,262

Keywords: UE5, Unreal engine 5.2, Tutorial, Example project, CommonUI, Blueprint only, UE5.2

Id: CHCdBAiiIa4

Length: 29min 23sec (1763 seconds)

Published: Tue May 16 2023