Unreal Motion Graphics (UMG) は、ユーザー インターフェース (UI) を構築するための強力なツールです。 シンプルなポップアップ、または複雑な UI システムを作成する場合でも、UMG の動作の基本概念を理解することで、この強力なツールを自由に試すことができます。
UI デザインを机上からプレイテストまで進めるには、UMG で UI を構築する仕組みを理解する必要があります。 UI 構築ワークフローを適切に理解していただくために、このページは次のセクションに分かれています。
UI システムを設計する
UI デザイン計画を策定することは、見栄えがよく便利な UI システムを作成するための鍵となります。 次の点について考慮してください。
構築するゲームの種類。
プレイヤーをサポートし、ゲームプレイを楽しくわかりやすくするために必要な UI のタイプ。
最終的な UI の外観。
たとえば、フォートナイトの HUD では、プレイヤーがゲームについて理解する必要があるすべての情報、つまり関連する体力やシールドの情報からゲーム全体の統計データまでが画面の周囲に配置されています。
UI デザインのアイデアをスケッチします。 これらのスケッチに従って、UMG で UI を構築する手順を進めます。
基本的な Web デザインのアプローチは、ユーザー ウィジェット のビルドを開始する前に UI のレイアウト計画を策定するのに役立ちます。 これらのアプローチを使用すると、UI のどの部分を固定する必要があり、どの部分を柔軟にできるのかを決定できます。 UI レイアウトには次の Web デザイン手法を使用します。
絶対レイアウト
絶対レイアウトでは通常、座標を正確に計算して、画面上の要素を配置する場所を指定します。 これが便利なのは、X 座標と Y 座標を使用して UI 要素を所定の位置に維持する必要がある場合です。 UI 要素では、親要素が画面上のどこに配置されるかを考慮する必要があります。親要素はレイアウトの左上隅から始まります。
このスタイルのレイアウトは柔軟性が低く、さまざまな画面サイズに合わせて見た目を維持するのが困難です。
絶対レイアウト デザインは、大きなデザインの一部である小さな要素に最適です。 たとえば、アイコンには絶対位置を使用します。 UEFN では、イメージ ウィジェットの [Alignment (アラインメント)] と [Padding (パディング)] でこれを設定できます。
アイコンは、周囲の他の UI 要素の配置やサイズに関係なく、同じ場所に留まります。
相対レイアウト
このタイプのレイアウトは、UI を大きなテレビ画面や小さなスマートフォンの画面に合わせられるため、複数のプラットフォームでプレイできるゲームに最適です。
パディングと間隔
パディングは、全体の要素間の小さなスペースを調整するために使用できます。 UMG では、個別のウィジェットのパディングを管理するのが難しい場合があります。 代わりに、画像とテキストブロックに [Alignment (アラインメント)] ツールを使用します。アライメントにより、パディングよりもスペースと配置をより細かく制御できます。
つまり、すべてのピースが配置された後に、要素間に少しスペースが必要な場合は、個別のウィジェットのパディング設定を調整して必要なスペースを追加します。
ウィジェット間のスペースを確実に大きくするには、コンテナ ウィジェットとユーザー ウィジェットの間に空のイメージまたはスロット ウィジェットを使用します。 以下では、Image ウィジェットを使用して各ユーザー ウィジェット間のスペースを確保し、各ウィジェットに情報を明確に表示するためのスペースがあることがわかります。
UMG ウィジェットを理解する
UMG では UI をセクションごとに設計する必要があります。 個別のユーザー ウィジェットを作成し、各レイヤーで作業することで UI を構築します。 UI の要素をすべて準備できたら、個々のセクションを 1 つの親ユーザー ウィジェットの下にレイヤー化します。 UI をレイヤーで構築すると、UI 全体のデザインとレイアウトをより細かく制御できるようになります。
個別のユーザーウィジェットを計画して作成するには、まず [ Palette (パレット) パネル] で使用できるウィジェットを理解する必要があります。 ウィジェットには主にコンテナと要素の 2 つの型があります。
コンテナ
コンテナは、複数のユーザーウィジェット、要素、およびその他のコンテナを保持して、UI のピースを作成します。 要素は、画像、マテリアル、テキストなどです。 コンテナ ウィジェットのサイズは、最大の子要素のサイズによって決まります。
| コンテナ ウィジェット | 目的 | 画像 |
|---|---|---|
グリッド | 柔軟なグリッド パターン内で要素をレイアウトします。 オプションを次の対象の子要素に追加します。
|  |
均一グリッド | 子要素を横列と縦列に等間隔でレイアウトします。 オプションを次の対象の子要素に追加します。
|  |
オーバーレイ | レイヤー要素とコンテナ ウィジェットを積み重ねて配置します。 Overlay コンテナはその子要素にさらにオプションや設定を追加することはありません。 |  |
スタック ボックス | 水平または垂直に (左から右、上から下に) 要素をレイアウトします。 このコンテナ ウィジェット自体は、要素の間隔を適切に設定しません。 他のコンテナまたは要素ウィジェットを使用して、Stack Box のスペースを作成します。 |  |
サイズボックス | 子要素のサイズを制限するパラメータを導入します。 Size Box コンテナは子要素にオプションや設定をさらに追加することはありません。 |  |
スケールボックス | UI を画面サイズに合わせて拡大縮小する方法を指定します。 |  |
スクロールボックス | 要素のコレクションを収容するスクロール可能ボックスを作成します。 Scroll Box コンテナは子要素にオプションや設定をさらに追加することはありません。 |  |
ウィジェットスイッチャー | 各ウィジェットを「Tab」で切り替える手段を提供します。 このコンテナ ウィジェットでは、一度に 1 つのウィジェットがスイッチャーに表示されます。 Widget Switcher コンテナは子要素にオプションや設定をさらに追加することはありません。 |  |
キャンバス | 定義されたスペース内に要素を固定します。 最適な使用方法は、設計処理の最後に親コンテナとして使用することです。 子要素に次のオプションを追加します。
|  |
要素ウィジェット
全てのウィジェットには [詳細] パネルで選択したウィジェットに固有の設定の後に、[外観] プロパティがあります。
子要素のサイズは [Details] パネルで設定でき、親コンテナ ウィジェットから各プロパティを継承します。
| 要素ウィジェット | 目的 | 画像 |
|---|---|---|
アクションウィジェット | Verse を使用して、特定のアクションに対するキー バインドを受け取る方法を提供します。 このウィジェット自体は、ビジュアルだけのものです。 |  |
Image (画像) | ユーザー ウィジェットの背景または前景にテクスチャ ( インポートされた画像 または UEFN でネイティブに見つかったテクスチャ) とマテリアルを追加する方法を提供します。 |  |
テキストブロック | ユーザー ウィジェットにテキストを追加します。 サイズ、フォント、間隔などを制御できます。 |  |
ミュートボタン | 背景が透明な長方形のボタン。 |  |
レギュラーボタン | 背景が不透明な長方形のボタン。 |  |
大音量ボタン | 背景が黄色の長方形のボタン。 |  |
スライダー | 指定された範囲内で値を増加または減少するスライダ。 |  |
Verse のウィジェットの詳細については、「 ウィジェット型 」を参照してください。
ユーザー ウィジェットを作成しレイヤー化する
ユーザー ウィジェットは、設計したすべての内容が含まれる UI ファイルです。 ユーザー ウィジェットを作成するときは、可能な限りデザインを各部に分けます。 つまり、UI 要素の期待する外観を実現するために、ユーザー ウィジェットで必要なものだけを使用することです。
下の画像では、収集されたアイテムのホットバーの各コンポーネントに対して 1 つずつ、合計 4 つのユーザー ウィジェットが作成されています。 各ユーザー ウィジェットは、同じ UI デザインを維持しながら、さまざまなコンポーネントの個別の統計データを追跡します。
個別のユーザー ウィジェットを設計すると、それらを親ユーザー ウィジェット内にレイヤー化して、コレクション バー ホットバーの外観をより一貫性があり制御されたものにすることができます。 また、トラッカーの仕掛けを使用すると、コレクション ホットバーの各コンポーネントの統計データを追跡しやすくなります。
画像をクリックすると、拡大表示されます。
このように UI を設計するには練習が必要です。 カスタム HUD を作成する チュートリアルと ティーンエイジ・ミュータント・ニンジャ・タートルズ のチュートリアル に従って、個別のユーザーウィジェットを作成し、ゲーム用のカスタムスクワッドの外観を作成する練習を行います。
レイアウトを編集する
個別のユーザー ウィジェットを使用して UI を作成すると、簡単に UI を編集できます。 UI デザインの対象部分だけを編集し、他の部分に影響を与えない方法を示します。
上記のコレクション バーのホットバー デザインでは、1 つを除いてすべての要素ラベルが中央に配置されていることがわかります。 この場合、デベロッパーはその 1 つの要素のユーザー ウィジェットを開いてラベルを編集するだけです。コレクション バー ホットバーの他の全ての要素に問題が発生することはありません。
インベントリ システムのような複雑なものを設計している場合は、気づくと必要のないコンテナ ウィジェットを使用している、または要素ウィジェットをデザインに適合させるのに苦労することがあります。 UMG には、次のようにレイアウトの編集を簡単にするオプションがあります。
Replace With…(置換)
Wrap with...(ラップ)
ウィジェットを置換
レイアウトを崩さずに、階層から不要なウィジェットを置き換えます。 不要なウィジェットを右クリックし、[Replace With…(置換)] を選択して、置換する別のウィジェットを選択します。 置き換えるウィジェットはすべてコンテナ型のウィジェットです。
子ウィジェットのオプションは、使用される新しい親コンテナに応じて変わります。
ウィジェットをラップ
全ての子ウィジェットに影響を与えずにレイアウトを変更する 1 つの方法は、階層の [Wrap with...(ラップ)] 設定を使用することです。 子ウィジェットを右クリックして [Wrap with...(ラップ)] を選択し、ドロップダウン メニューからコンテナを選択して、そのプロパティを活用し、子ウィジェットの設定を維持します。
プレイテスト
デザインが完成したら、そのデザインをプレイテストします。 次の点を確認します。
UI には目的があります。 ただ UI があればよいというのではなく、UI が役に立つものであることが必要です。
UI は役立ち、ユーザーフレンドリであり、プレイヤーがゲームプレイ中に UI が何をするのか推測しないで済むものです。
UI がゲームに溶け込み、ゲームプレイを引き立たせる必要があります。
UI 要素がゲームプレイを妨げないものです。