Unreal Engine: Creating a Keyboard/Gamepad Menu | Step-by-Step Guide

hey guys chibi here with another video today I'm gonna show you how to make a main menu in a reel uh which uh can be controlled from keyboard and controller I have made a simple uh user widget here which is a simple menu with three buttons that those absolutely nothing right now and I have a new game a lot game and a quit game button these are simply three buttons here I have do nothing special except for adding these two colors that are called lime and banana now I'm gonna show you really soon why I have these two colors and what uh we want to achieve so first thing first uh you can see the first problem in the project is that my mouse is disappearing and I want some kind of user experience that keep the mouse the keyboard and the controller of course you can change that if you want so to keep this user experience I'm going to start in the widget by creating by adding a event construct in this event here we're gonna set the uh game input mode so set game input and uh we're gonna do set you I UI only uh I want UI only in this case and for from the player controller uh here we are gonna drag and give it the player controller it wants okay uh pretty simple so far and if I compile and save you can see I now can keep my cards okay if you have any problem or you want to be extra safe you can also do set Mouse uh Showbox character sorry show mouse cursor and you can set the mouse cursor set it to true and it will just be here for good okay now I don't need it so we can just click and have the experience and by default this is pretty cool a real accessibility for tab by default so if we tab we can uh navigate in the menu and press enter to call it so first thing first uh you already know this probably so to give a the button a purpose we're gonna set is on click event so for Simplicity of this tutorial I'm just gonna print a string when it's clicked right now okay so we're gonna say new game is starting okay we're gonna make three print string more and we're gonna do this load game is starting okay and here we're going to quit is starting okay so let's add a on click function on click event sorry for the other buttons just for debugging so we know that everything is working as intended and now we have three button let's do actually something compile and save if you play now and click the buttons the console log is showing me what I'm clicking okay so this is the basic really simple now let's make a a our menu fence you know so the first thing we need is a variable layer which is going to be an integer so let's call it a menu navigation okay I don't like the okay now let's make it this an integer sorry integer because we need a an integral number with each button we also wants to have our over function for each button you want to have another function so for each button we're gonna need an overhead and later I'm going to show you why so on our red and and on our red wait okay for now let's just set here our integer so let's say 0 1 and 2. so now that we have this basic setup here uh we want to get a reference for each button you know and for doing this I've seen many people uh doing like that I'm gonna control and drag this here to get to get reference and I've seen people doing this they get a reference for each of the button and then they do make array okay I mean there's nothing wrong with it but you will have to add each button to the array manually uh each time which is not uh quite the best thing here instead you can just add buttons just make sure you don't add any spacer or something just buttons in this panel and then space them with padding or something like like I did okay so we don't want to do this instead we want to go to the designer and make the menu menu panel a variable okay so check on click on the menu panel and check is variable easy you will now find it here so let's drag the menu panel and from the menu panel we're gonna drag the pin out and do let's search for children and we get uh get all children once this is doing uh this is getting a reference for each item in the menu panel which is one two and three button okay this is all we need so now we have the same thing as doing make array but without adding buttons manually from there we can now do a for each Loop okay so what we are doing here uh the for each Loop is iterating all these elements and now what we can do with this is uh add this to a reusable array okay so we want to make the reusable array I was talking before so let's make a variable and let's call it menu items this is going to be a of type widgets okay hit off type widgets widgets here we go and let's make it an array from your array let's drag the array on the loop sorry let's drag it right here and drag the pin out and we're gonna add the items to this array so let's write down add and press enter now we can connect this to the loop okay and we're gonna do the widget object reference to the array element what this is doing is every time this is iterating the item it is adding it to the array okay so we are making a list that we're gonna use later so we don't have to hard code any buttons in this case for limitation of a real we're gonna have a lot of hardcoded stuff but the list this is possible so why not this is a little bit more clean now let's make a function let's change the other color of these buttons okay so let's make a function let's call it update button state or something whatever do you want and inside this we're going to actually use our reusable array so let's get the array and do a for each Loop from here we're gonna connect this to exec and now we're also going to need the index I made a I told you to make before okay so what we're gonna do is get the array index of the loop and check if it is if this is equal to our current index that we have selected in the menu which for now we are changing on over now for the Boolean value here we're going to drag off and do a branch now we have to Target the color and opacity of the button so if we do set color and opacity it is not coming out that's because uh we have a type of widget and this is returning a general object so how to make this off type button or whatever we need so let's just drag off the pin and let's say cast to button and is this way we are targeting the button itself okay now that we are targeting the button we can actually do some stuff so we can set color and opacity and we can get another set core and opacity okay now we can connect the set color and opacity to the branch so if it's true we get a color if it's false we get another color okay so now uh we're gonna connect the button to the branch and now we have our condition and should be pretty much uh everything that we need in here so we can just set the color so when the array index is equal to navigation and it's true we're gonna get the banana color and when it's not we're gonna get the normal color of the button okay so compile and Save now we should be able to try this so I'm just gonna hook the function to each other function here over event now when I play and I over we have a bit of a problem because we have set the color and opacity instead we want to set the background color because this is a button and not a text block so oh that was my bed so let's quickly change them okay so banana and lime compile and say and now we have the desired effect okay so over over it over it and it's change and that's pretty easy we have a mouse selection here okay we are changing the index uh all over this is the basic functionality of our menu our buttons already have a click action so there's really not much to do here so we can go and move to the next step so let's go back in the event graph let's leave it like this for now okay in the end graph now uh we want to uh address the problem we want this to start selected okay and to do this it's actually pretty easy since we already have the update button State function all we need to do is drag it in the graph and connect it to completed on this for each Loop in the event construct that we have made before now if we compile and save and play we're gonna see it is already selected just like magic this is because when the iteration is complete and is the loop is done adding the items to the array it is gonna call the completed execute okay that's really simple as it is okay so now let's get our end dirty and let's Implement a keyboard and controller support that is the reason why you are on this video okay so the first thing to do it is that we need to add an override function so go to the function here on the left go to override and do uh on key down okay this event here is going to be called every time we press something on the keyboard or everything else now this is going to be a little bit hard coded don't hate me and this is the one of the limitation of a real too maybe you can do it better I don't know but this is my way so uh to the back this uh we have these uh Anki down and return node uh let's set the return of the two handled and for debugging we're gonna do a print string and from the inky event we want to do get key so we're getting the key that is getting pressed right now and get the display name from here so we can debug and connect it to the return node okay now compile and save and play and try pressing everything on the keyboard you will see that we have the things that we need now uh going in the canvas going in the main menu in the error key of your widget blueprint you probably don't have this checkbox checked which is is focusable uh you need to check this to make the Anki down working now if you see if I disable it nothing is coming up so if you're wondering why nothing was coming up for you is because you don't have this selected so the widget needs to be focusable so just check it compile and save and now you can see the keyboard that's your the keys that we are pressing on the keyboard or on the controller okay now let's get back to the logic in this Anki down we're gonna do a bunch of things so let's move this a little bit away and let's focus on our get key so from here we're gonna do equal okay we're gonna actually need a bunch of them for each of the key uh we need you can also though you can also do uh and a switch by string but uh for having multiple buttons this is the best options okay now let's start by dragging off a branch a branch in a real is a simple if statement just for letting you know so on this Branch the first thing we want to check is that our S button is being pressed okay and we want as well to check if our arrow down button is getting pressed but then we have the controller we want to have the controller support so I'm just going to apply quickly the controller in here we go and now I'm gonna press the I have a little bit of a problem with the controller so okay now I'm gonna press the d-pad down and we want to check these two and also if you want you can also uh control when the thumbstick left is down to scroll in the menu okay so now we have four buttons which is s arrow down deeper down and thumbstick down left so that means we are supporting keyboard and controller so we're going to do and all here and we're going to add more pins and connect everything okay to this uh or we're gonna connect the branch so now when uh one of these buttons is getting pressed so let's connect the get key here otherwise we get nothing so when each of these buttons is being pressed it is going to return true otherwise we're gonna return false and do another Branch okay and we do the same thing here instead we're gonna check for everything that goes up so w sorry w and arrow up let's make another two and let's do default up and thumbstick up let's get another overport connect all the pins let's get another get here connect it and we connect it up oops okay and we connect it to the branch so once it's gonna happen now every time we are changing this we want to update the index up and down Okay so let's get our index okay so compile and Save and now how do we do that uh the first thing we want to do is go for the down option here so when going down we actually want to increase navigation okay so for increasing the navigation of course we're going to do a add integer plus integer okay so let's do our index navigation plus one so we are increasing the index from there we're gonna check if it is greater than and we're gonna say a greater than our menu items array length the length is returning uh the count of all the item presents in the array okay uh this is probably going to be a little bit bugged so what we're gonna do is uh -1 because it happens I don't know why yes it does uh one more one more identity should so we are removing it so it gets the current count okay connect the minus one to the uh the check here and then we're gonna drag from here and we're not doing a branch this time we are doing a select okay we're making a select this one so when this returns uh true is gonna be actually uh zero so how to do this we're gonna set the middle index here and say zero and the false we are gonna connect it to D plus one here okay and we can connect the branch on the trooping to the set menu location and after we have set the navigation we are going we're going to update the button State again so we can connect it to the terminal now and that's pretty much it now if you compile and save and play and we move the S key it is scrolling the menu okay even with this and even with the controller now we have to do the same thing uh to go up actually so again we're going to need our index from our Index this time instead of adding we are going back up so we're going back to zero and we are subtracting so minus one and then we're doing a check if it's less than okay zero we do again a select from this left okay this time the default spin goes to the minus here minus one and the true pin this time goes to our menu items array again we guess the length oh length I can write length so we get the length again we do minus one again because we want to get the index correct and we connect this to true okay and again we're gonna assess the menu index from select and connect it to the true exec of the branch here that gets the down Keys the the up Keys sorry and same thing we're gonna connect it to the update button State and the return node okay simple as that we compile and save and now we can freely scroll with the controller up and down actually the thumbstick is not working for some reason but this device is working fine the keyboard is working fine and for some reason the left thumbstick is not getting detected but basically this is of its works okay I don't really know why the time 6 is not working [Music] whatever so this is how you guess the controller and keyboard uh supports in the edit menu now you might be noticing that we don't have a click event so now we have to get a click function and this is going to be uh art coded I'm sorry I didn't found a better solution yet on a real unfortunately so we're gonna get a key again this time uh we're gonna do okay let's do like this so this time we're going to get the key again and we want to let's say for the controller we want the a key and for the um for the keyboard we want enter okay let's get in our ports again so one and two let's make another branch let's connect it to the uh false branch that we added before the Gold Branch defaults and connect the condition and now we can only true exact here pin we can do some art coding to make the click event okay it's going to be a little bit bad so uh the first thing we need is of course our array and in this case we have different options uh one of the options is to compare with each button so we're gonna add each button uh manually and we're gonna defeat the purpose of the array okay which is uh I which I don't want of course so let's try uh in a different way let's do a get or not we we actually can do instead of doing a get we get a yes the index okay and we do equal directly as maybe uh easier that's probably easier yeah don't worry let's make it even cleaner that's that is better so uh we're gonna unfortunately are code every index okay so in this way we are not adding each button manually but instead we are gonna compare uh the index that we are in right now that's a little bit unfortunate I know and we have to make a bunch of Branch oh no no no no no no even better even better so since I am a clean uh color which probably can do a switch on end or a select let's say let's see which one is but no that's not true it's selects uh okay I can do a select okay no that's not what you want uh the one we want is this let's remove the default pin and let's do one zero one two so this way we can simply add every index and this really much cleaner this is a little this is a way better solution than the one I found before uh okay kudos to me so now we can simply connect a function here it's really that simple so since unreal is a little bit uh strange on certain things I can Target the overhead event or the click event okay so instead we're gonna make three custom events so new game click because I can't give it the same name custom events load game click and quit customer a quick game let's connect it to the place that we need a click function and we can do like this or if you want to place the buttons everywhere in other place you can do like a new game click okay instead of calling it from here so you can just have this somewhere else so for this tutorial I'm going to do it this way so load game click here and we leave it there and liquid game here and we do quit game uh what what am I doing with game please ever done foreign oh it's a typo quit game click so we do quit game click okay and that's pretty much it file and save and now we play and if I use the controller to scroll the menu and click a I'm gonna get anything I'm not gonna get anything for some reason let's see what is going on on the key down I probably made a mistake and yeah I didn't connect the things here so sorry uh just I just forgot to add them so quit game click okay compile and Save play and it should work now see now you have controller support s3c with the keyboard work really fine and you can scroll and click on the menu it's simple it's clean and it works properly okay and you don't have to hard code any button really much for watching guys and hope you support my work and my upcoming games see you in the next video bye

Channel: Cibe

Views: 16,085

Keywords: Chat gpt, Gamepad, How to, How to make a keyboard joystick, Keyboard, Menu gamepad unreal, Unreal engine, fortnite, joystick, mechanical keyboard, ue5, ue5 beginner tutorial, ue5 easy tutorial, ue5 tutorial, ue5 tutorial for beginners, unreal engine, unreal engine 4, unreal engine 5, unreal engine 5 beginner, unreal engine 5 beginner tutorial, unreal engine 5 cinematic, unreal engine 5 lumen, unreal engine 5 tutorial, unreal engine 5 tutorial for beginners, unreal engine tutorial

Id: UcPPkxi5HD0

Length: 35min 44sec (2144 seconds)

Published: Tue Jan 03 2023