SYSTEM NOTICE

Auto translation by AI. Be sure, accuracy, nuances and authorial intent may not be fully reflected.
見出し画像

[UE5.4] Operating UI with a Gamepad

シロナメクジ

Create a "button widget that changes color when focused" and make those UIs operable with a gamepad



■ Creating a Button Widget


Create a Widget BP


Place a border, button, and text in the order shown in the image


Create an animation for "changing color"


Set up the logic for focus and other states.

Event On Added to Focus Path and Event On Removed Focus Path can be added from "Overrides" in My Blueprint (they cannot be searched via right-click).

On Clicked(Button) can be added from the [Details Panel] -> [Events] by setting the button widget to [Is Variable✅].


"Click Event" Event Dispatcher is created anew from My Blueprint.
(We won't use this here, but by calling the event dispatcher on the child side, you can call that event on the parent WBP side)


Create a Text type variable and set it to
Instance Editable ✅ (allows you to edit the value from the Details panel)


Text -> Create Binding
A function will be created automatically, so connect the Text type variable to the Return Value
This links the text block with the contents of the variable



■ Creating a Widget for the Title Screen


Create a Widget BP


Place a Canvas Panel, Image, Vertical Box, and "WBP_Button" (three of them).
(If placing a Widget BP, search for it in the palette search bar.)

Set all buttons to "Fill" to fill the gaps.


Change the text of the placed button widgets
(This will not be reflected on this screen, but it will be reflected when the game is launched.)


Set all button widgets to Is Focusable ✅
(Setting to accept focus)



■ Displaying the widget


Implement the logic in the Player Controller or similar
(It might be better to implement focus logic in the WBP.)



When you launch the game, it will look like this
(I added a blue background.)
You can operate the UI with a gamepad and also press buttons.



※ I want to remove the blue border when focused.

[Project Settings] -> [User Interface] -> Change [Focus Rendering Rule] to "Never"


*Cannot push only during the initial focus

Limiting the focus target to the WBP button widget instead of the entire WBP improves this


*The color changes even for the text

I don't know how to fix it


いいなと思ったら応援しよう！