Announcement

Collapse
No announcement yet.

Menu Navigation using gamepad or mouse and keyboard

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    [TUTORIAL] Menu Navigation using gamepad or mouse and keyboard


    Menu Navigation using gamepad or mouse and keyboard

    Introduction

    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.


    Tutorial


    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





    Resources

    Project files: https://github.com/deathclonic/MenuNavTut
    Attached Files
    Last edited by deathclonic; 02-21-2019, 09:45 PM.

    #2
    Thank You !

    Comment

    Working...
    X