はじめに
こんにちは。 株式会社アドグローブ ゲーム事業部のUIデザイナー、NISです。
今回は「UIデザイナー向けのUnreal Engine（以下、UE）のUMG解説」をテーマに記事を書きました。
UEのUMG（Unreal Motion Graphics）についてはネット上に多くのウィジェットタイプの解説記事があり、公式サイトでも詳細な説明がなされています。
ですが、こうした説明は完全な初心者にとっては少し難しく、最初の一歩を踏み出すハードルが高いと感じることもありました。
そこで今回は、UE初心者のUIデザイナー向けに、「実際のゲーム開発現場でUIデザイナーがどのようにUMGを使っているのか」について、私自身の経験をもとにまとめてみました。
※この記事はUMGのウィジェットタイプに絞った内容となっており、Unreal Engineのインストール方法やエディター全体の操作、Widget Blueprintの作成方法については触れていません。
（使用バージョン：Unreal Engine 5.5）
Image
・シンプルに画像を表示することができる機能です。
・BrushプロパティでTextureやMaterialを設定できます。
・子要素は持てませんが、そのぶんBorderなどに比べてレンダリング負荷が軽いとされています。
・いわゆる画像の引き延ばし（9スライス）を使いたい場合は、「Draw As」プロパティを "Box" に設定します。
このとき、「Margin」という項目に画像のどの部分を引き延ばすかを小数（0～1）の割合で指定します。
たとえばLeft：0.2 Right：0.4と入力した場合、画像の左から20%、右から40%の位置までの中央部分が引き延ばされるようになります。
それ以外の領域（0.0～0.2、0.4～1.0）は拡大・縮小されず、元の比率のまま表示されます。
これにより、角や縁を崩さずにボタンの背景などを自由に引き伸ばすことが可能になります。
・Draw As を "Image" に設定すると、画像を繰り返し（リピート）表示することができます。
・Tiling プロパティで、どの方向に繰り返すかを指定します。
Border
・Imageと同じようBrushプロパティにTextureやMaterialを設定できます。
・Imageとの違いはBorderは子ウィジェットを持てるため、枠付きの装飾要素として使いやすいです。
ただし、その分Imageよりレンダリング負荷が高くなる 傾向があります。
Text
・「フォント」「フォントカラー」「文字揃え」など、デザインツールに慣れている方なら直感的に使える項目が多く、わかりやすい作りになっています。
一方で、テキストの自動改行（ラップ）に関する設定は少し分かりづらかったため、ここで補足します。
Auto Wrap Text→こちらはたとえばTextの親がSizeBoxだった場合、そのSizeBoxの幅以上になるとテキストが自動で改行されるようにできる機能です。
Wrap Text At→この設定では、任意の数値（ピクセル単位）を指定することで、その幅を超えたタイミングでテキストが自動で改行されます。
【注意！】
英文の改行は単語の区切りを認識して自動で行ってくれるので"SampleTextSampleText"などスペースのないダミーテキストを入れてしまうと1つの単語とみなされて改行してくれなくなるので注意が必要です。
Named Slot
まず、Unreal Engine公式の説明から引用します：
このウェジェットを使ってユーザー ウィジェット用に外部スロットをエクスポーズすることができます。
ユーザー ウィジェットには、他のウィジェットを入れることが可能であり、カスタム ウィジェット機能を作成するのに便利です。
……正直、これだけ読んでもよくわからないですよね。
Named Slotを簡単に説明すると、「入れ替え可能な空きスペース」をウィジェットの中に用意できる仕組みです。
この空きスペースには、使う側（親ウィジェット）から任意のウィジェットを差し込むことができます。
たとえば、以下のようなオプション画面用のリストウィジェットを作るとします：
- リストの下地
- リストタイトルとなるテキスト
- UIコンポーネント（※項目によってカルーセル/スライダー/トグルなどに切り替わる）
この3つの構成を持ったリストウィジェットをゲーム内で使い回したいとします。
ただし、UIコンポーネントの部分だけは項目によって異なるので、個別に差し替えたい。
そんなときにNamed Slotが役立ちます。
もちろん、上記のようなUIコンポーネント部分の差し替えは、エンジニアにお願いして動的に処理することも可能です。
ただ、デザイナー視点では「最終的な見た目をエディタ上で完結させたい」というニーズがあります。
Named Slotは差し込む中身をエディタ上で編集できるため、実際の見た目を確認しながら作れるのが大きなメリットです。
動的な処理では、ランタイムでしか見た目が確認できないため、レイアウト調整やバランス確認に手間がかかることがあります。
そのため、私は可能な限り手動でNamed Slotの中身をセットして、プレイ中に近い見た目を保つようにしています。
Canvas Panel
・複数の子ウィジェットに対してアンカーを設定したり、子ウィジェットの位置やサイズを柔軟に制御できます。
・ただし、Canvas Panelは複数重ねると配置の計算が増えて処理が重くなることがあるので画面の大元に1つ配置し、そのなかでレイアウトを組むのが効率的です。
レイアウトに便利だからとCanvas Panelをたくさん重ねてしまうと、それが原因でUI全体が重くなるというケースもあります。（特にスマホ向けタイトルでは注意）
Overlay
・Overlayは、Canvas Panelと似た構造を持つパネルですが、機能には明確な違いがあります。
Canvas Panelが子ウィジェットの「位置」と「サイズ」の両方を制御できるのに対し、Overlayは「位置」のレイアウトのみを制御することができます（サイズは制御できません）。
では、実際の現場ではOverlayをどんな場面で使うのでしょうか？
Overlayは主に、「子ウィジェットを1つしか持てないUI要素に、複数のウィジェットを配置したいとき」に活躍します。
たとえば、Size Box、Scale Box、Borderなどはデフォルトで子ウィジェットを1つしか持てない制限があります。
このとき、Overlayを中継として挟むことで、その中に複数のウィジェットを配置できるようになるわけです。
Size Box
・Size Box内のコンテンツは、数値で直接サイズを指定することができます。
私は初め、この数値が画面サイズに対して絶対値として機能すると勘違いしていたのですがそれは間違いでした…
Size Boxのサイズは次のUEの設定を基準にスケーリングされて表示されます：
プロジェクト設定 > DPIスケーリング > Scale To Fit Rule > 「デザイン画面サイズの値」
今回はこの値が 1920×1080 に設定されている前提で説明を進めます。
たとえば、UMGのビジュアルデザイナー上で 「Fill Screen」モードを選び、512×512ピクセルのSize Boxを配置したとします。
その状態から、プレビュー画面の右下にある白い三角ハンドルをドラッグして画面サイズを 1280×720（= 0.66倍） に縮小した場合、Size Boxの表示サイズもそれに合わせて 約338×338ピクセル（= 512×0.66） に縮小されます。
つまり、Size Boxに入力した値は絶対的なピクセル値ではなく、デザイン画面サイズを基準とした相対的なサイズとして解釈されるということです。
※実機での表示サイズも、この「デザイン画面サイズ」を基にしたDPIスケーリングの影響を受けるため、想定解像度と実際のプレイ解像度が大きく異なる場合は、実機確認が特に重要です。
最後に
今回ご紹介した内容は、Unreal Engine初心者である私なりの解釈です。
今後UMGへの理解が深まるにつれて、紹介した使い方とはまた違ったアプローチや、それぞれのウィジェットに対する印象も変わっていくかもしれません。
それでも、UMGの使い方で最初につまずいている方にとって、少しでも参考になれば嬉しいです。
最後までお読みいただき、ありがとうございました。
アドグローブでは、さまざまなポジションで一緒に働く仲間を募集しています！
詳細については下記からご確認ください。みなさまからのご応募お待ちしております。
