【UnrealEngine】レイアウトが崩れないウィジェットの作り方

はじめに

UnrealEngineでウィジェットを作るときに、スクリーンサイズが変わってもレイアウトが崩れないように作りたいですよねぇ。
historiaさんの記事を読んで作り方はわかったのですが、それぞれのウィジェットの意味を自分の中で噛み砕きたくて記事を書きました。

historiaさんの方法は直観的で、UI初心者には実装しやすいですが、Xで最適化に関するご意見をいただいたので最後に追記しています。

※「自分用のメモをちょっと綺麗にして出してる...」くらいのノリなので、わかりづらい部分もあるかもしれません。X(Twitter)なりコメントで質問は大歓迎です。

対象者

この記事は下記のような人を対象にしています。

• 駆け出しUnrealEngineエンジニア
• WBP初心者

テーマ

レイアウトの崩れないウィジェットの作り方を理解しよう
👉ウィジェットの最適化の話もいただけたので追記

結論

ポップアップなどのひとまとまりごとに、

• Overlay
  • SizeBox
    • ScaleBox
      • Overlay
        • コンテンツの中身を格納する

こういう階層構造にしたら使い勝手が良かったです。

詳細

Overlay

子ウィジェットを複数格納できます。
PaddingとAlignmentによって、位置を決めることができます。
子ウィジェットのサイズについては、子ウィジェット側の設定に基づいて決まります。

Size Box

子ウィジェットのサイズを設定できます。
親ウィジェットのOverlayのサイズと1920p*1080pとみなして設定すると期待していた見た目になりました。
これがあることで、下の階層のパーツを丸ごとサイズ管理することができます。
これを挟まないと、「ポップアップを丸ごとサイズ変更したいのに、パーツごとに調整しなきゃいけなくて大変💦」みたいなことが起きます。

後に追記しますが、SizeBoxは負荷が高いみたいです。Spacer使ったほうが軽そう

Scale Box

子ウィジェットのレイアウトが崩れるのを防いでくれます。
これがないと、スクリーンが小さくなった時などのタイミングでUIが崩壊します。

↑ ScaleBoxの有無による挙動の違い

Overlay

この子ウィジェットに、構成パーツを格納しまくったら完成！

ちなみに、パーツのデザインをPhotoshopなどで作る際は、スクリーンサイズが1920p×1080pの想定で作成して、そのまま出力するのがオススメです。
Overlayに配置する時、image sizeに画像のサイズを設定すれば、画面全体に対しても正しいサイズで配置されて楽ちんです。

追記！最適化の話

記事を公開したところ、最適化の観点のお話をXでいただけました。

簡単に要点をまとめると、

• そもそもSize Boxは負荷が重い
• Size BoxとScale Boxを組み合わせると、さらに処理負荷が重くなる

ようです。
SizeBoxの代わりにSpacerを使用することが最適化の観点では推奨されているみたいです！

となると、

• Overlay
  • ScaleBox
    • HorizontalBox
      • Spacer
      • Overlay
        • コンテンツの中身を格納する
      • Spacer

とかが良さそうですかね！

おわりに

というわけで、レイアウトが崩れないウィジェットの作り方、、、からの最適化のお話でした。
動いたらヨシ！👈🐱⛑
と思っていましたが、ちょっとした工夫でゲームが軽くなるならそれに越したことはないですな！
それでは！

参考記事