プロジェクトのカスタム UI マテリアルを作成するには、以下の 2 つの方法があります。
マテリアル コレクション：マテリアルにすべての UI 機能が事前ビルドされているマテリアルのコレクション。
カスタム親マテリアル：マテリアル関数を使ってゼロから作成したマテリアルです。
マテリアルコレクション
マテリアル コレクションはカスタマイズ可能なメーター マテリアルとテクスチャのシリーズです。 マテリアル コレクションは、コンテンツ ブラウザの「Fortnite」>「UI」>「Materials」にあります。 資料は2つの種類に分かれています。
メーターマテリアル：通常、進捗バーとして使用されます。
テクスチャ：通常、アイコンとプレイヤーのポートレートに使用されます。
material_collection_device には、Verse でマテリアル コレクションを使用してテクスチャとマテリアルだけでなく、ゲーム内でダメージ イベントが発生した場合に UI マテリアルを動的に変更するためにマテリアル インスタンスのパラメータを使用する方法の例が含まれています。
カスタム親マテリアル
UMG 画像ウィジェットのカスタム親マテリアルを作成するには、マテリアル ドメインをメイン マテリアル ノードのユーザー インターフェースに設定する必要があります。 この親マテリアルは、マテリアルをより動的なものにするマテリアル関数を使用します。
マテリアルは、マテリアル インスタンスに変換されます。これにより、親マテリアルを効率的に再利用し、マテリアル パラメータをカスタマイズできるよりユーザーフレンドリーなインターフェースを使用できるようになります。 マテリアル パラメータは、その後バインドされた UMG ウィジェット プロパティを通じて UI で更新されます。
変換後に親マテリアルに加えられた変更はすべて、そのマテリアル インスタンスのすべてに反映されます。
コンテンツ ブラウザから、「UI」 > 「Devices」 > 「HUD Controller」 > 「MaterialInstances」 フォルダの順に開きます。 MI_HCD01_ShieldBar という名前のシールド ゲージ マテリアルを見つけ、そのサムネイルをダブルクリックして開きます。 そうすると、マテリアル インスタンスがマテリアル インスタンス エディタ内で開かれます。
前のセクション「仕掛けパラメータの設定」では、プレイヤーがシールド ダメージを受けるかシールドを修復するときに HUD でシールド ゲージを更新するために、マテリアル インスタンスの Progress プロパティがどのように使用されるのかを説明しました。 これらの変更は、HUD 制御のプレイヤー情報を使用し、プレイヤーの情報に基づいてバーをどの方向にスライドするのかをマテリアル インスタンスに伝えることで行われます。
素材
マテリアル インスタンスが仕掛けの関数をリッスンできる理由は、親マテリアルで設定されたパラメータがあるという事実にあります。 ユーザー インターフェース マテリアルは、マテリアル関数を使用して、HUD でプレイヤー情報を更新するために、マテリアル インスタンスで活用できるマテリアルで時限のリズムやパターンを作成します。
このテンプレートでは、UI Material Lab プロジェクトと同じマテリアル関数を使用します。 マテリアル関数のさまざまな型とそれらの使用方法について詳しく理解するには、UI マテリアル ラボ プロジェクトの「マテリアル関数の詳細」ページを参照してください。
プロジェクト用に作成されるさまざまなマテリアルとその使用方法を以下の表で概説します。
| プロジェクト マテリアル リスト | 使用方法 |
|---|---|
M_DropShadow | 形状の下に表示するドロップ シャドウを作成します。 (テクスチャを使用して) 四角形、円形、六角形、またはカスタム形状を作成できます。 カスタム形状では、シャドウをソフトにすることはできません。 |
M_IconWithbackground | 背景と輪郭のあるアイコンを作成します。 |
M_Meter | 高度なインタラクションの仕掛けのシンプルなバー メーターを作成します。 |
M_Notches | 装飾が施されたノッチを均等な間隔で作成します。 高度なインタラクションの仕掛けのノッチでバー メーターを作成するために M_Meter とともに使用されます。 |
M_ProgressBar_Basic | 勾配フィルと輪郭がある曲線状の角か鋭い角のある進捗バーを作成します。 |
M_ProgressBar_Orb | 進行すると溜まっていくオーブの形をした進捗バーを作成します。 オーブの中心にはアイコン テクスチャがあります。 |
M_Texture_Complex | カスタム テクスチャのスケーリング、ワープ、またはその両方を可能にします。 たとえば、スパークルまたは水中エフェクトを作成するために使用できます。 |
M_Texture_Simple | シンプルなテクスチャのカラーリングを可能にします。 シンプルな黒と白のテクスチャ、または (RGB チャンネルを使用する) チャンネルパック化されたテクスチャとともに使用できます。 |
M_Wave | 泡が水面に浮かぶ波を作成します。 |
パラメータグループ
テンプレートからさまざまなマテリアル インスタンスを開いて、[Parameter Groups (パラメータ グループ)] に表示されるさまざまなパラメータを確認します。 これらは、仕掛けにバインドして HUD で更新できるマテリアル関数の編集可能なパラメータです。
パラメータ グループは、チェックマークが入っている場合にのみマテリアル インタンス エディタで編集できます。
マテリアル インスタンス エディタでパラメータを編集するには、コンテンツ ブラウザを開いて「UI」 > 「Devices」 > 「SkilledInteraction」 > 「MaterialInstances」フォルダの順に移動し、[MI_SID03_Water] マテリアル インスタンスを見つけて開きます。
まず水の色を変更してから、[Liquid Color 1] と [Liquid Color 2] のパラメータをダブルクリックします。 そうするとカラー ホイールが開きます。 水を別の色に変更します。 以下の例では、水の色を青から緑に変更しています。
泡を注意して見ます。 マテリアル インスタンス エディタ ウィンドウが選択されている場合は、マテリアルの泡が浮き上がっています。 サイズ パラメータ BubblesStartSize と BubblesMiddleSize を有効にしてそれらのパラメータを編集することにより、泡のサイズを変更できます。 パラメータのサイズが大きすぎると、泡が壁の背後に消えるように見えます。
このようなパラメータは、プレイヤー情報を更新するためにビュー バインディングで設定して仕掛けの関数で使用できます。
プロジェクトで使用するマテリアル インスタンスとテクスチャ アセットを移行します。
テクスチャ
テクスチャは、マテリアルだけでは不可能な詳細と洗練さを追加するために UI で使用されます。 UI のデザインでテクスチャを使用することにした場合は、テクスチャがメモリを大量に消費することに注意してください。
高度なインタラクション テクスチャやテクスチャとマテリアルの組み合わせのサンプルを使用すると、UI のどのくらいの部分がテクスチャで作られているのかがわかります。 テクスチャのサンプルでは、[Backplate widget (バックプレート ウィジェット)] をオフにすると、UI のメッセージ、体力ゲージ、撃破カウンターの部分のみが残されて表示されます。
バックプレートで定型化されたボックスの外観を作成するときは、テクスチャを使用することをお勧めします。 複雑なデザインと形状を UMG で再現するのは難しいと思われます。 UI マテリアルは、基本的なプリミティブ形状を作成したり、マテリアルの形状の周囲にストロークを追加したり、マテリアルの形状とストロークにグラディエントを追加したりするためにのみ使用できます。
マテリアルとテクスチャを使用した UI のサンプルを見ると、テクスチャとマテリアルがどのようにブレンドされて洗練された UI の外観が作られるのかがわかります。 この UI は、バックプレート デザインを構成する 3 つのテクスチャとクリーチャーの画像でできています。
クリーチャーの画像は、画像ウィジェットの上に重ねられています。 画像ウィジェットではマテリアル インスタンスを使用しません。 代わりに、ブラシ オプションでクリーチャーの画像の下のレイヤー上に白色の矩形を作成します。 矩形のサイズと寸法は、[Details (詳細)] パネルで [Image Size (画像サイズ)] オプションを使用して制御されます。
[Hierarchy (階層)] パネルでは、リストのその他のウィジェットに先行するウィジェットが背景レイヤー上に置かれ、それぞれの追加ウィジェットがリストの先行するウィジェットの上に置かれます。
![画像ウィジェットの [Image Size] プロパティ。](https://dev.epicgames.com/community/api/documentation/image/375ddc56-aeb7-4f80-92b8-60e6817e92cf?resizing_type=fit)
マテリアル インスタンスは、デザインのクリーチャーの写真のドロップ シャドウとして使用されます。
SDF テクスチャ
符号付き距離フィールド(SDF)は、位置を入力として使用し、その位置からの距離を出力する機能です。 たとえば、下の画像では、放射状の中心は 1 で、完全に白ですが、端に向かうにつれ 0 になり、完全に黒に変化します。 この概念を利用して、SDF では 0 から 1 までの範囲内の値を指定して効果を適用できます。
つまり、以下のことができます。
0.5 ～ 1.0 の値を使用してソリッド カラーを適用
0.49 ～ 0.0 の値を使用してフェーディング カラーを適用し、グローを演出
法線テクスチャでは 1 (白色) か 0 (黒色) であるため、これを行うことはありません。 SDF はこのように、データをすべて 0 から 1 の範囲で提供します。
この概念は写真にも適用できます。 写真が .png ファイルとして保存され、エフェクトが適用されているもののフルレンジの色とライティングが表現できていない場合、画像を編集で明るくしたり暗くしたりすると、ディテールが失われたり白飛びしたりするため、カスタマイズの範囲が限られてしまいます。
同じ画像が DSLR カメラで撮影されたものであれば、Raw ファイルにすべての色とライティングの情報が入っているため、詳細にカスタマイズすることができます。たとえば、暗い領域内のディテールを損なわずに明るくできますし、その逆のこともできます。
「UI」 > 「Texture」 > 「SDF」フォルダで SDF テクスチャの完全なプレビューを確認し、独自の外観の UI を作成できます。
「Icons」というフォルダに SDF アイコンがいっぱい入っています。
マテリアルの SDF テクスチャ
ほとんどの UI マテリアルはフラットな 2D マテリアルであり、0 と 1 のバイナリ値を使用してマテリアルの外側と中央を定義します。 2D マテリアルでは、 SDF テクスチャが Texture Sample ノードで使用され、SDF マテリアル関数とペアになっている場合、UI マテリアルの値を操作することで UI を調整することができます。
SDF テクスチャとマテリアル ノードを使用して UI マテリアルのさまざまな値を変更すると、次のような効果を演出できます。
影
Blur
グロー
シャイン
輪郭
アニメーション
スケーリング
通常のアセットは拡大縮小の際に品質が損なわれるのに対し、SDF テクスチャでは品質を損なうことなく簡単に拡大できるため、UI マテリアルはよりダイナミックでユニークなものになります。 SDF テクスチャでは最適化が適切に行われるため、1 つのテクスチャですべてのエフェクトを簡単に実行でき、マテリアル グラフがすっきりします。
一方、通常の白黒のテクスチャはマテリアル グラフ内で簡単に操作できないため、複数のテクスチャを使用する必要があります。 上の画像の場合、テクスチャにグローを加える最も簡単な方法は、煩雑なマテリアル グラフを作成するのではなく、放射状のグラデーションの上にテクスチャを重ねるやり方です。
Smooth Step Material ノード
Step タイプのマテリアル ノードは通常、マテリアルに急な遷移 (0 から 0.25 へ直接遷移するなど) を起こします。 一方 Smooth Step ノードは SDF 関数を使用し、UI マテリアルに滑らかな遷移を起こします。 テンプレート内で SDF テクスチャを使用している UI マテリアルは、Smooth Step Material ノードを使用すれば、マテリアルの中心から外端へスムーズに遷移できます。
要点
UI アセットでマテリアルとテクスチャを使用するうえでのいくつかの重要なポイントを以下に示します。
マテリアル関数を使用すると、体力およびシールド ゲージ マテリアルの関数を参照する事前定義済みのマテリアル ノードと、それらをインゲームのイベントに反応させるバックプレート UI マテリアルによって時間が節約されます。
SDF マテリアルおよびテクスチャでは、UI の見た目がダイナミックになります。
画像ウィジェットを重ねる方法がわかれば、簡単な外観の UI と視覚的に面白い UI の違いがわかります。
テクスチャは、視覚的に複雑でマテリアルでは再現できないデザインの要素に使用する必要があります。