Language:
Page Info
Skill Level:
Engine Version:

UMG (Unreal Motion Graphics) のベスト プラクティス

Unreal Motion Graphics (UMG) を使って、UI エレメントを色々試したり、作成し始めると、自分が一番効率的な方法で作業をしているか気になるかもしれません。 一番効率的な方法はその大部分がプロジェクトの範囲に依存しますが、このページでは UI をセットアップする際に考慮すべきことの概要を説明します。

例えば、頻繁に変更する変数をごく少数持つ単純な UI 画面を作成している場合、こうした変更を操作するために プロパティ バインディング の使用を検討します。 しかし、特定の時間に変更するいくつかのプロパティを持つ複雑な UI 画面がある場合は、フレーム毎に変更があったかをチェックするよりも、 イベント ベース のロジックを使ってこうした変更を行ったほうがよいかもしれません。

UMG を使ってコンテンツを制作する場合、何が「正しい」、「誤っている」という答えはあてはまりません。与えられた状況で最適に機能するものを採用することになります。 ただし、このページで扱うトピックをコンテンツ制作時に検討し、それを実装するかどうかを決めることは可能です。

ターゲットの解像度とスケーリング

UMG でコンテンツを制作する場合、ターゲットの解像度を念頭において、その解像度に基づきすべてのウィジェットをビルドします。 例えば、ターゲットが 1080x1920 の場合、UMG 内の解像度設定を使用して各 Widget ブループリントをオーサリングします。ScreenSize ドロップダウンメニューから実際に使える画面サイズを設定できます。

ScreenSizeOption.png

他の画面サイズでどのように見えるかをプレビューするのは良いことですが、様々な画面サイズでビルドするのは避けてください。一定のスケーリングで見えたり、見えなかったりするものがあるからです。 スケーリングについては、UMG 内でコンテンツを作成する際はいつでも 1.0 のDPI Scale で作成するようにしてください。

OneScale.png

現在の画面サイズとスケーリングは、グラフ下部の [Designer] タブでご覧いただけます。

これにより、作成したものが何でも同じスケーリングに見えるようにするだけでなく、すべての Widget ブループリントに統一したスケーリングが適用されていれば大小の画面サイズに簡単にスケーリングすることができます。 異なる画面サイズで作業するのと同様に、ある Widget ブループリントをあるスケーリングでオーサリングし、別の Widget ブループリントを別のスケーリングでオーサリングすると、異なる画面サイズにスケーリングする場合、思ったようにスケーリングされないことがあります。

UMG のアートを作成する

UMG のアート アセットを作成する前にターゲットの解像度とスケーリングを確定することが重要です。 解像度やスケーリングを考慮せずにアセットを作成すると、テクスチャが必要以上に大きくなったり、小さくなったりします。 いずれの場合でも、こうしたアセットを UI に合わせる必要があり、テクスチャを伸ばしたり、斜めにしたりして不要な効果をもたらしてしまうことがあります。

テクスチャに関しては、インポートしたテクスチャのビルトインのパディング量を最小限に抑えるようにしてください。

MainMenuBackground.png

このテクスチャには、その周囲に非常に多くのパディングがあり、ウィンドウ フレームの実際のサイズを把握するのが難しくなっています。

UI 画面で上記のテクスチャを使用する場合、様々な画面サイズで再スケーリングしようとすると、スケーリングはウィンドウ フレームではなく、テクスチャのサイズに基づき行われます。 オブジェクト周囲にパディングが必要な場合は、UMG 内でパディング オプションを使用し、オブジェクト周囲にスペースを作り、再スケーリングする場合、適切なスケーリングで表示されるようにします。

この画像のもうひとつの問題点は、アートが作成された方法です。このテクスチャは、ひとつのアートではなく、複数の部分に分割することも可能でした (木のフレームを隅と背景から分けられます)。

BackgroundCallouts.png

隅と木のパネルは独自のテクスチャにすべきで、不完全な部分があるためテクスチャのタイリングが難しくなっています。

画像を伸ばさずに、背景画像を必要に応じて大きくまたは小さくするためにタイリングできるように隅と木材のパネルは独自のテクスチャにするのが理想的です。 UMG 内で、テクスチャの Draw As オプションを様々な設定にすることができます。タイリングをサポートする Border モードを使用するのに適しています。

BorderTile.png

モバイル デバイス向けのテクスチャ作成に関する情報は、モバイル プラットフォーム向けのテクスチャ ガイドライン をご覧ください。

ヒントとコツ

このセクションでは、UMG やUMG で使用するアセットで作業する場合に使用できるヒントやコツに焦点をあてて説明します。

フォーマッティングのヒント

縦方向ボックスや横方向ボックスで作業する場合、 スロット のサイズに対して Fill または Auto を使用するかどうかを決めます。

Auto1.png

上の図では、画面上部の一連のボタンが Auto に設定され、レイアウトに必要なスペースだけを使用します。

スロット サイズに対して Auto を選択すると、そのウィジェットを適切に表示するための指定した量のスペースが必要であることを意味します。Auto は、Auto に設定されたウィジェットのそれぞれの子を見て、どれくらいの大きさが必要であるかも判断します。 これはスケール ボックス内でスケーリングする必要があるウィジェットがいくつかある状況で役立ちます。Auto に設定すると、スケール ボックスは、それぞれの子を見てすべてが適切に入るようにどれくらいスケーリングするかを決めます。

一方、Fill は名前が示すように可能な限り大きなスペースを使おうとします。 以下の画像では、ボタンの一番上と下の行を Auto に設定し、メインメニューのボタンがある中央の 縦方向のボックスFill に設定しました。 ボタンの上と下の行が縦方向のボックスによって画面サイズに関係なく上と下にプッシュされるように行ったものです。

Auto2.png

レンダー トランスフォームを使用する

Render Transforms (レンダー トランスフォーム) を使って特定ウィジェットの平行移動、スケーリング、その他の設定に影響を与える場合は注意してください。

RenderTransforms.png

上の画像では、 レンダー トランスフォームScale は調整されて、アニメーションによって動作し、パルス (脈動) エフェクトを生み出しています。

レンダー トランスフォームは、一時的な変形 (ウィジェットのアニメートなど) には適していますが、永続的な変形には必ずしも適していません。 例えば、ウィジェットのサイズをスケールアップしたい場合、レンダー トランスフォームでスケールを調整する代わりに、 Scale Box (スケール ボックス) でウィジェットをラップして行います。 スケール ボックスは Layout Scale (レイアウトのスケーリング) を行いますが、レンダー トランスフォーム (レイアウトの一部として計算されません) は、これを行いません。そのため、異なる解像度に対してスケーリングする場合に適切にスケーリングされず、ウィジェットのスケーリングが不適切になることがあります。

右クリックのコンテキストメニュー

Widget ブループリントの [Designer (デザイナ)] タブでは、Hierarchy にあるウィジェット上を 右クリック してラップするか、それを他のウィジェットに置き換えることができます。

RightClickHierarchy.png

再度親子付けすることなくウィジェットを迅速かつ簡単に置き換えることができます。

[Details (詳細)] パネルのプロパティ上で右クリックして、コピー / 貼り付けすることができます。

CopyProptery.png

これはボタンのスタイルのようなものをコピー / 貼り付けするのに役立ちます。

アンカーとウィジェットを Ctrl キーを押しながらドラッグ

キャンバス パネルで作業する場合、Ctrl を押しながらアンカー(または事前設定されているアンカーから選択して) をドラッグすると 、ウィジェットも同時に必要な位置にドラッグされます。

AnchorDragging.png

アンカーとウィジェットを Ctrl を押しながらドラッグすると、アンカーはウィジェットの左上に自動配置されます。

デザイナ プレビュー バックグラウンド

Widget ブループリント内の Designer タブで、背景としてグラフで使用するプレビュー画像を設定することができます。

SetPreviewBackground.png

プレビュー バックグラウンドを使用すると、ウィジェットを確実に適切なサイズにスケーリングするのに役立ちます。

これを行うには、Hierarchy (階層)Root (ルート) を選択し、[Details] で使用するテクスチャを割り当てることができます。

ユーザー ウィジェット / コンテンツの再利用

任意のコンテンツで Widget ブループリントを作成する場合は常に User Widget (ユーザー ウィジェット) とみなされます。こうしたユーザー ウィジェットは、[Designer] タブの [Palette] ウィンドウの User Created セクションに表示され、他のウィジェット同様にグラフ内にドラッグ&ドロップすることができます。

UserWidgets.png

上図は、ユーザー ウィジェットが別のメニュー画面に追加される確認画面です。

この手法を画面やコンテンツを作成する際に役立ててください。プロジェクトを通して頻繁に使うことになる機能がいくつかある場合は、各エリアで必要になるたびにビルドするのではなく、独自にウィジェットを作成して他のウィジェットにドロップしてそうした機能を与えることができます。

最適化

UI 画面をオーサリングする際の最適化に関する以下のような検討事項がいくつかあります。

  • 可能な限りアートに対して マテリアル の代わりに テクスチャ を使用します。

  • バインディングやティック イベントの代わりに Events to Drive UI のアップデートを使うようにします。

  • 頻繁には変更されないウィジェットをキャッシュするには、Invalidiation Box を使います。

  • Widget Reflector (Ctrl+Shift+W) を使ってウィジェットに関する情報と統計を取得します。