Unreal Engine: How to Make a Main Menu with Controller Support Part 2

what's up guys Questor and today we are back with another video on how to add controller functionality to your main menu in unreal engine so last time we made a few things here made a few adjustments made our buttons and added some functionality to them and this time around we are actually gonna get into getting the controller support in there so now that we're done with this first part let's test to see if our main menu works so hey it works look at that and this should point nowhere it's gonna throw up an error but and quick game should close it out and options should say hello so there you go your main menu now works you have keyboard and mouse you have Mouse support so you can get going between these and click on them and I'm really liking that blue I might have to use that for my game okay so onto the next part so the next part here is getting the functionality of controller support so this is gonna be the hard part this would be the part that I would suggest is a little bit probably of more of an intermediate level of blueprinting we're just using blueprints are not using C++ but if you are using C++ you can essentially do the same thing so probably with a few differences and probably a bit easier gonna be honest I prefer to write the code myself but blueprinting is also nice I guess so we're gonna do an event construct and we're gonna make an array because we're gonna need to do that so I want to go event punch not pre construct we don't want it to be constructive you want it so essentially what this does is it as soon as the widget is loaded it fires off so from here we are gonna want to grab each of our buttons and we're gonna want to place them in an array so this is where our array is coming in and this array is gonna be used in multiple different spots so we're gonna get each of these we're gonna make array and we're going to add two more pins to it just to note that computers don't start with one so keep that in mind when you are um blueprinting or doing any kind of coding that computers actually start with zero and then go up so zero one two so yeah we have three items here but it starts with zero so just keep that in mind um and that can get a bit confusing I have made a few mistakes myself encoding with Java and other languages um that this can do that so you just gotta remember starts at zero um after that we're gonna just promote this to a variable and we're gonna just call this a button right because that's really what it is we're gonna call it as is and it's a button right so we're gonna just rename it and call it button or a button right okay so we have that one a comment is out and what I just makes right so that makes the button rain that we're gonna be using it in multiple different spots from here we are gonna actually want to make a function so we're gonna make a function and want to call this button this button selected so this is actually going to be using our array so we are gonna get a few things for a make a few variables here we are gonna make a a integer variable so this variable is gonna be called a button position I don't have a better name for this it's essentially the position in the in the list of buttons that you have so this could just be an integer and that's it so we're gonna need that in the button array so we're gonna grab want to get that and we're gonna get the button right and we are going to get array so want to get an array let me get a it's probably an automatically change to a copy but that's fine want to put that in there and we are gonna set background color so you're gonna want to have consistency here with your buttons and there's a very simple way we can do this is we can simply go to our button any of our buttons and it grabbed the hovered oh thing and just copy this hex linear um code thing right here it's essentially the color code to what color this is um and go to here and just plop it right here and that'll automatically set the color to be what it is now the next thing that we're gonna do so obviously you're not gonna want it to change all the buttons right you want it to just change the button and turn it off when you're going down the list because you want it to you want it to work something like it would with a mouse where it's hovering them and changing the color only for one button you don't want it to change you don't want to go down the list and all the buttons change and not change back so that's what we're gonna do so we're gonna want to make a for each loop sort of be looping here through the array we're gonna grab our button array I want to plug it in right there and then after that we are gonna grab the array index and we're gonna put not equal so as long as it's not equal to the button position here then it'll do branch as long as it's not equal and that will loop and chain and set the background color of each and every other button that is not the one that we are on so and then you want to set this to white for the default and then after that you're done I would suggest always commenting your work so say what this does changes the color of the button so why did simple zet just changed about color with the button selected and that's what that does now we're done now the next one we're gonna have to do is another function and this is for when the buttons are not hovered or when they're not selected so buttons not selected so you obviously don't want him to stay selected when you were using a mouse you want to be able to switch between mouse and keyboard and be able to quickly you know do that so let's get into that um sorry about that I am checking my recording right now so my apologies I wanted to see how long it was okay so if the buttons not selected um we're gonna be running another for each loop so it's gonna just branch reading though for each we're gonna just link up our array and this time we don't have to worry about what button in the array is changing color because we're changing the color of all of them back to default so that's all we have to do here I said it's white and you're done okay compile that save it and you're done with that one now that next one is gonna also be a bit complicated because we have to detect whether or not the mouse is moving to one call this function off to do this function and two we need to know whether the mouse is moving or not to have a show up on screen as well if you were doing a pause menu this would be really important in this case it's not as important as a pause menu I can do that tutorial later but this is relatively important because we do need to fire off this function if you decide to switch to a mouse and since the cursor is already shown and the other thing we don't have to it's always gonna be shown no matter what you can change that if you'd like but personally I like them us to always be shown so that's what we're gonna go with um so from here we're gonna need to override a function and we're going to do onmousemove we're gonna detach this I'm gonna move that out of the way and we are first things first gonna set off into a branch now see if the mouse is moving every frame we're going to get the mouse you want to need to get the cursor Delta so we're going get cursor Delta and we are gonna do and equals so it needs to be equal and we're gonna promote this to variable actually not that kind of variable we're gonna promote it to a local variable we don't need it anywhere else but here so Ramona to a local variable you can promote it to a normal variable but it's really not needed anyway it's not needed anywhere else it's just needed here and we're call it last Delta so let's keep track of the last Delta in the last frame and set that right there after that if it's false we're gonna we're gonna set the last Delta so we're gonna set last Delta and we're gonna grab this and remove that like that this is pretty simple we're gonna need a boolean variable boolean boolean here to check if the mouse is moved so we are gonna put has a mouse move we're gonna name it just like that has mouse moved it's gonna be a boolean and we're gonna just set that right here and if that is true we're gonna check it to be false return value and then we're gonna put a handle because if it is handled so there you go after that we're gonna check if it is equal again so um so we're gonna check if it's equal it's a zero so the last Delta hasn't changed and then this will go into another branch here if I can click the right part of the that's one thing that isn't knowing about blueprinting put that right in there if it is full if it's true set my set has moved to false turn node handled and there you go if it's false we're gonna set has mouse moved it's true and we're gonna return and it's gonna be handled so basically what this is doing is this checking the delta which is a 2d vector of the current position of the mouse on the screen each frame and if it is changing then the mouse is moved if it hasn't changed then the mouse has not moved and like I said commented text if the mouse has moved this right I spelt frame wrong and it checks at every frame so it checks the distance every frame and that's how that works so compile that and save it now we get to go back to the event graph and this is the fun part we are actually gonna detach these and we are gonna make our own custom events here because each of these need to be fired off from their own custom event to make it look clean so we're gonna make a custom event and want to call it from play I don't know why it's doing that it's really weird and I not a big fan of it I just deleted that one boss open options you want the names to be different okay and event and we're just call this place pretty simple I'm actually rename that to a capital Q okay so not we've done that we can start the big portion so this is probably the most complicated part of the entire tutorial here that isn't in line that's annoying me so we're gonna make another custom event and we're gonna call it check input so custom events are almost the same thing as functions they do the same thing you can put this in a function but you can't use the delay thing which we are gonna be meeting in this so first things first we're gonna make a branch make a branch we're gonna check if the mouse is moved so as a mouse moved check in to the mouse is moved if it is true then we're just gonna simply I'll put the buttons not select it simple as that if it's false or make a sequencer and you're gonna need three pins if you were working on like an option screen or something like that you'd need for one for the B button to go back so three pins and we're gonna start with the top one here so we're add it delay delay here and we are gonna set it to point we're gonna set the time to 0.125 that's what I found to be the best I guess the bottom one here is gonna need it because that's just checking for the a button or a bottom face button to be selected whether using a playstation controller or not we're gonna need a branch and the branch we need another branch coming down here we need to get the player controller and we're gonna is and put a piece is and put down a gamepad left thumbstick down now this is gonna work really weirdly because i'm gonna do down first prize gonna make much sense to you um but that's how we're gonna do it because it makes the most sense later I guess I don't know that's just how we ready and go up and face button bottom okay we've done each of those this third one is just gonna automatically come off into a branch we don't need to worry about that so this one can link up here this one links up here and this one the links up here just like so and then after that what we're gonna do is we're gonna link this up to another branch and we're gonna grab our button position and we're gonna do later then and end it's gonna be or less then no yeah greater than and want to put um or less than two because it starts with zero it goes zero one two we're gonna link that up and then we're to go greater than zero we're going to add another branch down here just like so [Music] and then after that we're gonna do a another branch actually now we're not doing another branch we're gonna set the bottom position so set bought in position and this is gonna come off with a boss so it's going to plus one and then this one's gonna be a minus one because we're gonna be going up and down the list of buttons so we're going to set that again and then after that we are gonna go button selected and that I'll just choose with button is selected fun selected button selected and that's all you gotta do right there then you're done they're not that hard if it was a pause man you could set the cursor to go to not be there if you wanted to only check for button input whatever there's a lot of things you could do here but simply put that's what we're doing and then we're gonna do a switch on and switch on int we're gonna make three pins want to check with a button position and then we're gonna fire off each of these ones so we're gonna fire off play not play sound but the custom event play open options and it now you could just set this up to just go quit game and you could just remove that we're gonna do the same thing here so each of these buttons instead of calling and the functions directly we're gonna just call it like so so that way you have both mouse input and keyboard input or not both using a keyboard keyboard but controller input now obviously there are some limitations of this but we're not gonna get into that because there's you know limitations I guess there's pros and cons to everything in life so yeah checks the input that's what that does it checks the input and then after that we're gonna go up here and run a go event tick we're gonna add another delay because you don't want this check in every you know tick I say have it check every half a second is good enough or well that's not half a second that's like 1/5 of a site and now geez Wow huh five hundredths of a second um just having a checkpoint oh five seconds is pretty quick and it's not super crazy so it's responsive enough and then I just have a call check input and then now that's all set so now that we have done that we can save it and open this up we have that and if we grab our gamepad here if it work and we click our gamepad works as well if we click options it's gonna say hello it's gonna work see so yeah and quit it quits so there you go if you guys liked the tutorial I'll leave like comment if you have anything to say and yeah so that's pretty much it I hope you guys enjoyed the video and I will see you guys in the next one again just like the last video I forgot to mention just go check out my website it's www.amazingallplace.com it is gonna be coming to steam soon so keep an eye out for that and this would be also the best place for you to get the latest news on my game so all the latest stuff will be posted on here so you'll know exactly when it is gonna be going out of steam yeah so I guess I'll see you guys in the next one see ya

Channel: Cwesolo

Views: 282

Keywords: Cwesolo, Cwesolo Gaming, How to, Unreal Engine, Unreal Engine 5, Unreal Engine 4.24, Unreal Engine 4.25, how to make a main menu in unreal engine, how to add controller support to menus in unreal engine, How to add controller support to widgets in unreal engine, The Amazing Ball, Unreal Engine Tutorial, Unreal Engine how to, Unreal Engine 4 tutorial, Unreal engine 4 Beginner tutorial, Unreal engine 4 intermediate tutorial, Unreal engine 5 reaction, Unreal engine 5 ps5, UE5, UE4

Id: odN1EPKefig

Length: 24min 13sec (1453 seconds)

Published: Mon Jun 22 2020