Common UI tutorial - easy gamepad UI in Unreal Engine 5

there is new ui system in unreal engine 5 it's called common ui and it got much better gamepad support so let me show you for example when i create ui widget i get automatic focus for my gamepad and i can navigate between buttons automatically with my gamepad stick or g-pad i create another widget and again i get autofocus and i can move between widgets automatically also with my keypad if i don't want to move between widgets i can deactivate one widget and now i am restricted only to one widget i can activate it back and move around also it works seamlessly with mouse and keyboard so i can shake my mouse and now i can deactivate or activate and again shake my gamepad stick and here we go so it all works automatically by default very cool now next thing we have in common ui is a layer routing system so i can create widget stacks and push widgets inside of them so this is first widget inside stack i push another widget on top of the stack and you can see only top most widget is visible on screen i push another widget on top of it again only topmost widget is visible on screen and now i can remove it from top and automatically i get previous widget in the stack remove this one i get very first widget in the stack so it's an easy way to create very deep hierarchies like menu hierarchicals in your project and it's very easy to do it's like one note to push widget in the stack and one note to remove widgets from the stack everything else is done automatically so i can push push push push and now i remove remove remove remove very very convenient another thing we have in common ui this new ui elements like this analog slider i can use it with my analog stick and my keyboard and my mouse and it works with everything by default automatically and there are a lot of new elements let me show you here they are so you just type in common in the search bar and you have this all these new ui widgets so let me show you how to uh set it up and and we will create these two features with automatic gamepad focus and navigation and we also will create this widget stack and i will show you how to push videos into it and how to remove widgets from the stack that's okay let's start first we need to enable common ui plugin so we go to edit plugins search for common [Music] and enable this common ui plugin and then restart unreal engine editor then we go to project settings to engine category and general settings and in this game viewport client class we select command game viewport client that way common ui will be first to get input from gamepad mouse and keyboard and also you'll need to restart unreal engine editor again after this one okay great now let's create common ui widget so we create blueprint and select all classes and search for common activatable here it is common activatable widget and select it let's call it ui my left widget open it up let's put it in the main window and you have this common activatable widget as parent class okay let's add canvas then we add border and vertical box and via text this is going to be our title and let's add two buttons to vertical box here it is let's rename it can press f2 button open another widget which and this button is close all widgets button close all widgets all right let's add text to them text okay this one's open another another widget and this one is close or widgets now now let's move border to uh middle of the screen set and course to middle reset position set size to content change brush color to black and give it a bit of transparency 0.5 okay also adjust alignment to be 0.5 and let's move it to here to left side of the screen position x minus 300 now also let's and change text to left widget left widget and increase size to 48 48 and and i guess let's add a little bit of padding to buttons select both buttons and let's add five to padding okay now let's create right widget we close this one duplicate it and call it my right widget my right widget open it up and let's move border to plus 300 just just 300 and and let's change title text to right widget right widget and let's change button to uh this is going to be button that deactivates another widget let's call it call it this way deactivate the activate another widget widget and this one gonna be activate another widget button activate another widget and let's change text on the buttons so this one they activate deactivate another widget another widget and activate another widget activate another image great compile and save now let's add them to viewport open our character i will do everything here but you can put it in like a player controller or game state anywhere really yeah just gonna do it here for convenience so let's create this widget on begin play and save them as variables begin play create widget let's select my left widget and save it as ui ui my left widget and let's create second one let's copy this and pass it it's going to be my right widget my right widget and save it into variable ui my write widget compile and save now let's add left widget to viewport when we press 1 on keyboard let's select keyboard 1 and let's drag left widget here and add to viewport and since this this is new uh type widget we need to activate it also to get focus we can drag from our widget and we get this activatable widget category and you can activate and do some other stuff let's just activate it for now and let's try it up compile save play and i'm pressing one here we go we have our widget on screen but right now i'm pushing my uh left stick on gamepad and nothing happens we don't have gamepad for us how do we get focus we have to tell widget where we want to focus gamepad by default to open up my left widget and go to graph and we have this functions category select override and select get desired focus target and as focus target is basically button or another element that's going to be focused first let's we can add any button we want so this button open another widget is this one button open another video this one we can do with any button or with any other element now we compile and save and let's try it again hit play i press 1 on keyboard and i try to use my gamepad and here we go i get automatic focus on new widget great now i forgot to do one thing let's go to our third person character and after we activate widget let's set ui mode to ui only and show mouse mouse cursor so we get player controller get player controller and set input mode ui only and also let's show mouse cursor player controller show mouse cursor to true this will allow us to have seamless switch between gamepad and mouse cursor so we can use mouse or gamepad at the same time whenever we wish let's just test it out for a moment compile save and play so i press 1 on keyboard and try my gamepad it's working and i try my mouse and here it is it works okay great now let's add interaction to buttons so we go to our widget to event graph and we select close all widgets button and on clicked it will it will deactivate this widget we're inside my left widget so this button will deactivate this feature and remove it from the viewport so let's deactivate widget and let's remove it from the viewport from parent right and also we need to uh change input mode to game only so we change it to ui only and let's change it back to game only we get player controller and set input mode to game only and we have to hide mouse cursor let's let's show mouse cursor to false okay so when we click button close we deactivate widget remove it from parent and set mode to a game only compile and save and let's test it i press 1 on keyboard and close it great press it again and now i'm trying my gamepad it works great so now let's put right widget on the screen we already created it here so let's put it on screen on this button press you should open my right widget so let's do it here okay let's select button open another widget add clicked event and then we get this variable from third person character so we get player character cast it to bp third person character cast to be third person character and now we have access to this variable my right widget so now we activate it and add it to report and we add it to viewport to viewport make sure they both are connected to my right widget one is activated widget and second one is add to viewport compile and save and let's test it we play i'm pressing one now i'm pressing this button and here we go we have our right widget let's try gamepad now when i'm moving gamepad stick around nothing happens i don't have focus so let's go to our right widget and add focus and we go to functions click on the right get desired focus target and just drag any button we want which one is stop deactivate another digit let's do this one so we drag activate another widget and connect it to here compile and save and let's test it out pressing one now i'm using my gamepad let's open another widget again and i have automatic focus on the widget and also i can move between widgets automatically with my gamepad stick very cool now let's close both widgets when we press close widget button so we go to my left widget and in here we will get my right widget again from our character and my right widget and convert it to validated get so if it exists we will close it if it does not exist we will ignore it so let's remove it from parent and deactivate ctrl c ctrl v and connect widget to node and here we go this is [Music] remove right widget compile and save hey this is message from future so i made a mistake so do not use validated get to check on that variable because it will fail if if a button another if that button wasn't clicked yet so it will fail so instead of that just use this is valid check connect it to third person character itself and then connect the activated widget directly to ui my my right widget here and it will work without any errors okay please continue and let's test it out so i open my first widget then i open another widget and then i close all widgets great now let's add interaction to my right widget buttons open it up move it to main screen so we have deactivate another widget and activate another widget okay we go to graph to event graph and then we then we click on button deactivate another widget and add event on clicked and from here first we will need to get left widget it's in my player character here it is and then we will have to deactivate it so let's get player character cast it to short person character first third person character and from here we get our left widget left and on this button click activated deactivated okay let's test it out play i'm pressing one and now i'm opening another widget with my gamepad and let's deactivate another widget but i still can move to it why that so we need to bind widget behavior to activation state so we can do it in my left widget in designer we click on the root element and in here we have activated visibility and deactivated visibility so when visual is deactivated we want it to be non-heat testable so we cannot select buttons in it with our input or with our mouse and on activated visibility we want it to be visible and interactable now come let's compile and save and let's test it out i'm pressing one let's let me use gamepad open another widget now i can move between widgets let's deactivate left widget and now i am restricted to write widget i cannot go to last widget when i'm pressing left with my stick or with my d-pad also let me try my mouse and mouse also cannot click on this deactivated widget now let's activate it with this button so we go to write widget and we select this activate another widget button and add event on clicked and again we get ui my left widget ui my left widget and convert it to radiating get connected to button and if it's valid then we will activate widget activate widget let's try it out compile and save hey another message from the future so ah same thing do not use validated get because it will cause an error instead use is valid check on third person character okay bye and play pressing one now i'm using gamepad open another widget move around deactivated widget i'm restricted to right widget only and now i activate another widget and now i can move between widgets again now it's already working let's just add a little bit of transparency to left widget when it's deactivated and make it fully visible when it's activated again so we go to my right widget now we drag from my left widget set color and opacity and change it to 0.5 okay and connect it so when we deactivate widget we also set its color to black and opacity to 0.5 let's test it out pressing 1 opening another widget the activating left widget and here we go but also it looks like we change color from default so let's see default color is white so let's keep it as white click on it set it as white okay and compile and save and test it out i'm pressing one open another widget activate here you go looks great and works all right so when we activate another widget we also need to change color and opacity to default state to make it fully visible so let's do that go to my right widget and and copy past this and connect it to my left widget and change opacity to 1. ok test it out now when we deactivate widget it's transparent when we activate it it's visible and let's try doing it with gamepad ah deactivate activate activate activate wonderful now let's save and let's look at it again go to full screen and i forgot something so how do i open this widget from my gamepad let's do this now so we go to third person character because when we press one on keyboard let's add a gamepad button here we right click and search for gamepad special left so this is uh back on my gamepad on on some game parts it's like select or something so it's a small button on the front of the gamepad uh so let's add this to here and now we can press either one on keyboard or special left on gamepad and we will get our widgets now i'm gonna use my gamepad and press this select button and here we go i have my widget and i can navigate it with gamepad and i create another widget and i can navigate between both widgets and if i deactivate left widget i'm restricted to moving only inside right widget and if i activate left featured again i can move freely and my mouse is also works same way so i can activate or deactivate very cool now let's save okay now let's use visual stack to create pause menu with several popups right click and create blueprint and search for activatable widget command activatable let's call it ui my stack container open it up and let's add canvas and let's add featured stack to it common activatable widget stack you can actually have several stacks at the same time so one stack for hud another stack for system menus another stack for like inventory and crafting windows and so on but i will use only one stack this tutorial so we will push menu widgets in this stack let's rename it to my stack my menu stack and compile and save and let's drag this into main window and we can close left widget and write widget okay so let's put this stack into the viewport we go to our character blueprint look for beginplay and let's add sequence sequence so first thing we did was create two widgets left and right and now we after that we will create our stack container let's do that create widget stack container ui mystic container and let's save it into variable promote the variable and let's call it ui my stack container and also from that container let's get my menu stack we get my menu stack and promote to variable like this compound safe now when we press 2 on keyboard will create a stack container let's say two keyboard and we get a stack container and add it to viewport and we activate it and also let's set input mode to ui only and show mouse cursor just ctrl c ctrl v okay compile and save now right now nothing will happen because it's empty so let's create pause menu to put into our widget stack right click blueprint class search for activatable deviatable widget command activatable video and select it we call it ui my pause menu open it up let's add canvas border and vertical box and now text is going to be our title let's change text to pause menu close menu and increase size to 48 now let's add buttons this is going to be resume button and this is going to be how to play button this is going to be settings button and this is going to be exit button so let's rename it button region and button how to play how how to play and button settings button settings and button exit next capitalized resume for consistency well it's not capital uh-huh i'm going to capitalize you one way or another all right that's how you capitalize uh button name okay let's put this menu in the center of the screen select border and set it to center reset position size to content change brush color to black and give some opacity 0.5 set alignment to 0.5 0.5 and let's add text to buttons text text text text this resume this is what is how to play [Music] this is settings and this is exit exit now let's compile and save and and let's wrap our buttons into another vertical box to make them smaller vertical box and move them into new sheets okay and now we can set vertical box to be centered great great so we have vertical box then we have our title and inside of it another vertical box with our buttons compile inside let's add a bit of padding to our buttons select them all and let's make it five great compile and save again okay now let's add this pause menu to our featured stack so we go to character blueprint and now we already have stack on in the viewport but now we're going to push pause menu into this stack and we have to push not in this like root element we have to push this stack element command activatable widget stack so let's get this my menu stack we created it here my menu stack and we drag from it and we can see these new categories so this is for stack we can push widget or get activated so let's push widget in the stack and now we need to select widget we're going to push and let's select my pause menu my pause menu compile and save and let's test it out so i press 2 on my keyboard and you can see it way in the corner so let's fix that we go to my stack container and we see that stack is in here in the corner so let's make it feel entire canvas panel go to anchors and click this and then reset offsets actually let's set offset to zero and now it should fill entire canvas compile and save play i press 2 and here we go we have our pause menu and we created it by by doing this by pushing widget to the stack now we want to create this this gamepad button as well so let's add a special gamepad special right this is start on my gamepad it might be something else on yours two small buttons on the front of gimbap when we press 2 on keyboard or this start button on gamepad we will add stack to viewport and push pause menu to the stack let's try it out i'm pressing start and menu appears but i can't navigate with my gamepad so we need to add focus to this menu we go to pause menu go to graph go to this functions category and click on the right and select this get desired focus target and add a resume button for example can be any button compile and save let's try it again i'm pressing my start on gamepad and now i can move around widget with my stick and with my d-pad great so now let's create how to play pop-up right click blueprint class search for activatable common activatable widget and select and we will call it ui my how to play open it up again let's add canvas then we'll need title text and two buttons so let's add border for background and add vertical vertical box and in the box we'll put text for title and another text for description of how to play and two buttons button one we create another pop-up button too we close this widget and go back to previous one let's rename buttons button open pop up pop-up pop-up one and this button is button now let's add text to them text text and change text open pop-up one this one is close now let's move this to center of the screen so select border set 10 curves to center reset position change alignment to 0.5 size to content change brush color to black alpha to 0.5 let's change this text to title so how to play how to play and increase size to 36 and this text is gonna be description how to play one do this shift enter to do that shift enter to go to next line and do everything and do every everything everything okay now let's give padding to our buttons um let's say five and let's give padding to a border well it's actually gonna be padding for our vertical box so let's make it 20 okay compare and save and and now we go to pause menu and when player presses how to play we need to push this how to play into the stack right so let's do that go to my pause menu graph event graph select how to play button at event and now we get our stack from here my menu stack and push into this widget how to play so to get this stack we can cast to our character and get this variable my menu stack so we get player character last two third by third person character and from here we get my menu stack my menu stack here it is now we push into it push widget and in here we select our my how to play my how to play connect them and let's test it out component save and play so i press start on my gamepad navigate to how to play press it and here we go we got our widget but again i don't have gamepad focus on this new widget so let's add focus we go to how to play graph functions overwrite get desired focus target and drag our button connect them compound save test it again press start how to play and we get automatic focus for our gamepad click buttons great so now we go to my how to play and let's select close button and add event and on click let's deactivate this widget so we right click and deactivate compile and save and let's see what happens i press start i press how to play i press close and we automatically go back to first widget in the stack to this pose menu very cool and we can do it again how to play close how to play close so now let's create pop-up number one blueprint activatable common activatable widget select ui i pop-up zero one open it up and it's just gonna be some text and two buttons you know what we probably can just duplicate this how to play widget so let's do that i will go and delete my popup zero one and just duplicate my how to play select it duplicate and i will call it my pop-up zero one open it up let's change text pop up one and change this text up another one it's cool right oops now now these buttons this button gonna be opening pop-up number two and let's change text pop to and this button gonna close pop-up number one go to graph so we already have our button clause great so inside how to play we want to open popup one go to graph and open pop-up one add event on clicked and we go to my pause menu and steal some code we'll copy past all of this ctrl c ctrl v connect it and change this activatable widget that we're gonna push into the stack into my pop-up one my pop-up one okay so in my how to play when we click this open pop-up button we get our stack from player blueprint and then we push my popup one into the stack compound save let's also compile and save pop-up on and let's try it out i press start on my gamepad go to how to play and go to open popup and press pop-up one and here we go we have pop-up one and it's cool and if we close it we go to previous one and if we close this one again we go to the first one in the stack which is very convenient now we don't have pop-up 2 i guess let's do pop-up 2 and it's going to be our last one we just duplicate pop-up one duplicate it enter let's rename it uh change text to pop-up two let's pop up two and it's also cool uh and we will remove this open pop-up two button or maybe you can do pop-up three four and five if you want to and let's go to the graph we already have button close deactivating this widget great we can just compile and save and we had and we had gamepad focus bound to button we just deleted so let's change that button go to graph open get desired focus target and change button to mutton cloth there is this one compile and save great we need to push this popup 2 into the stack in when we are in the popup one right so again let's copy past stuff from how to play get this ctrl c when we press open pop-up 2 the add event and in here we ctrl v and we push our widget into the stack and let's change this to pop up 2 my pop up too compile and save and let's test it out so i press start on my gamepad we have our menu i select how to play and now i open pop-up 1 and now i open pop-up 2 and now i deactivate it and deactivate it and activate it and that's it now how do we close menu resume button is not working yet so let's make it working we go to pause menu and and this is our resume button button resume so we click on it and add event and in here what do we want to do we want to deactivate this widget pause menu and then this widget will disappear from our stack but also we need to set input mode to game only and hide our mouse cursor let's do that go to pause menu after video activate featured we get player controller set input mode to game only and drag again from player controller and set mouse set show mouse cursor to false and connect and let's try it out compile and save press play now i press start press auto play close resume and i'm back in the game again i press start how to play open pop-ups doing stuff close everything resume game and i'm playing again pretty cool and and also let's try our mouse controls so if i if i'm playing with my keyboard and mouse i press 2 and now mouse appears and i can select how to play and open pop-ups and close them whenever i wish and when i resume i'm back to the game very cool now we have this warning when i pressed 2 or start on my gamepad a ui my stack container was already added to the screen so why that happens because in here we add our stack container to viewport but when we resume game but when we resume game we do not remove it remove it from the viewport so either we need to remove it from viewport here or we need to check if it exists already check if it's added already to viewport so let's just remove it from viewport so we need a ui my stack container go to pause menu and and we get player character [Music] and what is called ui my stack container ui my stack container here it is and we remove it from parent remove from parent here we go all right and we need to connect cast don't forget that so when we press resume in our menu we deactivate pause widget we set input mode to game only we hide key we hide mouse cursor and we remove stack container from viewport compile save and let's test it out let's press start navigate around menu and press resume great and now we don't have this warning anymore let's save so now we have created two examples of common ui in our project first one is two widget example with a common navigation and this deactivation and this activation and second example is this widget stack with a deep hierarchy of widgets and that's pretty cool good job

Channel: Isbushka Oji

Views: 28,583

Keywords:

Id: uQisYatymjg

Length: 55min 17sec (3317 seconds)

Published: Sat Jul 16 2022