[FONT=IBM Plex Serif]Menu Navigation using gamepad or mouse and keyboard
[FONT=IBM Plex Serif]Introduction
[FONT=IBM Plex Serif]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.
[FONT=IBM Plex Serif]You don’t have to call the buttons and sliders “prefabs”. I just decided use that terminology.
[FONT=IBM Plex Serif]Tutorial
[FONT=IBM Plex Serif]1. Starting
[FONT=IBM Plex Serif]Create a new project. (I just used the first person template.)
[FONT=IBM Plex Serif]Create a widget (Right click in the content folder > user interface > widget blueprint)
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]Name it “WBP_NavExample” or whatever.
[FONT=IBM Plex Serif]Then create a folder named “WidgetPrefabs”
[FONT=IBM Plex Serif]Make two more widgets in that folder named “WBPF_Button” and “WBPF_Slider”
[FONT=IBM Plex Serif]2. Button Prefab
[FONT=IBM Plex Serif]Open the button prefab widget
[FONT=IBM Plex Serif]Add a size box (400 x 60 or whatever)
[FONT=IBM Plex Serif]Add a button in the size box
[FONT=IBM Plex Serif]Add a text block in the button
[FONT=IBM Plex Serif]The hierarchy should look something like this
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]The button itself
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]Now in the graph tab create this
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]3. Slider Prefab
[FONT=IBM Plex Serif]Open the slider prefab widget
[FONT=IBM Plex Serif]Do this
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]The slider itself
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]Create bindings for the slider and text block, then set both to the “slider value”
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]On Tick, set the styles based on if the slider is being interacted with or not
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]Cache Style and set bool on capture
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]And add a function to toggle the visibility of the text
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]4. The Navigation Example Widget
[FONT=IBM Plex Serif]Create this, or something similar. Notice how I used the prefab widgets? They’re located in the “user created” category of the palette
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]Make the grid panel wrappable. (Eg. You wanted to navigate from button 0 to button 2 by going left once instead of right twice)
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]Here’s how I handled the events
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]Here’s the button events collapsed graph. They’re all handled the same. Get button > Bind event on pressed > fire events when needed
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]5. Set up HUD for testing menus
[FONT=IBM Plex Serif]You can create a HUD blueprint class or in this case just use the provided HUD class
[FONT=IBM Plex Serif]This is all I did to add the widget to the viewport and test pausing the game
[FONT=IBM Plex Serif]
[FONT=IBM Plex Serif]Resources
[FONT=IBM Plex Serif]Project files: GitHub - deathclonic/MenuNavTut