[UE4]UE4でアコーディオンメニューを作る

はじめに

UIでこんな感じのメニューを見たことがあると思います。
https://webdesignday.jp/inspiration/technique/css/5316/

今回は横に広がるアコーディオンメニューを簡単に作成してみようと思います。
UEにはExpandable Areaというまさにアコーディオンにうってつけのオプションがありますが、上下にしか開閉ができそうになかったため、アニメーションで自作します

1.UEを起動し、WBP(ウィジェットブループリント)を作成し、UIを仮置きする

ユーザーインターフェイス > ウィジェットブループリントを選択

UIを適当に作成します

この赤枠あたりでアコーディオンするように作成してみようと思います。

親のUMGと別に子のUMGを作成したいので、赤枠の位置にCanvasPanelを置いておきます。

2.アニメーションを作成する

ExpandedAreaをアニメーションで動かしたいので、トラックを作成する

0秒の箇所には
Pivot→Xに0,Yに0
Transform→スケーリングのXに0.0、 Yに1.0を入れる

１秒の箇所には
Transform→スケーリングのXに1.0を入れる

親ウィジェットのphoneボタンを押下したときのイベントを設定する

※ポイントはFlipflopで開閉を表現、
PlayModeでForward,Reverseでアニメーションの再生、逆再生を変えること
ExpandedAreaにAddChildでWBP_Phoneを子ウィジェットとして追加する
※先に3.子のWBPを作成するの子ウィジェットの追加だけすませておいてください

3.子のWBPを作成する

適当なサイズのイメージを配置

レベルBPに親のウィジェットを表示するよう設定

結果

だいぶ駆け足になってしまいましたが、以下のようなアニメーションが完成します

※gifがなぜか貼れなかったのでご容赦ください。。。。

今度はもっときれいにUI周りを表示していこうと思います。