Easy gamepad/keyboard navigation in UMG


I am currently creating quite a lot of widgets that should support keyboard/gamepad inputs. Currently the only way to navigate through a series of widgets is by hardcoding how the navigation works between widgets. For a menu i would for example keep track of an index etc… With more complicated widgets it gets quite error prone. it would be great if there would be an easier way of doing this to get consistent behavior (especially when both mouse and keyboard come in to play). I noticed the navigation section in umg widgets, this adds basic options to define how you can navigate through the menu, but the focussing is not like you would expect. It shows a dashed border instead of the focus color you can define for most widgets…


So, if you set the** controls to be UI only** and **set keyboard focus **on the first button, you can actually navigate all the widgets that are in **the visible canvas. **Note that last part is important. For example, if I have a game with a start menu and a option menu from within the same UMG, I would set the canvas with the option menu to visible, and make sure that the start menu buttons are in a canvas of their own, which I set to collapsed.

That way, as long as you have focus, you get keyboard and gamepads up/down/left/right support.

One last thing, sometimes automatic navigation doesn’t work great, for example, if the buttons are in diagonal of each other. Make sure that they all** line up horizontally / vertically.**

Hope this helps.

Thanks! That already helps a lot. A few other questions though:

  1. How do you ensure the buttons show the focus color when navigating instead of the dashed border?
  2. How do you ensure keyboard focus stays correct? E.g. user clicking somewhere else?
  1. See this answer by CodeSpartan Gamepad/Keyboard navigation in UMG menus? - UE4 AnswerHub

  2. If the user is using a gamepad, they’re not clicking around. That said I believe there is a canvas mode that trap clicks. I’d have to test it first though. I let the user click but I make sure that if they navigate using the gamepad, it will keep working on gamepad. If they start clicking around then they can click the buttons and forget about the gamepads.

If you wanted great UX, you could remember the last selected button and bring back focus on clicks outside.

thanks for tips keyle.

  1. Does keyb/gamepad navigation give us similar to OnMouseOver events for buttons once we focus on it?
  2. What about mixed widgets types in one canvas. Wonder if it would work with scrollable list of buttons?
  1. No I don’t think so
  2. I believe it does work.