基本マテリアル M_UI_Shape_Rectangle を使用してカスタム UI を作成するには、UMG ウィジェットで使用する基本マテリアルからマテリアル インスタンスを作成します。 形状マテリアルを使用すると、独自の UI デザインを作成するために使用できる平坦な形状を作成することもできます。 M_UI_Shape_Rectangle マテリアルは、コンテンツ ブラウザの「Fortnite」フォルダの「UI」 > 「Materials」にあります。
マテリアル インスタンスは、塗料のようにウィジェットを塗りつぶすために使用できます。 ウィジェットにはテクスチャを追加するよりもマテリアルを追加する方が適しています。マテリアルはインポートされたテクスチャよりメモリ使用量が少ないからです。 また、マテリアルは、特にフラットな UI デザインにおいて、UEFN と UE で UI を設計するためのより優れた方法です。その理由は、レンダリングがより簡単であることと、言うまでもなく、3D やダイナミック マテリアルをうまく活用できることです。
UMG ウィジェットは、Unreal Editor for Fortnite (UEFN) の複数の仕掛けの特別な UI 設定で参照されます。 UMG ウィジェットは、ヘッドアップ ディスプレイ (HUD) のデフォルトのフォートナイト UI を置き換えます。
マテリアルを使用して UI を作成する方法の詳細なチュートリアルについては、以下を参照してください。
カスタム UI の形状を作成する
カスタム UI 形状を作成する前に、UI の外観を決定し、M_UI_Shape_Rectangle マテリアルを使用して UI ウィジェットの外観をデザインします。 これは、カスタマイズされた正方形のような単純なデザインから、花の形状のような複雑なデザインまであります。 デザインには複数の形状が必要になる場合があり、ウィジェットを作成するときに一緒に配置することができます。
形状を作成するには、まずオリジナルの M_UI_Shape_Rectangle マテリアルの マテリアル インスタンスを作成する必要があります。
マテリアルのサムネイルを右クリックして、[Create Material Instance (マテリアル インスタンスの作成)] を選択します。
[Save Asset As (アセットに名前を付けて保存)] ウィンドウで、マテリアル インスタンスに名前を付けます。これは、プロジェクトのコンテンツ フォルダに保存されます。 自分のアセットには、グループにまとめた名前を付けましょう。 たとえば、UEFN に用意されているマテリアル インスタンスの名前は「M_UGC_」で始まり「_Inst」で終わります。 マテリアル インスタンス名は、M_UGC_Circus_Inst といった名前である必要があります。
新しいマテリアル インスタンスをダブルクリックして、マテリアル インスタンス エディタを表示します。 アセットを右クリックして [Edit (編集)] を選択してもエディタにアクセスできます。
マテリアル インスタンス エディタの [Details (詳細)] パネルには、マテリアル インスタンスを詳細にカスタマイズするために必要なツールがあります。 これらのツールは次のセクションにあります。
[1] 塗りつぶし
[2] ストローク
[3] カラー
[4] ステート(Hovered/Focused/Pressed/Disabled)
Fill (塗りつぶし)
[Fill] セクションのオプションはマテリアルの形状に影響します。 [Fill Transparency (塗りつぶしの透明度)] などの多くのオプションでは、0.0 の値で設定が無効になり、1.0 の値で設定が有効になります。 形状がビューポートに表示されるように、必ず [Fill Transparency] オプションを有効にしてください。
上の画像では、形状を作成するために使用された調整済みの設定が表示されています。
Stroke (ストローク)
[Stroke] セクションのオプションを調整することで、カスタマイズ可能な境界線を作成することができます。 プリセットの境界線の色は青であるため、[Stroke] のオプションの値を調整しながらデザインを確認することができます。
上の画像では、[Stroke Transparency (ストロークの透明度)] オプションを 1.0 に設定し、青い境界線を表示しています。
Colors (カラー)
[Color] タブのオプションを変更すると、作成する形状をさらにカスタマイズすることができます。 これらのオプションは、対応するブール値のボックスをクリックしてオプションを「オン」に設定しないと、調整できません。
形状と境界線の両方にグラデーションを作成することもできます。 グラデーションは、ビューポートで変更しながら、プレビューできます。
上の画像では、色がグラデーションで適用されています。 このオプションは、[Gradient on/off (グラデーションのオン/オフ)] 値を 0.0 より大きい値に調整することで有効になります。
State (ステート)
このオプションは [Color] セクションにあります。このオプションを変更することで、各種ステートで形状の色を設定することができます。 ホバー (カーソルを乗せる)、フォーカス (フォーカスしている)、プレス (ボタンを押下) などのプレイヤーのアクションごとにカスタム カラーを設定したり、UI 形状を無効にすることができます。
[Phys Material (物理マテリアル)] オプションにマテリアルを設定しない限り、作成したウィジェットにインポートすると、形状の境界が透明になります。 これを避けるには、実際のマテリアルとしてレンダリングできるように、物理マテリアルを [Wood (木)] に設定します。
UI 形状のカスタマイズが完了したら、右上のフロッピー ディスクのアイコンをクリックして保存します。 カスタマイズされたマテリアル インスタンスは、プロジェクトのコンテンツ フォルダに保存されます。
このチュートリアルの例では、ひまわりとボタンの背景で構成するために、組み合わせた形状を使用しています。
UI ウィジェットを作成する
次に、プレイヤーが操作するためのウィジェットを作成する必要があります。 ウィジェットを作成して、[Hierarchy (階層)] タブを整理する方法の詳細については、「UI ウィジェット エディタ」のドキュメントを参照してください。
以上で、デザインのすべての要素のマテリアル インスタンスを作成できました。
このチュートリアルの例は、花弁と花盤の複数のインスタンスで構成されています。 ボタンは、ベースと、ボタン アイコンとして使用される 2 つの画像で構成されています。
これらのマテリアル インスタンスをウィジェット ブループリントに配置して、カスタム デザインを作成します。 ウィジェット ブループリントは、ポップアップ ダイアログの仕掛けにインポートされ、あらかじめ用意されている UI をオーバーライドします。
カスタム UI を構成するマテリアル インスタンスとボタン ウィジェットの両方を保持する新しいウィジェット ブループリントを作成します。 これが、仕掛けの設定に追加されるウィジェット ブループリントになります。
このウィジェットで、すべてのカスタム マテリアル インスタンスを組み合わせてデザインを作成します。 UI ウィジェットを作成したら、Common、Common UI、Panel、UIKIT、User Created からアセットをウィジェット名の下にドラッグします。
上の画像では、アセットは [Hierarchy] タブで整理され、カスタム UI の花の形状を作成するためにビューポートで再配置されています。
デザインに満足したら、ブループリントを保存し、コンテンツ ブラウザに戻ります。 これで、このブループリントがカスタム UI を表示するポップアップ ダイアログの仕掛けにインポートされます。
仕掛けにウィジェットを追加する
デザインの準備ができたら、ウィジェットを表示するポップアップ ダイアログの仕掛けを配置します。
ウィジェットを [Details] > [Modal Widget (モーダル ウィジェット)] > [Template Override Class (テンプレート オーバーライド クラス)] にドラッグします。
作成したウィジェットは、起動したセッションで表示およびテストすることができます。