[UE5] UIレイアウトのはじめ。ウィジェット作成と使い分け

みなさんこんにちは。

今回ご紹介するのは、初心者向けの基本的なUIレイアウトの方法です。
UIデザイナー以外の方でも、ちょっと見た目を入れて確認できたらと思うシーンがあるかと思います。
そんな時にどのパレットを選んで配置すれば良いのか、はじめの部分をお伝え出来たら嬉しいです。

まずは親Widgetを作成し、次に各パーツ用の子Widgetを作成します。
親＝子Widgetを配置する用のWidget。すべての要素を持ったメインとなるものです。
子＝画面上に表示するパーツ単体、もしくは一塊などの小さな単位で配置したWidget。親に対して複数個作成されます。
命名時に分かりやすいように「親＝WBP」「子＝W」と頭文字を分けています。

Widgetを開いてみました。この画面の場合、今見えている場所が親Widgetとなっており、右上のパーツ、真ん中のウィンドウ、左下のパーツという３つの子Widgetが配置されています。

では子Widgetから見ていきましょう。

今回、子WidgetではOverlayを使用して作成しています。
OverlayはPaddingで数値を指定して使用できるため、画面を整えやすいです。
また、親Widgetに配置した際も見た目のままのサイズと位置でいてくれるため便利で、右上のタブからDesiredで範囲指定すると作業しやすいかと思います。

細かいまとまりを作る際に使用することが多く、お知らせタイトル部分でも使用しています。
ここはタイトルの文字数によって枠が伸びていき、一定の長さまで行くとフォントサイズが小さくなります。
これはTextをScaleBoxとSizeBoxで包み、文字数によって長さとサイズが変わるようにしています。

ScaleBoxの設定▼

SizeBoxの設定▼

HeightOverride→高さをこの数値に固定
MaxDesiredWidth→最大でこの数値まで大きくなる
今回ScaleBoxの設定をDownOnlyに設定しているので、設定した値までは枠が伸び続け、それ以降は文字サイズが小さくなっていきます。ローカライズなど日本語と文字数が変わる場面での使用が便利です。

これらのText一式をOverlayで包むことで、一つの塊になります。
Textの下に枠となる円形マテリアルを置き、横の範囲を全面にしてあげると、このOverlayの長さに応じて横が伸びてくれるようになります。
これはSizeBoxの縦横で固定する場所を変えると改行するほどに自動で伸びる枠にもなります。

子Widgetとしてパーツを作成したら親Widgetに配置していきます。
親WidgetではCanvasPanelを配置しています。
Overlayとは違い、アンカー設定があるため16:9以外のモニターでの表示を想定した変化にも対応することや、各パーツの配置を視覚的に行えるのが特徴的です。
上下のパーツはアンカーをそれぞれ角に、ウィンドウは中央に指定しています。

こうすることで、画面が伸びた際もそれぞれがアンカーからの位置を守っています。
ボタンガイドなど、下側に位置を固定したいもの等はこうしてアンカーの位置を考えてあげると分かりやすいですね。

21：9の画面比率だとこう見えます▼

最初のウィンドウとボタン配置の関係を守りたいという場合は、ウィンドウが中央起点にしているのでそれに合わせてあげるといいかもしれないですね。
他にも画面の比率に合わせた長さを保ってほしい等の場合は、左右からのアンカーを指定する等その時々でアンカーの位置は変わってくると思います。

位置関係を保ったままの21：9の画面です▼

今回は本当にはじめの部分に触れてみました。
やり方は色々あるかと思うので、一つの参考になれば幸いです。