UE4 / Unreal Engine 4 UMG / Widgets - #02 Keyboard/Gamepad Menu

hey everyone and welcome back so this would be another quickfire tutorial on some concepts around more UMG stuff and this time I wanted to look at keyboard and game had based key bindings for getting into this there are a lot of other tutorials ready out there which show you how to manually set up a store in an array all of the buttons that you have and toggle through them so this isn't gonna be another one of those I actually want to show a simpler way to do this it doesn't give you quite as much freedom you can't do things like looping from the bottom button back up to the top when you've reached the end of an array but this is using the built-in functionality that unreal provides this people just seem to not use or be aware of so I just want to bring that to attention and also because I find that this is a very easy sort of quick far way to build a menu if you want things like a quick menu system for a game jam or something is a lot more convenient to do this valid is to set everything up in like I mentioned the array and needing to store everything and every time you create a new a new button working out where to place that and if you wanted buttons lined up beside each other as well as top to bottom then you're gonna have problems with that so they should hopefully get past those issues so before we get into this just a quick example of the kind of thing we'll be making it's going to be this very simple menu system we can navigate this with the mouse to swap between the buttons we can also use the keyboard so this is the keyboard activating it at the moment and then it also has automatic support for the gamepad using the d-pad or the analog sticks and pressing the a button there is gonna set the buttons same as the enter or space and we've also got a quit function again using enter there to use the buttons so this is gonna have four default support for any keyboard and gamepad as well as the standard mouse click option that you use to so to begin with what we're gonna do is we're gonna get the slightly less important things out of the way so all I have here is an empty project and those starter contents needed and I'm just going to create a new folder and call this one blueprints next I'm just going to create the blueprints which will help us show and manage the the flow of this project so if we begin by creating just a simple game mode and look with this BP underscore game mode and create another one and this is going to be of type player controller so BP and score player controller and I'm also going to create our widget so we'll go down to the user interface and crate I'm a widget and we just call this one WBP underscore menu okay so for now this is gonna be the main things we want so we'll also want to button a little bit later but we'll go and create that one as one we need it to begin with though it's gonna go into the game mode and I will assign our default game controller or player controller to be how a VP player controller compile and save that and make sure that we set this up in the maps and modes just that they don't need to worry about this again so we now have our player controllers the default and then inside of this I'm just going to start dragging these tabs up we just want to go to the player controllers event begin play and will spawn the widget that we just created so we're gonna create the widget we will pass in the menu that we've just created we will add this to viewpoint and we also want to other things so the reason that I've specifically created a player controller one we probably didn't need to otherwise it's just because I want to have some control over the input mode so the first thing is inside of the player controller we're going to set the input mode to UI only so if we just type UI only we'll get this option and the player controller because we're doing this in a player controller we can just say self and then again once at the boolean inside of this player controller to show my cursor so we'll set show my cursor and we'll set that to be true just so that we instantly have interaction with our menu so if we press play now we should see that regardless of whether or not we press into the window we have the mouse cursor showing so we know that we're using our game mode and the correct controller so just means don't need to worry about this now and we can focus and just on the menu setup okay so if we open the WBP underscore menu there's a few things we want to add so I'm just gonna do this with two buttons you can add extra if you wanted I'm just gonna keep this nice and simple so that we can get this done now before we add these buttons we can go in and add a normal button this doesn't mean that we'd have to do a lot of logic and we'd need to check all of the buttons constantly inside of the event graph in the the graph in the event tick and that's something I wanted to avoid as well so I've really really tried simplifying this so what we're gonna do is in the blueprint we're going to create a new blueprint class again we need to drop down all classes and we need to find the class button so if you haven't done this before or if you're not aware of this you can just recreate buttons as in the user interface a class type of button from scratch you don't need to just use ones which are provided in the UI interface if you haven't done that before I have done another video on this and the pros and cons of using that mostly the pros just because it really speeds up the process of creating menu systems and it helps you to really quickly make single changes and have that populate across an entire setup for your widgets and you can do this for anything you can just for text renders you can just for backgrounds and things like that so we're gonna create a button of our own and I'm just going to call this one BP underscore button and if we make sure we save this if we go back into the widget knife then what we want to do is we can see if we hit compile we we have access to our BP button that we've just made so if you wanted quite simply the benefits of this is that you can come in you can make all of these changes once inside of your new button class and regardless of what you do inside of the widget then all of these buttons showing the same class would update whereas obviously if you're just using the standard button then you can have to update all of these individually if you need to make any changes the reason that we're using this though is that we're gonna house some logic inside of the button class which is going to constantly check whether or not it is the current button which is in focus and if it is depending on the result we're going to change the style of the button so that we have this quick update depending on whether or not it's focused by the keyboard the gamepad or the mouse before we do that though I just want to set these up so I'm just gonna keep one of these in delete the other one call this one button start and I'll give this some text so drag some text on give this size of 300 by 150 or maybe 100 I'm not gonna worry about the visual aspect of the button in the moment cuz this is all going to be updated in the button logic later so leave this as standard but I will set the anchor point to the middle put the alignment 2.5 on these and put the exposition to zero and maybe minus 100 on the why was that done I'm going to change the text a little bit as well so I tend to change the font to light and just give the text a slightly darker color because the buttons will be lighter a little bit later and change the first bit of text to say start okay so that's button 1 complete with that done if you control and select both of these press control C select the panel to control paste or copy/paste control V the second button in and I'm just going to rename this one button quit change the text on this one to say quit and just Center the button a bit more so it's got the anchor points correct we just need the x position to be 0 and the y we can make this 100 to give it 100 gap as well so these are the buttons set up and what we want to do now is we can come back in we can test the as they're appearing so we currently have control with the mouse which is going to work perfectly fine we wouldn't have controlled at the moment with the mouse and keyboard unless you've already clicked into it like you like you can see that I did that otherwise we don't have that control if we click in then you can see we get this outline which shows that the keyboard is taking effect so providing the functionality to our BPM score button I'm just going to go to the graph of the widget and this is the really quick way that you can add the focus to the keyboard and the gamepad that I mentioned so off of the event constructors we'll get rid of the pre construct what we want to do is we want to set the keyboard focus and this is something I just don't see people use for some reason and what we can do with this is we can pass in the start button to be our first keyboard focus so now if we press play we can see that we can actually use the keyboard straight away which previously we wouldn't have been able to have done so that's the first step but the problem is is that if we click off of this then we lose that focus again if we hit the background or anything so we're going to fix that a bit later as well now just to make sure that we have these working properly we're gonna set up the on clicked for the quit button and we're just going to call the quit game so called a quick game function and let that exit and we'll do the same for start I'll probably just do a print string for this so on clicked start we'll do a print string and we'll just say start game okay so very simple logic just to make sure that we can prove and test that they're working so if we click on start then we have start game showing if we hit enter then we have start game and the same for space and that's the other thing to keep in mind the way that I'm doing this it does mean that there are default buttons for the UI for game pads it's going to be a or X on the PlayStation and a on the Xbox controller for mice and keyboard the default select button is space and enter and up and down for the navigation and left and right arrows doesn't mean you won't be able to use W a s and D that's something you'd need to implement manually but again that that's what I'm trying to avoid is that man set up for menu specific stuff we can get rid of the event ik that's the other great thing about this is we're not gonna need to do anything in the event tech here so this doesn't mean I need to start going back to our buttons now before we do anything else what I want to do is I'm going to get one of our buttons we'll get the quit button and the start button so we'll control drag both of these in and off one of these I'll choose the start one to begin with I'm gonna pull off of here and make an array I'm gonna add another pin and put the quit button in and then we're gonna pull off and promote this to a variable and we'll just call this the button that right so I did say that we wouldn't be traversing or navigating through the buttons using an array but an array will still be useful and save us a bit of time so we still need this just so that we can call some functions and these a little bit later we won't hook this back up yet we're gonna move over to the BP underscore button though I'm gonna start doing some of that logic for the button specific stuff now the first thing I want is three variables and these gonna be off type of button style the first one I'm going to call my style so these will be the styles that were swapping between depending on whether the mouse is hovering over it whether we are focused or not focused on the gamepad or keyboard will create one of these and we will call get the type of button style and see here we have button style and if we hit compile we can see that we get the standard options for whether this is in its normal state hovered or pressed now before we edit this and just going to control W this twice rename the second one to key not selected and key selected probably not the best names for these but definitely know what to call these and what we're gonna do from here is we'll set these up nice so when we are in the my style so when the mouse is hovering over this button I'm going to leave the normal as is I'm gonna give it the hovered state a slight tint so that we know what the that something's happened and when it's been pressed I'm gonna give this a darker tint as well to show that we've clicked on this just so that we know what each of the states are so that should be fine and for Speed just because I'm not too worried about how all of these look when the key isn't selected I want all of these to stay white so when we don't have a key pressed on it or when the basically when this is focused check hasn't been made on this we want this to stay white which is going to be the normal state for the mouse as well and then when it has been selected what we want to do is I'm going to copy the hovered color just so that we use the same color for all of these so so again if you're not aware of this another shortcut tip is to right-click you can copy the whole style that you have here I'm gonna go back to the key selected and on normal we're gonna paste that style and we can see that we get that same blue and we can paste that style here as well and then again when this is pressed I'm going to go back and copy the pressed from the my style and we're gonna set that for pressed on the key style as well so we'll paste that in just to make sure we get the same hex values and obviously if you had textures or buttons that you wanted to be copied across that would copy the images and fill those as well so another really quick way to get multiple styles updated and keep the same settings and rather than doing it manually by hand so these are the styles of setup that we need to use the next thing we want to do is in the event graph or in fact we need to create some functions at one problem with this using the buttons and highs in the logic here is that we can't have things like event ticks and we don't have an event begin play so if we tried getting those in the event graph here we wouldn't have access to those so what we're gonna do it quite simply I'm going to create one function called start and when this is called we're gonna call a function by timer so we're gonna set a timer by function name and this function name I'm just gonna call a check focus now you can play about this I'm gonna make the time achieve relatively low so 0.1 in between each time this is called and we'll set this to looping so this is kind of making our own event tick and if you remember that a normal event occurs something like zero point zero zero eight seconds between each call so this is going to be a little bit more efficient as well and not quite as processor-intensive as if in comparison so if you would stay on the event tick inside of the actual widget so you can come back if you find that's not responsive enough though you can come back and you can make this something smaller like the event tick the time duration now but for now I'm just gonna leave this as point one so if we come in and copy the function name to make sure we don't misspell this create a new function and paste the chat focus in what we want to do in this function is paw here we get a branch check and we want to find out whether or not the mouse is currently hovering and there's a built in function for this so we just saw a built-in check so we just find the is hovered boolean so we'll find out whether this widget is currently hovered if it is then this is the button that we want to be currently focused so we'll set keyboard focus and we'll set these style because we know that this is Hobbit by the mouse this is only called when the mouse enters this button we want to set the style so set style and we'll set this to be our my style and just so it's makes sense what we're changing here is on the class default we have the standard style options that we have for any other button and it's just going to change this to be the one that we're selecting and this is why I said not to worry about overriding things like getting rid of the horrible gradient texture that's provided by default because we're going to do that by using these Styles over here so we can skip that stage which is always great so that is the nice possibility accounted for what we want to do then is if that isn't the case so if this doesn't currently if this button doesn't currently have the mouse hovering over it then we will set the style again and this time we're gonna use a select note so pull off of this and get a selector and we want to find out whether or not this has keyboard focus this time and again there's another boolean check for this which is has keyboard focus now if that is true then we want the key selected style to be chosen if not then we want the key not selected style to be chosen so quite simple really and then depending on whether or not this is focused with the keyboard or the mice we now have all of our states accounted for so if we compile this and press save I think this should work now pretty much straight away the only thing we want to do is go back to the widget blueprint this is why we have this array here as I said we're not gonna be toggling through this but this does allow us to call our start function that we've made so we're gonna pull off and do a for each loop so would you have for each loop here and plug in the execution pin and for each element in this array all we want to do is call the start function just to let the the button though that it needs to start checking whether or not it's hovered and then from here we can set the initial keyboard focus to be whichever button you think would be best to be your initial focused button so now there's one more thing I know we need to change but we're just gonna make sure that it's that this works so we can see that the buttons have indeed been updated so we have it's kind of more modern flat style going if I was to hover my mouse over these of them were getting these updated and I can use the keyboard to make those changes and I've also just grabbed my gamepad and I'm using the left analog or the d-pad and a key is pressing the start button we can see that stupid windows thing wants to get involved and also if I come back in and select one of the buttons then I get the quit button as well so all of this is now working with keyboard mouse and gamepad so the final thing to do is you'll notice that if we come in and actually use the keyboard we're getting this weird outline and we can remove that quite easily by coming into the project settings we'll go to the user interface and we want this render focus room we want this to be never so that's what that was doing its rendering the the focus lines so if we come back in I select again we can see that they've gone away and that leaves that one final problem I mentioned and that is that this works fine unless you click off the buttons and then you can't get back in with the mouse and keyboard without pressing a button to begin with so we're going to come in and make one final change so inside of the WBP underscore menu will come in will create one more button we're gonna drag this anywhere I want to place this above all of the other buttons so drag that up on the canvas layer option and set the anchor point to be the fullscreen Wells area the offset for the left right and center and the bottom so this covers the whole of the background and then under the Styles I just want to quite simply set the opacity down to nothing so I've done that on the normal air I'm gonna copy this and paste this for the hovered and the pressed so it never looks any different and then inside of the graph first Watchi I'm gonna go back and I rename this to button background or a button BG and then with button BG ready I'm gonna press the on clicked option and when this is clicked quite simply I'm going to copy this time section ctrl W the set focus to start and that would just return the focus as it was so when you click off now you get the keyboard back on the start button at the very least I think I'm that's going to work for the gamepad as well but we now have full support of mice keyboard and gamepad and of course as I mentioned this does mean as well that we can just come in and copy more buttons around now if we wanted and as long as we add it to the initial array just so that the function gets cooled we don't need to worry about having logic updates for which one to call next which one was last store the previous and next buttons and so on like you've seen in other tutorials as I said it does have a certain drawback where you can only go down and up other people have added logic wait if you're at the bottom then it'll loop around to the top button things like that set is slightly less flexible in some ways but we can I think the great thing about this is it's all kind of self-contained under this button logic so each individual button manages whether or not it is highlighted and then the widget itself has left a lot cleaner so it's just one of many ways you can properly set up a keyboard and gamepad ready menu system like to mention the main goal of this was just to show an alternative way that I haven't seen shown anywhere else and I think is a little bit faster especially for concepts in prototyping or if you just need the menu to be a little bit more Universal but you didn't need it to have very specific control over which button is next in the order if you did want to see that kind of thing I'd recommend there's a community led training by Celeste and that is definitely one of the the best examples I've seen of getting quite functional and interesting logic into a gamepad keyboard style menu system so I'll leave this one here for today though as always if you've enjoyed the video or found it useful then please do leave like and share the video around that really helps don't forget to hit the subscribe button kept up to date with all of the content coming from any of the playlists on this channel and as ever thanks watching and I will see you all next time

Channel: Dev Enabled

Views: 44,545

Keywords: unreal engine, unreal engine 4, ue4, game dev, game dev tutorial, tutorial, education, free, beginner, ue4 beginner, ue4 game, game, devenabled, devenabeld umg, 4.18, project, educational, minimalistic, keyboard widget, gamepad widget, gamepad menu, gamepad ui, keyboard ui, gamepad keyboard

Id: gDKIenYaoxw

Length: 19min 13sec (1153 seconds)

Published: Wed Apr 18 2018