マウスやタッチみたいに直接ボタンを選択できないゲームパッドは、今ココ（現在地）を表すカーソルが必要になります。
カーソルの場所が選択候補地を示していて「ここ選ぶけどいい？」という状態です。
タッチデバイスが隆盛な昨今、そのうちコントローラ操作でのUIが「なにこの点滅してるやつ」みたいなことになるかもしれませんね。
遠い目をしながら「カーソルって呼んでた時代もあったな・・・」としみじみ。
さて、
カーソルですが「今ココ」というのが伝わればいいので、周りと比べて違いがあれば、「お？」となります。その違いに気付くことで注目させるシグニファイアともいえます。わかりやすい例でミッキーマウスの手袋みたいなアイコンがついたのを見たことがありますが、そこまでしなくても点滅したりカラーが変化しているだけでそれなりに伝わります。
かんたんなやつをUE4で作ってみました。
上から並べているのは子Widgetで、それぞれに２つの状態（見た目）を用意してあります。
ひとつは、カーソルの指している状態（SELECT）。もうひとつはカーソルの指していない普通の状態（DEFAULT）。
子Widgetを編集してUMGでアニメーションを作ります。
これを関数 で再生するようにします。
修正： 2020/6/13
作った２つの状態＝アニメーションは、関数を使わずカスタムイベントで呼び出すようにします
UI は状態遷移を扱う際にユーザーのアクション（キー操作）や、何かしらの条件がトリガーになることがほとんどです。なので「イベント」として取り扱うほうが、「関数」よりは用途をイメージしやすいと思います。もう一つ大事な違いがあって、関数ではDelayなどのタイマー系のノードが使えません。この記事を書いた当時は、アニメーションの終了を待って次は・・・みたいなフローを想定していなかったので、関数を使って解説していました。
<<<
アニメーションの終了を待たずに別のアニメーションを再生すると、変化の途中でブレンドされてしまうことがあるので、バッティングするとヤバいアニメーションを止めてから再生するようにします。
この２つの関数は親のWidgetから呼び出して使います。
修正＆追記： 2020/6/13 >>>
この２つのカスタムイベントは親のWidgetから呼び出して使います。
呼び出す側からみると、関数 も カスタムイベント も区別がなく同じように扱うことになります。どちらを選択するかは、呼び出される側の都合で決めればいいと思います。
TextBlockの中身を書き換える関数も用意します。
これは、イベントというよりは最初に１回だけ呼ばれる程度なので、関数にしています。アニメーション等の「時間」を伴った処理でもないでので。（初期化もある意味イベントとも言えますが・・・）
<<<
これで子Widgetはひとまず完成です。
追記： 2020/6/13 >>>
リストとして並べるための 親Widget は前回のこの記事↓がベースになってます。
メニューのラベル用に Text型の配列変数を用意してます。
変数は一度コンパイルすると Default Value（初期値） を設定できるようになります。
エディタの構成上、わかりやすいところに表示されていないので、それなりにルール作って意識付けや習慣化しないと見落としやすいです。
私は、下図のように、イベントグラフ上で 明示的にセットするのがお気に入り。
ゲームの仕様上、状況によって変動するのであれば、このままマクロや関数にするか、初期化用の関数に入れてごにょごにょすればいいのでオススメ。
配列変数から値を取り出しながら、値の個数分繰り返し処理をしてくれる便利な ForEachLoop ノードを使って、子のWidget を量産します。
真ん中付近、Create～ と書かれたノードは、元は Create Widget ノードです。 このノードはユーザーが作ったWidgetをセットして使います。セットするとノードの名前が変わります。その CreateWidgetノードにある、Return Value ピンから、Promote to Variableして、それを配列変数にして利用します。
この配列化した変数を使うことで量産された子Widgetを番号管理できるようになります。
右端のノードがマクロになっていて、内容は以下
<<<
子WIdgetを並べつつ 状態をDEFAULTにする関数を呼び出します（右下）
並べ終わった段階ですべてがフォルト状態になっています。
最後に、SELECT状態にする関数を呼び出します。
上の図はマクロで下図の右端につなげてあります。
このようになります。
今日はここまで、次は切り替えの処理を書いていきます。
