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

[@DevEnabled]

In this video, we create a fully gamepad and keyboard ready menu including creating our own customised button class for a highly reusable menu system.

[@daveface69]

This was really helpful, I did change a few things in my own implementation which might be useful for others: Instead of using a custom button, I used a subwidget (a normal widget blueprint with a button and some text). This gives more flexibility like playing an animation when the button gets hovered / unhovered. It does add a few complications, like you have to send the 'clicked' event for the button out as an event dispatcher and bind each button's event in the owning widget, but that's not too much hassle. Instead of checking every tick whether the widget was hovered, I used the "event on added to focus path" and "event on removed from focus path" to do basically the same thing, except it's event driven.

[@GokdenizCetin]

Thanks!

[@kenyyovo]

hey man, i'm also using a subwidget for the buttons but i can't figure out how to set it up properly, is there any way I could get in contact with you?

[@tropicpixelgames]

This is the most concise tutorial on this topic available out there. Thank you!

[@masonmids]

YOU NEVER FIND SOMETHING THAT IS EXACTLY WHAT YOUR LOOKING FOR! THANK YOU

[@dennisverschuur309]

For the people that are wondering why the 'Set Keyboard Focus' isn't working at the start. Place a small delay before the node and it will work fine. Great tutorial, thanks!

[@luigi94z]

My god thank you, i spent like 2 hours looking for this

[@FriantAle]

3 years later in UE5 and still very appreciated hahaha

[@HyperCazual]

OMG where have you been my entire life? All your knowledge needs to be mine!

[@DevEnabled]

Haha, glad you are finding it useful. Remember knowledge transfers faster when leaving a like...

[@akhon]

Fantastic tutorial! I didn't know you could make button BPs. Your method of creating the menu is a lot cleaner and elegant than other tutorials I've seen.

[@DevEnabled]

ty. I might make an additional video to this, another way that seems popular is creating a Widget based Button rather than Blueprint. Both are good and just make changing a large number of things much faster.

[@tryphonmanu]

i was searching for a good tutorial on widgets used by gamepad, i found it, thank you .

[@ProGamer-dq7ii]

Hello! amazing video! I have a question, I am doing this in a pause menu instead of the main menu, and there is a problem, when I have the set game paused in the value of true the call to Start and the call to Check Focus is not done, can someone help me?

[@ascentslight_games]

8:32 Hey ! I wondering how i can change navigation Key (default space and enter for keyboard, or A X for controller), i found no documentation on this point :/

[@雷锋-d9v]

thank you very much, i have searched a lot of tutorials, only yours is the best one! this video perfectly resolves my problem with gamepad menu！

[@brianlaflamme1948]

Very concise AND thorough.. Great job dude! thanks so much for the knowledge!

[@StevenDiLeo]

Thanks for making this! Setting this up works great in my main menu, however in my paused menu it is not rendering BP_Button with the style. I assume because the game is paused, it's not able to run the custom event made in the BP_Button. I have tried adding my widget before and after pausing the game, I have checked to see if there is any ignore pause options in the widget class. I can't seem to figure out how to get this system working in a paused menu, any suggestions?

[@cryofravenia]

Same problem here, did you found a solution yet?

[@odinn1984]

Dude! Thanks for the tutorial! You made it so much easier than the other ones lol :)

[@MrManet]

OMG Thank you! Finally got it to work, after many hours

[@VictorBStan]

Interesting solution. And I'm trying it out. But I foresee it becoming very cumbersome when styling a bunch of different widget, like checkboxes, sliders, input select, option menus, etc. all these things that are part of a fleshed out menu system and need to work with mouse or gamepad. And It would get less performant with every new widget added that has a looping timer, I imagine...

[@blitzwood5768]

For 1player games this tutorial has everything. Very similar to what I've used. Now I'm trying to get player controller 2 to work on the menu as well but I think keyboard focus is only good for player 1 in Unreal.

[@MegaBizMan]

Great tutorial but how do you make the mouse cursor disappear when you use the controller? Everytime I try to make the cursor disappear I cannot use the buttons.

[@kamberhasan4245]

Works pretty well. thank you for the tutorial. If you want to use unique image for each button just create child of BP_Button

[@FunwithBlender]

How do you modify the default buttons, meaning navigate up and down how can i change that to right thumbstick instead of left thumbstick?

[@Oshie71]

Hovered color doens't work (ue 5)

[@FuNKYSPuNKYmusician]

Is there a way to have a sound play when keyboard takes focus using this method of button class?

[@karanbhakta8745]

Exactly what I was looking for. But When I Click right mouse button in open area instead of left mouse button it looses focus of the widget. How can I fix that?

[@50shadesofskittles9]

hello, I have searched but cannot find the playlist?

[@benediktornhjaltason7948]

I learned a lot here! Thank you

[@tayam92]

I tried implementing this method into my game and I've noticed that the gamepad would only give input to the menu only after the mouse has hovered over at least one of the buttons. How do I get the gamepad to be responsive, independent of the mouse? And how do I change the default gamepad input button X for On Clicked event to some other gamepad button?

[@chuichui8162]

Did you find out how to do that?

[@tayam92]

@@chuichui8162 Yes, in the end I bought a Menu System asset in UE Marketplace. Waaaayyy easier to work with. The asset Dev was also helpful. 😅

[@chuichui8162]

@@tayam92 Thank you very much! Will definitely check it out

[@coystt7233]

@@tayam92 which one did you get, there's lots out there, don't know which is good or bad, a recommendation would be appreciated

[@tayam92]

@@coystt7233 It's called Advanced Main Menu & UI System by Lazer Tale. The Dev is really helpful, with good supporting online documents.

[@fl260]

I learned a ton. As always, you're such a great teacher! At first it didn't work though. I had to add a "Set Input Mode UI Only" in the Menu Widget at the Event Construct, right before "Set Keyboard Focus" on the Start Button. After that, it worked like a charm! This is by far the best solution I've found for that problem on YT! Edit: One more important thing. Just remember that the "CheckFocus" function will still be running, unless your menu leads to another level or something. Otherwise, if it's a pause menu for example, your have to "Clear Timer by Function Name" when closing (or removing from parent..) the widget. To make sure it doesn't keep firing, just place a print string like so: imgur.com/a/jgCvdtf

[@ChrisHavok]

How did you go about setting up the clear timer by function name? If I open another widget, the settings menu, for instance, continues to fire yet doesn't re-focus once I return to the main menu.

[@MilanKarakas]

This works for me too. Thanks.

[@egementon]

Do you know how to disable left analog stick navigation? I just wanna navigate with D-pad. Help me pls.

[@real_crynex279]

How i can create a hover sound for the buttons and how can i create a hover event when i use the keyboard or controller to control the buttons ?

[@Roxas13XIII]

I have one issue: when I run the game, it selects the one I wanted as it should; however, when I try scrolling down with gamepad/keyboard the highlight color doesn't appear. It is still selecting it and doing what it should when executed (print statements), but the highlight color isn't showing. When I hover with the mouse it works, but not keyboard/gamepad.

[@mattmcduhhh]

I have the same issue and mine doesn't even check on the first or at least it doesn't show it did. The strings say otherwise.

[@denizorsel1029]

Were you able to fix this? After a year here I am dealing with the same issue.

[@Roxas13XIII]

@@denizorsel1029 No. I ended up scrapping this idea and found a different method. I'll try to explain it best I can: In the UI Graph: In event tick, I have a sequence. Sequences 0 and 1 go into branch statements. (Give them lots of room between each other) Getting the player controller, I check if the left analog stick or corresponding dpad button on the y axis is < or > +-0.3. For the negative values (pressing down on analog stick or dpad), connect the analog stick and dpad returns into an "OR" node, then into the branch from Sequence 0. In the branch after sequence 0, if True, go into a Do Once. If false, go into another branch block I have an int variable "Index" default value set to 0. There is another int value called "Total Number of Buttons". This is self explanatory. Set default value accordingly. If sequence 0 branch is True, go into a Do Once block. After "complete", go into a Set block for variable "Index". Here is what will go into that "Set" block: get Index -> +1 (add one) -> % total number of buttons. Set Index to the result of that mod value. // What the above line will do is scroll through each button, and if you're at the end and go up, it will loop back to the beginning After Set, get references to the buttons, drag off of them and find "set background color". Link Set Index to Set Background Color. Attach "Event Construct" to Set Background Color as well. All buttons will be attached to this. This sets the default background color (non-highlighted). After Set Background Color, connect to "Switch on Int". Index is your selection. Make an output pin for each of your buttons. On each int, get a reference to the button you want that number assigned to, then drag off and create another "Set Background Color". The background color here will be whatever color you want the highlighted color to be. Do this for each button. After each "Set Background Color", link them all to a single Delay node. I found 0.2 seconds to be comfortable. Set that to another Sequence block. You will need a Then 0, Then 1. Connect the Then 0 back to the Do Once statement from before into the Reset pin. We'll talk about the Then 1 later. Go back to the very first branch node from the first Sequence 0 connected to the Event Tick. We'll now do that False part of that branch. From the false pin, create another branch node. Do the same thing you did with the negative values for analog stick and down dpad, but with the positive and up dpad instead. From the True pin, create another Do Once node. (We won't do anything with the False pin this time). //Now pay attention here because it might get confusing, but the following is reusing existing nodes we made from before // You remember that math we did before with adding 1 to the Index variable and setting it? We'll now be working in that same area again now. From the Do Once, create another Branch statement. Put it underneath the Set Index node we made before. Using that get Index reference from before (the one where we have a +1 node on it), drag off it again and make a -1 node (the opposite) // This will scrolling up through your buttons. Here's where we have to make a check to make sure our value is above 0, and if not, go to the bottom button From the -1 node, do a < 0 check. Connect that value into the Branch statement you made before. Off the True pin, create another Set Index node. Get Total Number of Buttons, attach a -1 node to it, and set Index to that. (Since we're starting from 0, everything is offset by 1, so the highest value is total-1). Connect that Set Index pin into the Set Background Color node we made earlier (the one attached to Event Construct). On the False pin of that branch value, create another Set Index node Grab that -1 node from before (the one attached to the get Index node) and make a link to that Set Index. (the -1 node should now connect to two places) Connect that Set Index node to Set Background Color again. That Set Background Color node should have 4 execution wires going into it. Remember at the very end we have that final Sequence node with the empty Then 1 pin? Grab that pin and connect it to the "Reset" pin from the Do Once that's empty. Here's what all of this does: You assigned each button to a number. You have a counter "Index" to keep track of where you are. By pressing up or down, you increase/decrease that value. If you reach the end (top or bottom), it will go to the opposite end and loop around. Next we'll implement the action button to do stuff. On the Sequence attached to the Event Tick, from the Then 1 pin, create another Branch node. (I recommend bringing this down below everything else) From the Get Player Controller, get whatever button you want to be the input button (Was input key just pressed) Attach that return value into the branch. Off the True pin, create a "Switch on int" node. Index will be your Selection Create enough pins for each of your buttons. // Here's where you have to decide how you want to do it Code whatever you want your buttons to do and then attach them to these pins. I created custom events (right click -> create custom event) then referenced them for neatness. You can code directly what you want your buttons to do from here though if you want. I know this was a lot, but this is what worked for me!

[@denizorsel1029]

@@Roxas13XIII You sir deserve much respect. I will ensure this information shared across anyone who might need it. Thank you very much for the detailed explanation. It finally worked.

[@Roxas13XIII]

@@denizorsel1029 Glad to hear you got it working!

[@Shanobrowno]

This was actually, REALLY helpful! Thanks a bunch man :)

[@MilanKarakas]

Something not working right. I did not followed it completely since I need to use keyboard or mouse for exit question: "Are you sure to quit the game?". Where only option for now is mouse click. But, I want all possible ways; gamepad, mouse and keyboard. What I am doing wrong? Now, after implementing this procedure, I can move focus with the keyboard, BUT only after clicking to 'No' answer, which does nothing except showing message: "I want to stay...". This thing I need in the case of accidental keyboard input 'ESC' for exit the game. If not implemented, game will end no matter what. For now, it only works with the mouse, but it ignoring gamepad and keyboard. Any help? Please. EDIT: I wanted to ad keys 'Y' and 'N' for the answers yes/no, but no matter what... unable to find the solution.

[@MilanKarakas]

Okay, solved! After clicking to 'escape' button, it 'create UI Quit Game Widget', then 'add to viewport' and 'Set input mode to Game And UI'. And now it works either by clicking mouse on 'YES' or by pressing 'Y' on the keyboard. Until now, it was 'Set Input Mode UI Only' and then if widget is active, the game is frozen - including keyboard input. EDIT: To do exit on keyboard input with 'Y', there is just 'Y' keyboard input connected to 'Quit Game', but in 'UI_Quit_Game' widget, NOT in ThirdPersonCharacter. This way during the game only 'ESC' button is possible to cause that widget, not exiting by pressing 'Y' because widget is not called yet. After it is called, ThirdPersonCharacter BP is 'free' and 'UI_Quit_Game' widget is active.

[@bckramer97]

So much good info in here. Thanks for making this!

[@pixieshine1]

Everything I have is the same and It works for the most part. But when ever I move the joy stick it changes buttons but then snaps back and then also disappears after. I have no idea why its doing this.

[@DanielWL615]

Hey, I'm using the Unreal version 4.21.2 and up till 15 minutes into the video, it was all going great. I, for some reason, cannot get the "Start" Function to appear in the main menu widget section even though I followed the video. Any Suggestions?

[@pcoder9474]

same, did you ever figure it out?

[@KBOTGames]

I had this issue and found a solution, I originally made the button array variable before I made a custom button blueprint class. So there are a few things to do if you made my mistake, you have to replace your already existing buttons with the custom button BP you made and then start the tutorial again from the Event Construct in the Widget BP graph.

[@lovemeatsaonian7299]

Thank you for your tutorial, but how to switch buttons up and down using W and s keys?

[@LyoshaLozhkin]

Very cool tutor! Thank you! How do I make the buttons sound when I point with the arrows?

[@perfectlap9379]

Hey dev enabled. I can only get it to work with one button at the moment. What am I doing wrong here?

[@flyingtruck5301]

Mouse curor cannot be hiding after place a big bg button( doesnt working). Is there a way to fix this?

[@flyingtruck5301]

ok solved. set default cursor to "none" Under the behavior settings of big bg button

[@FabriceNatario]

Hello, Thanks a lot for this useful tutorial! it helps me a loooot! i'm still wondering about 3 things: - how can i leave the focus on the button when i (re)use the mouse instead the keyboard? Actually, the behavior is more like with a controller, it means always keep the focus on a button in the page. But with a mouse, the "hovered" state should be valid only if the button is really hovered. How can i figure it out? - In the same time, if i use the gamepad (or keyboard), is it possible to hide the mouse cursor? - It exists another way to (re)set the focus on a button when i lost it because of the mouse? thanks again for your work and your answer.

[@georgebradley6521]

Implemented the system but it seems to be not working on my side

[@rekware9320]

Well done mate! Handy as!!

[@Nemesis_HamdyEisa-Type]

When I followed this tutorial while using 4.24, the mouse input only works when clicking on the background button☹

[@joshuasanderson7359]

Same in 4.23. :(

[@joshuasanderson7359]

It works as expected again if I turn off the CheckFocus function (don't start the looping Function by Timer). I think buttons must be doing some kind of check that their style has remained the same between mousedown and mouseup when detecting a click?

[@joshuasanderson7359]

The issue is coming from setting the Keyboard Focus when hovered. Do a Branch before setting keyboard focus and only do it if the button does not already have keyboard focus and the button will work correctly again!

[@FabriceNatario]

@@joshuasanderson7359 hello, can you illustrate your last comment ? what i should exactly put on this branch ? Thanks a lot

[@hanysek95]

Hi, really appreciate the tutorial.. but I have one thing.. if I want to add textblock inside the BP_Button, how should i do?? If blueprint inherit from Button class, there is no switcher to designer. Thanks!!

[@eyechedelia]

This tutorial helped immensely, but I have to ask, how would you set up this system with ComboBox integration? I tried to somewhat simply copy + paste the code into the ComboBox (string) BP, but the set style nodes seem to only work with buttons

[@n1lknarf]

is there any way to determine whether the controller connected is ps4 or xbox?

[@matthewlamburn4378]

great video will help me a lot for my final year project

[@fainterstream8035]

When I tried to get the start function into the widget it said that button object is not compatible with BP button object

[@KBOTGames]

I had this issue and found a solution, I originally made the button array variable before I made a custom button blueprint class. So there are a few things to do if you made my mistake, you have to replace your already existing buttons with the custom button BP you made and then start the tutorial again from the Event Construct in the Widget BP graph.

[@rodrigodias4251]

Completely helpful! Thank you so much for this great tutorial!

[@crossmr]

I wish you'd done more of these. Do you have any solution for making buttons that are not square? I know you can put an image on it, but the actual button remains square. Any thoughts on making custom shape buttons?

[@willlham1]

Hey I'm a bit late but I'm pretty sure you can add a button turn opacity to zero. Add an image on top of let's say a circle and it should only show the circle part of your button. It may still be clickable in a square shape though. There will be a way to solve that. I'll have a look and update if I find 1. At least now you can have a button visually shaped how you'd like.

[@titouchose6534]

Niiiiice! I'm trying to do some multiplayer pause menus. Multi just add a lot of aches to the head.

[@DevEnabled]

Yep. MP is usually a huge pain in the ass.

[@vladafanasief5064]

Really very cool! Buuut, how to do button select sound by key focus?

[@ChrisHavok]

In the Button_BP, go to "Class Defaults." In the Style section of the Appearance tab, you will find the "pressed" and "hovered" sound options.

[@vladafanasief5064]

@@ChrisHavok thx :)))))

[@thequazzman]

Is there any way to disable the mouse input altogether and add functionality for button traversal using WASD?

[@tebs1989]

Thank you! Very clear and usefull..

[@notogomery]

Thank you very much for this video, I've been able to make a strong and simple menu, but I tried to transform this into a pause menu but that couldn't work out. Having the game play will allow the arrays the function but if the game pauses, so does the arrays.

[@FabriceNatario]

hello, did you find a solution to allow the game to be in pause ?

[@notogomery]

​@@FabriceNatario I did but hooo boi it was a long journey. I found a free UI Navigation plugin for UE4: www.unrealengine.com/marketplace/en-US/product/uinavigation They have a tutorial and a discord to help out with any issues :)

[@FabriceNatario]

@@notogomery Ha nice Thank you! So you used this to solve the issue or you found another way too?

[@notogomery]

@@FabriceNatario This is the only method that worked best for me. Also, the UI nav widget doesn't support On Pressed events but UMG detects them so I just made my pressed events a visibility animation instead :)

[@2DBrando]

Awesome work thanks for putting this together it's a massive help!

[@TheArtyur2006RU]

It's not working, when game paused, but I need a pause menu with this. Heeelp

[@cryofravenia]

Same problem here, did you found a solution?

[@nickstruyf]

Great Tutorial! The Community thanks you! I do have a small problem however: it only selects the default ('start game') button AFTER i click inside the window. So without the first mouse click it still doesn't select a default button...

[@DevEnabled]

Thanks Nick. I'm not sure if that's going to be just an editor problem that might be solved if you build the project or play it in a new window instead of the editor as that's a well-known editor play annoyance. If it's not that then there is the "Set Input Mode UI " node which will automatically start with the window focused.

[@CataGryph]

Sorry to butt in but I had the same problem and resolved it by setting the widget to focus to the button widget on the Set Input Mode - UI Only node.

[@joevillarreal192]

Great tutorial I almost got everything to work, except the buttons won't change color when being selected :/ I tried just about everything. The controls work, though! I'm able to move up and down using the gamepad and keyboard - but they stay the same color. If anyone has had similar issues, lmk!

[@MrDevonParsons]

Super helpful. Thank your sir

[@DeathClonic]

There's a problem with timers not working while the game is paused.

[@DeathClonic]

The way I fixed it, was making a function in the button called "tick", then in the widget I made an array of the buttons on construct, then I connected the event tick to the tick function for the buttons array.

[@stuartwright2531]

@@DeathClonic Not to be rude but any chance do you have some screenshots of how you set this up? I have the same problem and tried to replicate your solution but no luck :/

[@StevenDiLeo]

@@DeathClonic I did this, and the buttons are now rendering the style, but I can only choose the first option. Perhaps something to do with using the widgets tick?

[@jesse2tube]

@@DeathClonic Great!!!

[@imposblwer2868]

Great Video ! Thank you!

[@shimmentakezo1196]

When I set keyboard focus on my button and check if it has focus, it says false, lol I think I'm gonna past next 4 days trying to figure how we can set focus on a button, it would be convenient when opening the menu for example, but maybe not possible

[@shimmentakezo1196]

@ThePackAddict No I mean it works, the button was focused, just "is focused" returned false.

[@matthewlamburn4378]

quick question, ive had it working before but now for some reason i can only get the keyboard to select the play and quit, but wont now highlight or select the controls or credits buttons? any ideas?

[@matthewlamburn4378]

nevermind, i deleted the inputs into the array and re added them and it seams to work again

[@AC-cw4sk]

how do you synchron the text to the middle of the button?

[@willlham1]

Do you mean centre the text? If you pause at 6:15 can you see those squares under padding that is your alignment options. The next section down (appearance) has an option for justification that also helps align text.

[@GokdenizCetin]

Thank you

[@vogita78]

I have a question. Is it possible to bind one of these buttons to where if it’s pressed it’ll execute an animation montage? I would really like to know. From anyone, thank you :).

[@DevEnabled]

Yes of course. You might want to try a Google search for something like, UE4 trigger Animation Montage. It's not a difficult thing to implement but you're not going to be able to fit or get clear instructions in a YT comment.

[@vogita78]

Dev Enabled Wow, wasn’t expecting a response! Thanks for the reply! I wasn’t looking for instructions, only if it’s possible or not. Thanks again! This tutorial solved a problem I was having.

[@DevEnabled]

@@vogita78 No worries. It's essentially how you can trigger an attack or something like that on a button press. It's the montage system which is a little difficult to explain in a message so hopefully, that sets you in the right direction though. And great to hear the content has proven useful.

[@vogita78]

@@DevEnabled Right! Totally! I have a series of references i can study as far as montages and believe me it has!

[@RandomGuyyy]

Thank you. This was very helpful.

[@taylerchristensen1247]

Thank you! Very useful

[@ronnieochero]

LEGEND!

[@VictorBStan]

I managed to take some ideas from this tutorial and combine them with the concept of "Widget Templates" docs.unrealengine.com/en-US/InteractiveExperiences/UMG/HowTo/WidgetTemplates/index.html. In order to get past the really convoluted use of arrays to start a timer to fake event tick in the button blueprint. Basically, just make simple button widget and use the same styling code as in this tutorial. In the widget template you made you have access to all the regular events in UMG, so you can hook it up to Event Tick, and it's now clean and self contained, no need to use arrays and loops. See the Unreal documentation link above on how to hook up event bindings, if you need to.

[@melodicfish7833]

Awesome thank you!

[@alexandroiceman6707]

Useful video!

[@DevEnabled]

Great to hear!

[@nikolaykataew1005]

Thanks!

[@zenbillystudios9454]

LOL... stupid Windows @ 15:40

[@elgrekko9634]

Very good tuto but you have strange sounds behind you while you recorded your video ! horrible !

[@DevEnabled]

That was a budgie playing with his toy. His name was Pixel.

[@elgrekko9634]

@@DevEnabled I managed to use gamepad in my different menu, but sometimes, I need to point the mouse cursor the first time on any button to activate the gamepad navigation ! I don't know where the problem comes from ! any idea

[@adandaniel7607]

hey dude, i need help plz

[@aleksboboychev]

Thank you!