How to change the text accordingly when the button gains focus using the keyboard arrow keys?

Oriori_oriOri · January 28, 2025, 1:58pm

Hi, New UE5 user here. I’m having issue with button focus and keyboard input.

What I’m trying to make is similar to Smash Bro’s character selection scene.
ref: https://youtu.be/hjY2ZrauRX4?si=T1w1PEN_eKhi-oTq
When button is focused, NOT clicked, using keyboard input (up/down), I want the text to change accordingly. For example, in Smash bros, when “Mario” button is focused, lower half of the screen shows image of Mario, but when focus changes, it shows a different character in that area. I want to achieve the same thing.

This is what I have so far:

Since I manually set focus to Stage1_bttn, it initially displays “Stage 1!” as text, and prints “ONE”. However, the text does not change accordingly and prints nothing after that, although I slightly see the focus being changed by keyboard input.

I also have On Hovered function on the side, but that works only for mouse hovering.
I can’t find “On Focused” event in any of my button.

I would highly appreciate your help.

Everynone · January 28, 2025, 4:04pm

create a new widget with just a button (no canvas), an Instance Editable variable and an Event Dispatcher:

Overrride onAddedToFocusPath → call dispatcher, pipe in text

in your main widget, instead of native buttons, add your fancy custom buttons:

select all of them and flag them as isFocusable:

select each of them, and edit their text variable:

This is how you can associate data with a button - like selecting another character. Since each button is a standalone widget, you can add any variables and have the widget send them to whoever is listening. Here, it’s just text but it can be a class to spawn.

in the same widget, bind their dispatchers:

when adding the main widget, choose which button is focused by default (if any):

the result: