昨日は@s_ssk13さんのリダイレクター ～消えないゴミファイルの謎～でした．
UMG(Unreal Motion Graphics)は，タイトルメニューやオプション画面などUIを実装するための機能です．基本的な使い方は，公式ドキュメントのUMG UI デザイナのクイックスタートガイドや3D ウィジェットの作成 (4.6からの実験的機能)を読みながら手を動かせば，何となくつかめると思います．
しかし，画面に配置できるコンポーネントについてはリファレンス(公式ドキュメント)があるものの，何ができるかが書いてあるだけで，どう設定すれば書いてあることが実現できるかについてはあまり情報がありません．この記事では，UMGのレイアウト用コンポーネントの挙動について解説します．なお，この挙動は実験的に推察したものであり，コードを詳細に確認したものではないので，何か間違いがあればご指摘ください．
Grid Panel
Grid Panelは，表示範囲を指定した数の行と列に分割し，それぞれのマスに子ウィジェットを配置することができます．
行と列の数は，図のようにGrid Panelの詳細のFill Rulesで設定します．Column Fillの+を押すと列が増え，Row Fillの+を押すと行が増えていきます．Column FillやRow Fillの左の三角を押すと，それぞれの行や列の幅の重みを指定できます．上の図では，列それぞれの重みを1にしてあるので，配置したボタンウィジェットは，ちょうど左半分を埋めるようになっています．同様に，1列目を2，2列目を1にした場合，下の図のように1列目に配置したボタンウィジェットは3分の2を占めるようになります．
つまり，それぞれの列や行のサイズは，(列の重みの合計)分の(ある列の重み)の幅を持つようになっています．
Grid Panelに配置した子ウィジェットには，自動的にGrid Slotが追加されます．Grid Slotでは，次のような設定ができます．
- Row
- 何行目に配置するかを示す．0行目，1行目と0から始まるので注意すること．
- Column
- 何列目に配置するかを示す．0列目，1列目と0から始まるので注意すること．
- Row Span，Column Span
- 何行，または何列を利用するかを示す．たとえば，上の図のようにRow Spanを2にすると，2行分を使った表示になる．
また，配置する行や列の変更は，子ウィジェットを選んだときに現れる上下左右の矢印をクリックすることでも変更可能です．
Uniform Grid Panel
Uniform Grid Panelは，Grid Panelと同様に表示範囲をいくつかの行と列に分割し，それぞれの子ウィジェットを配置することができます．Grid Panelではそれぞれの列や行のサイズを自由に変更できましたが，Uniform Grid Panelでは配置した子ウィジェットの設定で列や行の幅が変わります．
図のようにUniform Grid Panelの子ウィジェットには，自動的にUniform Grid Slotが追加されます．RowやColumnの意味はGrid Panelの子ウィジェットの時と同じですが，Uniform Grid Panelの場合，子ウィジェットのRowやColumnの最大値を使って表示範囲を分割するようになっています．たとえば，上の図の場合，それぞれのボタンのColumnが0，1，2となっているため，均等な幅の列が3つできています．あくまでも最大値なので，たとえばColumnが0の子ウィジェットと9の子ウィジェットがあったとすると，列は10分割されることになります．
公式のリファレンスにも書いてありますが，アイテム選択画面などで利用できそうです．
Horizontal Box，Vertical Box
Horizontal Boxは，子ウィジェットを横方向に配置していくことができます．Vertical Boxは，子ウィジェットを縦方向に配置していくことができます．
Horizontal Boxに配置した子ウィジェットには，自動的にHorizontal Box Slotが追加されます．Vertical Boxの場合は，Vertical Box Slotが追加されます．ここで重要になるのが，Sizeの設定です．
- 自動 (Auto)
- 表示に最低限必要なサイズになります．
- 塗りつぶし (Fill)
- 自動が設定されている子ウィジェット全てで使われるサイズを引いた残りの部分をから，設定されている重みに合わせてサイズを割り振ります．
塗りつぶしが少し分かりにくいので，もう少し詳しく説明します．自動を選んでいると，上の図のようにテキストボックスを子として持っているとその分だけ幅が広がり，無い場合はボタンの必要最低限の幅を取るようになります．Horizontal Boxの幅が10として，自動になっている子ウィジェットの幅の合計が4とすると，残りは6になります．塗りつぶしになっている子ウィジェットは，この6を割り当てられた重みに従って分割しているようです．この重みは，塗りつぶしを選ぶとその右側に入力ボックスがでるはずなのですが，どうもこの記事を書いている時点では日本語版では表示されないようになっているようです．そのため，デフォルト値の1が入っており，均等に分割されるようになっています．
上の図のように，英語版にすると重みの入力用のボックスがFillの右側に表示されます．
Canvas Box
Canvas Boxでは，子ウィジェットに対してアンカーを設定し，そのアンカーからの相対位置で子ウィジェットの位置を決めることができます．アンカーについては，公式ドキュメントに詳しい説明が追加されていたので，そちらを参照してください．
まとめ
今回は，UMGのレイアウトシステムから，Grid Panel，Uniform Grid Panel，Horizontal Box，Vertical Box，Canvas Boxを紹介しました．他にもいくつかレイアウト用のウィジェットはあるのですが，そちらについてはまだあまり試せていないので，そのうち何か書けたらな，と思います．UMGは，最初からマルチプラットフォームを考慮して作られているだけあって，様々な解像度でUIが作れるようになっており，解像度の違いを吸収するための機能も用意されています．そのため，ゲームを作るためだけでなく，他のツールなどを作る場合にも使えるのではないか，と考えています．皆さんも是非使ってみてください．
明日は，@hima_zinnさんのUE4でトゥーンレンダリング(仮)です．
