SYSTEM NOTICE

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

[UE5.4] Creating a Stage Select UI

シロナメクジ

This is for things like the difficulty selection in "Touhou" or the stage select in "Kenshin Dragon Quest," where focusing on a specific widget causes multiple widgets to move in sync.



■ Creating the Button UI


Create a widget


Place a button and set Is Variable to ✅ (text is optional)


Set up the logic in the Event Graph

Make the button image a variable (so the image can be changed from the parent widget)
Call an Event Dispatcher (so the event can be placed in the parent widget)
(Since setting the push SE from the Details panel doesn't seem to play sound, use Spawn Sound instead)



■ Creating the Stage Select UI


Create an Enum
Add an enumerator for each stage


Create a widget
Open the widget and place the button UI created earlier for each stage
Set all button widgets to
Is Variable ✅
Is Focusable ✅ (I'll color-code them for clarity)


[Red Button (Stage01) -> Blue Button (Stage02)] Animation Creation

(An animation where the button placed in the center smoothly switches from a red button to a blue button.
Move the green button in sync as well. Changing the size, etc., in accordance with the movement will make it look more authentic.)

[Blue Button -> Green Button] Animation Creation


Set up the logic



■ Completion


Add the widget to the Viewport and check it.


It is hard to tell from a still image, but
it is fine if the animation plays correctly when focused.

Please handle the push events and image changes as appropriate.


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