【UE4】Widget紹介 Panel編

Canvas Panel

・子Widgetを複数格納できる

一番ポピュラーなパネル系Widgetです。
新規でUMG作成時にもデフォルトでトップ階層に置かれています。

特にレイアウトに制限はなく、自由にレイアウトできます。



Grid Panel

・子Widgetを複数格納できる
・グリッド上に子Widgetを配置

Row, Column のパラメータがあり、各子Widgetのスロットで設定できます。

f:id:shuntaendo:20201110173707p:plain:w400


同じ場所に複数のWidgetを配置することも可能です。
その場合は Layer の値で描画順を制御できます。

Nudge の値を設定することで各グリッド位置からのオフセットを付けることができます。

また、Grid Panel のパラメータの Fill Rules から各グリッドの幅を設定できます。

f:id:shuntaendo:20201111120811p:plain:w700



Uniform Grid Panel

・子Widgetを複数格納できる

Widgetの個数に応じて自動で間隔を調整してくれる Grid Panel です。

f:id:shuntaendo:20201111170020g:plain:w400



Horizontal Box

・子Widgetを複数格納できる
・水平方向に子Widgetを配置

f:id:shuntaendo:20201111125841p:plain



Vertical Box

・子Widgetを複数格納できる
・垂直方向に子Widgetを配置

f:id:shuntaendo:20201111130205p:plain




Overlay

・子Widgetを複数格納できる

WidgetPaddingAlignment の位置によって配置を調整します。
Canvas Panel のように手動で自由に配置することはできません。



Safe Zone

・子Widgetを1つ格納できる

配置することでプラットフォーム別のセーフゾーン情報を取得し、パディングしてくれます。
モバイル端末などのノッチやホームバーなど「UI上では使用できるが、画面上には表示されない」といったことを防ぐ意図で使用されます。

docs.unrealengine.com




Scroll Box

・子Widgetを複数格納できる
・スクロールバー付きの垂直、水平方向に格納できるリスト

f:id:shuntaendo:20201111170849g:plain:w250


Scroll Box のパラメータからスクロールバーの挙動やスクロール操作の設定ができます。

f:id:shuntaendo:20201111172423p:plain:w700



Scale Box

・子Widgetを複数格納できる
・サイズが変わった際に自動で子Widgetをスケーリング

横方向に対してのみスケーリングするなどスケーリングのルールを設定できます。

f:id:shuntaendo:20201111174405p:plain:w350



Size Box

・子Widgetを複数格納できる
・子Widgetを任意のサイズにスケーリング

横・縦幅、最小・最大のアスペクト比などを設定できます。

f:id:shuntaendo:20201111180951p:plain:w400



Widget Switcher

・子Widgetを複数格納できる
・子Widgetの内、1つだけ表示する

Active Widget Index で指定された子Widgetのみ表示されます。

f:id:shuntaendo:20201111174930p:plain:w300

ブラウザのタブによるページ切り替えのようなUIを作る際にとても有用なWidgetです。



Wrap Box

・子Widgetを複数格納できる

Widgetを左から右に並べて行き、横幅を超えた子Widgetを下の行に自動で配置するWidgetです。

f:id:shuntaendo:20201111151506g:plain:w400


Widget紹介 Common編
Widget紹介 Input編
Widget紹介 Lists編
Widget紹介 Misc & Optimization編
Widget紹介 Primitive&SpecialEffect編





UE Version : 4.25.4-14469661