[UE4] [UI & HUD & UMG] UIの基本_UMGってどう使うの？サイズが違う画像を並べて、サイズを動的に変える / Initiative Barの実装

 僕が聞きたいんですけどね。UIの作り方。勉強中です。

上の画像がダッサイのはご容赦ください。テスト用なんで・・・。

本日のゴール

各陣営のアイコンを表示し、現在アクティブな陣営のアイコンを大きく表示する

これをイニシアチブバーと呼ぶみたいなんで、これからそのように呼称します。

参考URL

ぶっちゃけこちらを見ていただければ私が言いたいことはだいたい終わります笑

[UE4]ＵＭＧのお便利パレット解説

https://historia.co.jp/archives/5322/

【UE4】Widget紹介　Panel編

https://shuntaendo.hatenablog.com/entry/2020/11/11/230000

おおまかな流れ

3つのUMGを作ります。

名前はなんでもいいんですが、

1. Add to Viewportする、メインのUMG。ここでいうとHUD_Main
2. イニシアチブバーのUMG
3. イニシアチブバーに表示する画像(アイコン)のUMG

こういう構成です。

なんでこんな構成にするの？ということなんですが、こういう構成にしたほうがはるかに楽です(当社比)

それぞれのUMGの作り方は、右クリックして下記の通り選んで終わりです。

UMGの基本的なつくり

UMGには親子を設定することがほとんどです。

親のUMGのコンポーネントの、下に子供のコンポーネントを設定することで位置とかをいい感じにします。(語彙力)

実践1 (アイコンのUMG)

まずはアイコンのUMGからいきましょう。

構成はこんな感じにします。

親　「SizeBox」→「ScaleBox」→「Button」→「Image」　子

というような感じです。

それぞれは、上の方にあるパレットの下の検索窓に「SizeBox」と検索すれば出てくるので、それをヒエラルキー窓までドラッグアンドドロップで引っ張っていけばいいです。親子設定をするときには、親のところまで引っ張っていけばいいだけ。

まずSizeBoxですが、これはサイズを変更することができます。

ブループリントから動的にサイズを変更できるのがいいですね。

ScaleBoxですが、これは親のサイズに合わせて子供のサイズを自動的に制御します。

Buttonはあってもなくてもいいです。ご用途に応じて入れてください。押すと何か起こせます。

Imageはアイコン画像を表示します。

今回は、アイコンのサイズを動的に変更する必要があるので、SizeBox→ScaleBoxの並びが非常に重要です。この順にしていないと、サイズが自動的に変わりません。

続いてプロパティを変更します。

Size Boxのプロパティ

Scale Boxのプロパティ (変更なし)

Buttonのプロパティ

Imageのプロパティ

Buttonは好みがあると思うので、好きに設定してほしいです。

Buttonがない場合は、Imageのプロパティを上記のButtonと同じ設定にしましょう。

続いて、ブループリントを修正します。

ブループリント

Pre Constructに、上記のようにつなげます。

ポイントは、Imageに対して「Set Brush From Texture」をつなぐことです。これによってImageに画像を設定することができます。ノード名はSet Imageとかじゃないんですね。

Match Sizeはチェックしておきます。これで画像がScale Boxにフィットするように表示されます。

※画像を動的に変更する必要がなければ、Imageのプロパティで設定してもいいと思います。

これでアイコンのUMGは終了。

実践2 (イニシアチブバーのUMG)

これは見た目はめっちゃシンプルです。

これだけ。HorizontalBoxは、子供を水平に並べるボックスです。

早速、プロパティで「Is Variable」をオンにしましょう。

特に色々設定しなくても、勝手にいい感じで並べてくれます。子供と子供をいい感じで離したい場合はPaddingを設定すればOKです。

ちなみに、水平に並べるんじゃなくて、自動的に2段とかに表示したい場合はWrapBoxが便利です。

問題は、ブループリントです。

どちゃぁ

全部解説するのもあれなので、要点だけ。

この3点がセットですね。

まずは一番左端の「Create Widget」で、先程作ったアイコンのWidgetを作ります。

そして一番右のノードである、「Add Child To Horizontal Box」ノードに繋ぎます。このノードのTargetには、もちろん先程作ったHorizontal Boxを繋ぎます。Contentには、Create Widgetから出てくるReturn Valueを繋げばOK。

真ん中は何か？

後で、作ったアイコンの大きさを制御しなければならないわけですが、そのためにアイコンを指定してやる必要があります。そのためのリストを作ってます。

リスト自体はSet {} でも、Arrayでも、Mapでもなんでもいいです。お使いの状況で設定しましょう。

次に、動的にサイズを変更する部分です。

Aで、サイズ変更の際のEventDispatcherを紐付けしています。ここはご使用の環境に合わせて、CastでもBPIでもいいと思います。

BとCで、サイズ変更をしています。

Set Width Overrideで、Size Boxの横幅を設定します。注意する点としては、つなぐのは先程作ったアイコンのUMGそのものではなく、UMGの中にあるSize Boxです。あとは大きさを指定しておわりです。

Bで前の陣営のサイズをもとに戻し、Cで現行の陣営のサイズを大きくします。

ここの処理は、アイコンの方のUMGに書いてはいけないのか？

結論：書いてもいいです。

Event Dispatcherを受け取り、自分が条件に合うのかどうか調べて、自分自身の大きさを制御します。可能です。

そうすれば、リスト化しないでも済みますね。どっちのほうが処理が簡単でしょう？

実践3 (メインのUMG)

これはめちゃシンプル。アンカーを真ん中に設定して、「Border」を導入します。

あとは実践2と同じく、今度はイニシアチブバーをCreate Widgetして、Add Childで、先程のBorderをTargetに繋ぎ、Contentに、イニシアチブバーのReturn Valueをつないで終了します。

これでいい感じに動作するはずです。

あとは忘れずに、このWidgetをAdd to Viewportしてくださいね。レベルブループリントでもどこでもいいので。

では今回はこれくらいで。お疲れさまでした。