見出し画像

【UE5.4】ステージセレクトUIを作る


”東方”の難易度選択とか、”剣神ドラゴンクエスト”のステージセレクトみたいな、「特定のヴィジェットにフォーカスすることで、複数のヴィジェットが連動して動くやつ」です。




■ボタンUI作成


ヴィジェット作成


ボタン配置し、Is Variable
(テキストなくてもいいです)


イベントグラフに処理を組む

ボタン画像を変数化(親ヴィジェットから画像変更を行えるようにするため)
イベントディスパッチャー呼び出し(親ヴィジェットでイベントを配置できるようにするため)
(なんか詳細パネルからプッシュ時SEを設定しても音が鳴らないのでSpawn Soundする)




■ステージセレクトUI作成


Enum作成
ステージの数だけ列挙子を追加


ヴィジェット作成
ヴィジェットを開いて、さっき作成したボタンUIをステージの数だけ配置する
全てのボタンヴィジェットを
Is Variable
Is Focusable
(分かりやすいように色分けしておきます)


【赤ボタン(Stage01)→青ボタン(Stage02)】アニメーション作成

(中央に配置されるボタンが赤ボタン→青ボタンへ滑らかに切り替わるアニメ。
緑ボタンも連動して動かす。移動に合わせてサイズとか変えるとそれっぽくなる)

  

【青ボタン→緑ボタン】アニメーションも作成                                                                             


処理を組む




■完成


ヴィジェットをAdd to Viewport して確認します。


静止画だと分かりづらいですが、
フォーカス時に、正常にアニメーションが再生されればOKです。

プッシュ時イベントや画像の変更などは適当にやってください。



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