No announcement yet.

Menu Navigation using gamepad or mouse and keyboard

  • Filter
  • Time
  • Show
Clear All
new posts

    [TUTORIAL] Menu Navigation using gamepad or mouse and keyboard

    Menu Navigation using gamepad or mouse and keyboard


    I've seen many different methods to accomplish menu navigation and I've probably tried all of them. They're good in some ways and broken in other ways. So I decided to create this tutorial to help anyone who wants to get started with menu navigation.

    You don't have to call the buttons and sliders "prefabs". I just decided use that terminology.


    1. Starting

    Create a new project. (I just used the first person template.)

    Create a widget (Right click in the content folder > user interface > widget blueprint)

    Name it "WBP_NavExample" or whatever.

    Then create a folder named "WidgetPrefabs"

    Make two more widgets in that folder named "WBPF_Button" and "WBPF_Slider"

    2. Button Prefab

    Open the button prefab widget

    Add a size box (400 x 60 or whatever)

    Add a button in the size box

    Add a text block in the button

    The hierarchy should look something like this

    The button itself

    Now in the graph tab create this

    3. Slider Prefab

    Open the slider prefab widget

    Do this

    The slider itself

    Create bindings for the slider and text block, then set both to the "slider value"

    On Tick, set the styles based on if the slider is being interacted with or not

    Cache Style and set bool on capture

    And add a function to toggle the visibility of the text

    4. The Navigation Example Widget

    Create this, or something similar. Notice how I used the prefab widgets? They're located in the "user created" category of the palette

    Make the grid panel wrappable. (Eg. You wanted to navigate from button 0 to button 2 by going left once instead of right twice)

    Here's how I handled the events

    Here's the button events collapsed graph. They're all handled the same. Get button > Bind event on pressed > fire events when needed

    5. Set up HUD for testing menus

    You can create a HUD blueprint class or in this case just use the provided HUD class

    This is all I did to add the widget to the viewport and test pausing the game


    Project files:
    Attached Files
    Last edited by deathclonic; 02-21-2019, 09:45 PM.

    Thank You !