Download

Menu Navigation using gamepad or mouse and keyboard

[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]
https://lh6.googleusercontent.com/LAKC129A1vKy5gTKXIfIuTjchlCIXPslBaPYur07lMRCmnAovlzQCzilTYjW98pbYHxTbd1ktUiidbrTCwpe3iP2Ov5rzebLEsiMehi8p3Cw5nQRDRGfyJAKclAu-nvtu7LFnI7B

[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]
https://lh4.googleusercontent.com/CKDK8PMyviJjIe_bLFuxE7coEjFcrXzQII9zMNDywqpx8RgSI7XnLxXHXO6bKhUFMNUpO0i5oacHSigtjR0hSdHAfj6kfBsNutbJklIqMMW53WtOzkt0Id2SYBlyi8gE7iu5uN-V

[FONT=IBM Plex Serif]The button itself

[FONT=IBM Plex Serif]
https://lh6.googleusercontent.com/Jj3FmzOb0vx-x0ybGAMolXljQWZzvUxfdrgOgXoXGaoL-iuzFfvI8ZM9fZXm73p3NGrUO4sfdiKfA76KzXp9_vpsHtIqgDYxJbD7Wtq6uTuRidDtvpYqJbeiOGiD5zK1QipmMS3h

[FONT=IBM Plex Serif]Now in the graph tab create this

[FONT=IBM Plex Serif]
https://lh4.googleusercontent.com/grPtqIM_JTR-zY4gjomJICYD-nID7DMXUB2gXXSD5YTXi3rZQbc1-pHWhkySB9llioRlpnd9MXsg-doj9bagHroO5ghoFkvZan_-5D5IbFfRC9l54vtGiXkw1ANCFzqdDoHg1bey

[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]
https://lh6.googleusercontent.com/bJ8Ed3SRegH5q9RN21sy6iMemGl6pYSenxv09JE6xxgQTt-tk29C8cbaUAUZzPLAA1aIy3lKFI0ch3ekKCZUiQlDwagNbLWpwFCV1VWTA1JW08wdSYjoUL94zhL-15iPMyvOpF9C

[FONT=IBM Plex Serif]The slider itself

[FONT=IBM Plex Serif]
https://lh4.googleusercontent.com/47VgpHSi1fsTnpjWJpC-tuaHosOlhY09VVrzTliajveNLuc67gl6MUGIUdkvlh-9ArpUDnvoBj1LOI7HB9idS0d83A7UsrNk_GG6gNfbO1r-6asq-M82nYByurVomtA_UItWIorz

[FONT=IBM Plex Serif]Create bindings for the slider and text block, then set both to the “slider value”

[FONT=IBM Plex Serif]
https://lh5.googleusercontent.com/1jUk3MHDvzPZtUMkjAwn1oVOKxXb7SIdj9-7iE3xYBybLF4i8Ww-w7env_GAlLllC-BPcs6Z-c7v5r9NuB-zrsxsMiFFNYagTEyPIxQaqEIo1fdyyVYlRcB9UG_hA5otFlmtCoqw

[FONT=IBM Plex Serif]On Tick, set the styles based on if the slider is being interacted with or not

[FONT=IBM Plex Serif]
https://lh4.googleusercontent.com/5rAPUWw3KctNBaWCy-wcDEov4d8eLzPWWY_KkHJ85rcSQI4brgDAXFP0ST9Jj4YDImW4sUQmHZPVyNDrF8OC-LcLhEsjBrE8mOIcydEEeU8GuE-Rhtz9IkuyvmEOAVL0qepCCzX2

[FONT=IBM Plex Serif]Cache Style and set bool on capture

[FONT=IBM Plex Serif]
https://lh4.googleusercontent.com/H_WQuWOr9LI8avHnAO0HFbGAfgmxPz1goGhyAUS6dq6NRP0Uf2HXDgSW3UIHmoMJC9aBuzepMsgXgBZV1KkeG-VFTEkyXmaWcY2JfEw8gD9A6BQqiNCYrqjnoYMCJd5Chz0EHUo3

[FONT=IBM Plex Serif]And add a function to toggle the visibility of the text

[FONT=IBM Plex Serif]
https://lh5.googleusercontent.com/hKuGvTj7iLqQIghOH0XUfztY1NcqVZIaIK4zydmba7rkz4OTVHvjOUmcUBLMQYnAhwPV8yE2UAKKOSwHpYV45VFPhJ2-VWFq35obafYXXhdbQnYUfl9hNC-C80C6sjieb170iZYY

[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]
https://lh3.googleusercontent.com/cbHUZW1-e3ZfKo_qnvL6H_LZufn8KRDrT9-rFdtqM7uPAkZBl2ux6dmgPMdb3v7ZGvUbQeSQJakK8WztecVO0DjEow6WFoXsQO4IM1gMqd8VZAnP8uly5T4vmg26VBUteUI7fpsW

[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]
https://lh4.googleusercontent.com/SVodFtn_44PbvpkYP3cQXiFFvFSwa_QyxjVN41RNH1Se759fzS0zwrIewltbqzG6YJSC2Ud7bO92pLYazHra-oKBeZrqmr7WUM4Oi1N6aJwET9UVSfEeA4TBR675uJIJdFrRTV5U

[FONT=IBM Plex Serif]Here’s how I handled the events

[FONT=IBM Plex Serif]
https://lh4.googleusercontent.com/XWJeBm-m8WX1BYAxVf_ceXA9_aVBAXOOI1xNPLC-QzjqqtXdFCOpiGYsnYMunlGdYL4U3FxliRzhq9A8L0K55FKpcAmuw_daRyPA8xDm9chfMCmYpS1RDAiokOi-kvoJktJUN3mm

[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]
https://lh5.googleusercontent.com/E3ZEuAFhHAcShPQn63PWnnITs9R2EuaigVxXQC7haGBo7xtNV2c_i9ELkRkBAvfErR33C9kvgOsixzvN7Bs_zWoZbRfjClKbECQNDTmLvxRTm7_HoAexQIykqtG2aLzO7aTu0Ck3

[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]
https://lh3.googleusercontent.com/jGyFh1_1QwfncZbx6fNpJ_qT7V4aglemecnYx9ALIQ3oL_-k5YYOzSojIcF4N8L5Vow_Yn2cdiU-MMzOIoKxITHXB_4sqGBGnnsAueb8dJI_PzqfVcxQua_c3ziQHRkediPXHDSW

[FONT=IBM Plex Serif]Resources

[FONT=IBM Plex Serif]Project files: https://github.com/deathclonic/MenuNavTut

Thank You !