UE4 - Tutorial - Widgets with Gamepad control

hello guys and gals welcome to a new tutorial in today's tutorial we're going to be going over how we can set up our widgets or user interfaces to be used with a gamepad or game controller without the use of any sort of add-ons a lot of people seem to struggle with this is actually pretty cheap tricks that we can do where we false keyboard inputs using gate controller and that will allow us to use a user interface with our controller rather than with a mouse so the first we're going to need is an actual widget so we're going to right click user interface widget blueprint for this my widget and I open this guy up now this is a canvas over in the left hand side under palette we're just going to add two buttons to the canvas so click and drag a button down to canvas panel but we only want to do that once so we can just resize this sky right-click and copy a button and then I right-click and paste in a second button which is now aptly named button to be deleted button one come on I know that people are gonna complain if that's not entirely symmetrical I think that is whatever don't kill me we're gonna delete the things that are already inside the graph if we need any of that we'll add it again later in the left hand side under my blueprint under variables click on button 0 at the bottom here we've got events on clicked we're gonna press a little greener button drag out from here I'm just gonna print a string and we're gonna have this say left button second button unclipped print string and you probably guessed it I'm gonna make this a cake no no let's get a ribbon there was a button for cake could you imagine just a button with an infinite cake I'd be slamming album slamming it so now we've got two buttons one will allow us to print button that prints drinks for each button we're gonna close this down that's what we're gonna do in there Finn now next we're going to select our third person character open this guy up and this is where we're going to start messing about with our actual UMG or widget so we're gonna do is right click event begin play now the reason I'm doing it this way is because I want this widget to always exist but not be used so what we're going to do from event begin play is we're going to eight would you now under class we're going to select my widget all right click get player controller put this into owning player never what we're gonna do is we're going to immediately add this to view people add to viewport but then what we're gonna do is because we don't want this we're actually going to set visibility of the user interface to hidden because we don't to be able to see it so if I break this right now and we press compile if we press play will immediately get our buttons showing yeah and you can see they're working they're printing the strings correctly if we were to go back into a third person character and we plug this in compiled close down let's play we don't have a user interface oh no no user interface boom so how are we going to make sure that we've got a user interface available to us when we need it well we're gonna add a button press on a game controller now I'm just gonna use a basic key so game pad special right which are most controllers is the start button everything what's this button called on the Xbox one controller no it's the three lines I don't know what the things are called now I only ever play on my PC no don't hurt me we're gonna pull out from create widget from the return value set visibility to visible now if we compile this BOCES down and press play if we press the front key on our controller we can make it pop up so that's that's the first hurdle we can now make it pop up using the game controller really really easy simple so what do we now need to do we need to actually make it so that we change our input mode so from our get player controller we're going to set input mode now normally we would use a UI only if we're gonna be using keyboard amass I want to set up with something for a controller for the controller to work inside of the the the widget we still need game mode we need game and your honey so set input mode game and you I and this will allow us to still feed controller inputs from our player character into the widget when we need it dragged out from the return value from the create my widget and plug it into the widget focus tada and now if we compile and press play if we now press our button we can open this up and we can go to our ms and we can highlight the buttons whereas normally they would just move our camera but we're getting both yeah next thing that we're going to do is we are going to actually focus on those buttons so the way that we're gonna do this is we're gonna select one of our buttons so from Korea my widget drag out we're gonna say get button now we want get button zero that's going to be our left-hand button that's one that I want to have focused at the start if you want the right hand focused you go for if you want something else focused to go for it the way to check if anything is focusable open up your widget select it on the hierarchy and under search just search for the focus wall and if you can see that it is focusable and you've got this tipped you can have that as focus certain things can't be focused such as text you can't focus on text because you can't select text technically cuz it just sits there other stuff you can't focus so this will work with anything that's focusable so we've got a button inside of our player that's great but how do we actually focus this we set keyboard focus and we plug this in compiled and now some of you if you're aware of how that works I'm going to say this is not going to work if I press a button you can see it's not focused the reason we don't have any focus there is because it's setting visibility and focusing the entire widget in our screen at the same time as it's trying to focus a keyboard on a single button so it's getting two inputs at practically the exact same moment that's what we need to do is before we set keyboard focus we just want to delay we're gonna set this to a relatively small delay 0.1 second and now if we head back into the game and we press our button you can see now we've got this little dotted line see that now our controller is able to move that I'm using my controller tune with the dotted line when you first focus the original focus isn't going to be dotted lined it will only dotted line after you move your your controller but we're going to build something that will actually allow us to highlight these on our own without these dots you can see they're her press left and right or if I use the d-pad I can select and press a button using the controller all right he's a genius so he's a genius what we're gonna do now is we're gonna head into the widget and what we want to do here is we actually want to create something that's going to highlight the buttons so what we will do is we will make something from the construct event construct when the event when the widget begins what do we want to do what do we want to do we want to have a custom event we don't we want a at time of the event timer vibrant so we set timer by event I want this to check every point one second it's not going to happen every tick and I've seen some people who do this every tick don't do it every tick it's ugly we're gonna custom event and we're gonna call this focus or whatever you wanna call it uncon their focus is easy to keep track of we want this to be looping now what do we do here okay so we need to check to see which button is currently focused so we're going to need our buttons obviously if you've got more than two buttons this is gonna take a little bit longer but that's fine on my first button drag-out make a right add a pin reach button and plug your button in that's going to put these into an array then what we want to do is drag out from our array for each loop which is basically going to go through a list of different buttons and for each button it's going to do a thing what is the thing that we're going to do you want to check if it has keyboard focus French if it does have keyboard focus dragged out from the array element and then set background color has got to focus we're gonna highlight this in green pick whatever key the one it doesn't have to be green I just like green and will copy and pissis and if it doesn't have focus and we're going to set this to white Paul press play press a button and you can see it's immediately highlighted one green and one right before we had dotted lines okay and we can test that again press PLAY press the button we have to actually be inside the game press the button and you can see it's highlighted it green and I can tap it with my controller and it will work just fine so that's working so far what do we want to do now well preferably we want to be able to drop this menu down by pushing a button in here so what we're going to do is we're going to say on this button clicked get over there each key want to set visibility of self to hidden and then we need to get player character I'm play a character we want to washing it we don't really need that we're going to set input mode to game only characters gonna come into play later on don't worry about it get by a controller they control it into the user into the set input mode we'll get rid of that guy compile and now if we press play and we press our button you see it's doing a thing and if I tap on this one it when I close the thing down and we can reopen it up yay nice the next thing we need to do is we need to stop a character from moving around obviously if we're inside of a menu we don't want to be able to run around the world so what we're going to do is open up a third person character and then drag out a character movement character movement we will disable movement after we say a keyboard focus focus will occur and our play will stop moving and they will move again the problem being he doesn't start moving after it close it back down again so open up our widget go to our graph and this is where we want to down play a character so get player character now if your game-mode is set up correctly it's gonna recognize that player character is a specific blueprint in this case it's just a third-person blueprint if your game mode character and your actual character that you're using don't align you're going to have to cast here you're gonna have to cast it to your character and plug in get higher character to the cast because it's already set up for us I don't need to worry about that so I'm gonna do is get player character and then enable no I'm not going to enable I'm going to set the movement mode of character movement - looking oops get in there you know compiled that close this down press play if I push the button not moving if I turn it off we start moving again slight problem with this however if we jump and then we push it ahead just just gonna float or we don't want a floating guy this is not the way we want to do it so what we're actually going to do here is open up a third person character again and we're not just going to disable movement after keyboard focus we're going to branch character movement we're going to drag out and ask is falling plug this into the ball so it's a character falling or if he's not falling disabled movement because we just want him to stop moving if he is falling what we're going to do is we're going to set a counter movement mode the set movement mode to falling and uh so now if we open up our menu while we're jumping attack double full the problem here is as soon as he lands he can walk again because on land you get to start walking again so we're gonna stop that from happening I going back into the third person character and after a set movement mode we want a retriggerable delay and we're just going to trigger this every point two seconds on completion go back to the branch now that looks a little bit ugly but it works really nicely it's not gonna stick you in an infinite loop and instead if we jump press our button when the Catalans you'll no longer walk around you can see here we can use a lovely lovely buttons now the only thing that we we still need to set up here is a way to close them and you without using a button inside the widget and what we're going to do is because we've already got our game mode our input - mode game and you why we could just say gamepad face button right which is the B button on the Xbox controller or I'm pressed what we're going to do is go from the widget set visibility to hidden going to go from our play controller set input mode to game only you no longer need to be able to move around inside of our menu and we don't to be able to move this up around to the side of our menu while our characters running around because we don't accidentally select stuff in our menus and then from our character movement we're just going to set movement mode - okay no now we can do is we can run around we can press the button we can move around no I've got that one highlighted I press B it will close and we can run around again as you can see it's all working nice and tasty yay awesome so there we are love lovely pretty pretty nice Kiki Kiki what we're gonna just do here is we're just gonna add a little thing there because I noticed a little bit if we jump push and then we press to cancel it can't move until we press the B button again what we're going to do is inside of our third person character as we're just going to say we're going to check to see if a character's falling here so book the is falling again now obviously if you want to just make copies of these and bring them down here just so you've got less of this spaghetti that's fine it doesn't matter at all I mean he's down if he's not falling then do a thing but if he's falling when I can't be able to close the menu there we go that gives it now we are slight bug fixed on the fly well we do and they have it that's how we can set up basic um G / widget movement with a controller without using any additional add-ons or polygons for the engine it's quite a nifty little thing to do and it just makes things a little bit easier for you guys without having to study plugins and stuff so you have it obviously if you want to use different key binds you can if you want to set up specific inputs inside of your side of your project settings then you can but I'm just using basic button imports he excited needin to have special names or anything cos this isn't my project anyway thank you for watching there you go hopefully some of you guys are gonna find that useful see you guys next time

Channel: Dean Ashford

Views: 42,411

Keywords: Games, Video Games, Gaming, Gamer, Lets Play, PC, Console, play, playing, player, play through, play guide, guide, game guide, dean ashford, dean, ashford, widget, umg, gamepad, controller, game pad, xbox pad, xbox control, ue4, unreal, unreal engine, dev, game dev, developer, development, indie, student, teacher, tutorial

Id: G_kFa-V1rGs

Length: 18min 14sec (1094 seconds)

Published: Wed Jul 18 2018