メーター マテリアルは UI での使用に最適です。 このマテリアルは、UMG 画像ウィジェットで参照して、体力、撃破数、インゲームのアイテムや通貨の収集を追跡できます。 このチュートリアルを使用して、独自のメーター マテリアルを作成し、カスタム UI デザインで使用します。
このマテリアルは、プレイヤーの体力、シールド、または他の種類のプレイヤー中心の統計をトラッキングするために作成したカスタム マテリアルを使用して、デフォルトのフォートナイトの外観を上書きできます。
このマテリアルのデザインにはアイコンが使用されています。 Unreal Editor for Fortnite (UEFN) には、多数のアイコンがネイティブに付属しています。 「Fortnite」フォルダの「Textures」 > 「Icons」の下にあるアイコンを見つけます。
マテリアルを作成する
すべてのマテリアルはコンテンツ ブラウザで作成されます。 プロジェクトを整理するには、フォルダを作成して、すべてのマテリアルを格納します。
コンテンツ ブラウザで右クリックして、コンテキスト メニューを開きます。
コンテキスト メニューから [Material (マテリアル)] を選択します。
マテリアルに「M_Meter」という名前を付けます。
マテリアルのサムネイルをダブルクリックして、マテリアル エディタを開きます。
メーター マテリアルを作成するには、Fab から UI Material Lab をダウンロードする必要があります。
マテリアル ノードとその動作の詳細については、「Material ノードと設定」を参照してください。
マテリアル ノード
以下は、このチュートリアルで使用されるマテリアル ノードと、最終製品でのその目的のリストです。 この説明をスキップしてマテリアルの作成を開始するには、ここをクリックしてください。
| マテリアルノード | 目的 |
|---|---|
アイコンと進行度の塗りつぶしに色を追加します。 | |
アイコンの下に背景マスクを追加するために使用されます。 進行度に応じて背景をマスクする進捗バーとしても使用されます。 | |
UI マテリアルにテクスチャを追加する方法を提供します。 | |
背景色の上に色付きアイコンを重ねたり、背景の上にアイコンのマスクを作成したりするために使用されます。 | |
アイコンの UV テクスチャ座標を 2 チャンネルのベクター値の形式で出力します。 | |
Material Function > UI Scale | テクスチャ関数は、マテリアル関数ノードのサブカテゴリです。 これにより、アイコンの UV をスケーリングできるようになります。 |
Material Function > UI SDF Circle | アイコンの背後にある進捗バーをマスクする方法と、円のどの程度を背景色で塗りつぶすかを指定します。 通常、このマテリアル関数は、マテリアル内に円を描画するために使用されます。 UI Material Lab の他の SDF 形状マテリアル関数 (UI SDF Box など) に置き換えて、異なる形状を生成することができます。 |
アイコンの X 軸と Y 軸を均等に拡大縮小するために使用されます。ここでは 2 つのスカラー パラメータを追加します。 1 つはアイコンの X を縮小するため、もう 1 つはアイコンの Y を縮小するためのもので、これらを MF_UI_Scale に接続します。 | |
アイコンがラップされたりタイル状に並んだりしないように、アイコンの UV は 0 から 1 の間にクランプされます。 | |
トラッカーの仕掛けの進行度スカラー パラメータに 0 から 10 の範囲を作成するために使用されます。 ConstantBiasScale は、パラメータから設定された値を受け取り、バイアス値を差し引いて、スケール値で乗算します。 | |
Multiply ノードは 2 つの入力を受け取り、それらを乗算して結果を出力します。 この例では、テクスチャの RGB チャネルが Vector3 ノードによって乗算され、背景が色付けされます。 さらに、LinearGradient に Vector3 を乗算し、アイコンに色を付けます。 | |
Step | X 座標と Y 座標のしきい値を作成します。 しきい値は、UI の背景マテリアル用のコンテナを作成します。 Step ノードは、しきい値を超える値を 1 に、しきい値を下回る値を 0 に変換します。 これにより、塗りつぶされた領域と塗りつぶされていない領域が明確に区別される進捗バーのマスクが出力されます。 |
Linear Gradient の UGradient 値を受け取り、次の整数に切り上げて、結果を出力します。 これにより、基本的な単色の背景を簡単に作成できます。 | |
Constant | マテリアル属性に値を追加する方法を提供します。 |
メイン マテリアル ノードを準備する
マテリアル ノードを追加する前に、メイン マテリアル ノード (MMN) の設定を変更して、UI で使用するマテリアルを準備します。 MMN の設定によって、MMN で使用できる入力とマテリアルを使用できる場所が決まります。
MMN ノードを選択します。
マテリアル エディタの [Details (詳細)] パネルで、[Material Domain (マテリアル ドメイン)] を [User Interface (ユーザー インターフェース)] に設定します。
[Blend Mode (ブレンド モード)] を [Translucent (透過)] に設定します。
画像をクリックすると拡大表示されます。
![[Details (詳細)] パネルで、[Material Domain] を [User Interface] に設定し、[Blend Mode] を [Translucent] に設定します。](https://dev.epicgames.com/community/api/documentation/image/0cc0edf8-8683-4ab6-b184-11e8952bea26?resizing_type=fit)
進行度の色を設定する
メーター マテリアルを開始するには、UMG で Image ウィジェットを通じて識別できる進行度の色を設定します。 この進行度の色を使用して、カスタム UI デザインを作成できます。
マテリアル グラフ内で右クリックし、ノード メニューを開きます。
検索バーに「Linear Gradient」と入力します。 ドロップダウンから [LinearGradient] を選択します。 ノードがグラフ上に表示されます。
手順 1 と 2 を繰り返して、次のノードをマテリアル グラフに追加します。
Ceil
Multiply
Constant3vector
Constant3Vector ノードの白いピンをドラッグし、Multiply ノードの A 入力に接続します。 ビューポート内の図形の色が変わります。
マテリアル グラフで Constant3Vector マテリアル ノードを選択します。 グラフ内のノードが強調表示され、選択されたことが示されます。
ノード上の黒い四角をクリックして、カラー ホイールを開きます。 カラーホイールからマテリアルの色を選択します。
Linear Gradient ノードの UGradient ピンをドラッグし、Ceil ノードの左入力に接続します。
Ceil の右ピンをドラッグし、Multiply ノードの B 入力に接続します。
このノード構成は、UI コンテナの色を提供します。
グラフ領域を右クリックし、グラフに LinearInterpolate ノードを追加します。
Multiply ノードをドラッグし、1 つ目の LinearInterpolate ノードの A 入力 に接続します。
マテリアルのこの部分は、コンテナの背景を塗りつぶすことでメーター内の進行度をトラッキングするために使用されます。
ノードをグループ化して 1 つのユニットとして移動するには、次の手順を実行します。
左クリックしてノードのグループの周囲をドラッグします。 選択されたすべてのノードが強調表示されます。
ノードをつかんでグラフ上でドラッグすると、選択したすべてのノードが 1 つのものとして一緒に移動します。
アイコンのスケーリングと色を設定する
マテリアルのこのセクションでは、アイコンを選択してスケールし、マテリアルと UI のアイコンの色を選択します。 アイコンは、「Fortnite」 > 「Textures」 > 「Icons」フォルダにあります。
グラフ領域を右クリックし、グラフに次のノードを追加します。
TextureCoordinate
AppendVector
固定
TextureSample
Constant3vector
Multiply
Constant
グラフ内の Constant ノードを選択し、右クリックしてドロップダウンから [Duplicate (複製)] を選択します。 最初のノードの上に別の Constant ノードが表示されます。 複製をオリジナルの下に移動させます。
Multiply ノードを複製します。
LinearInterpolate (Lerp) ノードを複製します。
グラフ内の上の Constant ノードを選択し、デフォルト値として 0.7 を追加します。(未定義)
ノードを右クリックし、ドロップダウンから [Convert to Parameter] を選択します。 パラメータに「IconScaleX」と名前を付けます。 このノードは、アイコンの X 座標のスケール サイズを制御します。
グラフ内の下の Constant ノードを選択し、デフォルト値として 0.7 を追加します。
ノードを右クリックし、ドロップダウンから [Convert to Parameter (パラメータに変換)] を選択します。 パラメータに「IconScaleY」という名前を付けます。 このノードは、アイコンの Y 座標のスケール サイズを制御します。
IconScaleX パラメータ ノードをドラッグし、AppendVector ノードの A 入力に接続します。
IconScaleY パラメータ ノードをドラッグし、AppendVector ノードの B 入力に接続します。
パラメータ ノードで設定された IconScale X および Y 値は、マテリアル インスタンスに変換されると、マテリアルの外部で制御できます。
次に、Material Function ノードを作成して、アイコンの UV をスケーリングする関数をマテリアルに追加する必要があります。
マテリアル関数を設定する：UI_Scale
このステップでは、マテリアル関数を作成し、ノードで使用する関数を検索する方法を学習します。
グラフ内で右クリックし、検索バーに「MaterialFunction」と入力します。 ドロップダウンから [MaterialFunctionCall] を選択します。 グラフに MaterialFunctionCall ノードが表示されます。
[Details] パネルで [Material Function (マテリアル関数)] ドロップダウン メニューをクリックし、検索バーに「UI_Scale」と入力して、ドロップダウンから [MF_UI_Scale] を選択します。 MaterialFunctionCall ノードは UI Scale ノードに変換されます。
UI_Scale 関数は、マテリアル関数を使用してアイコンの UV のスケールを拡大または縮小する方法を提供します。 マテリアル関数は、マテリアル関数ノードを通じたマテリアル内でのみ使用できます。
アイコン UV を設定する
次に、パラメータと UI スケーリングから情報を取得するときにスケーリングされるマテリアルにアイコンとアイコンの色を追加します。
TextureCoordinate ノードをドラッグし、MF_UI_Scale ノードの UVs (V2) 入力に接続します。
AppendVector ノードをドラッグし、MF_UI_Scale ノードの Scale (V2) 入力に接続します。
MF_UI_Scale ノードの Result ピンをドラッグし、Clamp ノードの白の入力ピンに接続します。
Texture Sample ノードを選択して、[Details] パネルでオプションを開きます。
[Texture (テクスチャ)] ドロップダウンを開きます。
検索バーに「icon」と入力します。
ドロップダウンからアイコンを選択します。
Clamp ノードの白いピンをドラッグし、Texture Sample ノードの UVs 入力ピンに接続します。
Texture Sample ノードの RGB ピンをドラッグし、1 つ目の Multiply ノードの A 入力に接続します。
Texture Sample ノードの A ピンをドラッグし、1 つ目の Multiply ノードの B 入力に接続します。
Texture Sample ノードの A ピンを再度ドラッグし、2 つ目の LinearInterpolate (Lerp) ノードの Alpha 入力に接続します。
1 つ目の Multiply ノードをドラッグし、2 つ目の Multiply ノードの B 入力に接続します。
Constant3Vector ノードを選択して、[Details] パネルでオプションを開きます。
Constant フィールドをクリックして、カラー ホイールを開きます。
カラーホイールからアイコンの色を選択します。
Constant3Vector ノードの白いピンをドラッグし、2 つ目の Multiply ノードの A 入力に接続します。
2 つ目の Multiply ノードの白いピンをドラッグし、1 つ目の LinearInterpolate (Lerp) ノードの B 入力に接続します。
1 つ目の Multiply ノードの白いピンをドラッグし、1 つ目の LinearInterpolate (Lerp) ノードの Alpha 入力に接続します。
1 つ目の Multiply ノードの白いピンをドラッグし、2 つ目の LinearInterpolate (Lerp) ノードの B 入力に接続します。
1 つ目の LinearInterpolate (Lerp) ノードの白いピンをドラッグし、Main Material ノードの Final Color 入力にドラッグします。
アイコンがマテリアル プレビュー ウィンドウに表示されるようになりました。
次に、進捗バーのマスクを設定します。 これは、下の GIF のように、撃破数の増加に対応するマテリアルの部分のみを公開することによって機能します。
進捗バー マスクを設定する
マテリアルの最後のステップは、ウィジェットまたはシーケンサーで呼び出すことができる進捗バーのマスクを作成し、UI マテリアルをアニメーション化して、プレイヤーが敵を撃破するときに進捗バーがマテリアルの色で塗りつぶされるようにすることです。
次の一連のノード用のスペースを作成する必要があります。 左クリックして現在存在するすべてのノードを選択して、ドラッグしながら 1 つのグループとして左に移動します。
マスク設定を 2 つ目の LinearInterpolate (Lerp) ノードに接続する必要があります。 2 つ目の LinearInterpolate (Lerp) ノードを選択し、Main Material ノードに向かって右に移動します。 この時点でのノード構成は次のようになります。
画像をクリックすると拡大表示されます。
マテリアルのこのセクションでは、コンテナ内の X および Y 座標に基づいてマテリアルのプロパティをマスクする必要があります。 これらの座標は、プレイヤーの撃破数が増えるにつれてマテリアルを公開するためにも使用されます。
グラフ領域を右クリックし、グラフに次のノードを追加します。
Constant
ConstantBiasScale
LinearGradient
Step
Multiply
Constant ノードを選択し、ノードを右クリックして、ドロップダウンから [Duplicate] を選択します。
1 つ目の Constant ノードを選択し、値を 5.0 に設定します。
ノードを右クリックし、[Turn into Parameter (パラメータに変換)] を選択します。
パラメータに「TrackerProgress」と名前を付けます。
このパラメータは、UMG とシーケンサーで使用され、プレイヤーの撃破数を追跡し、コンテナ内のマテリアルを公開します。
Tracker Progress ノードの白いピンをドラッグし、ConstantBiasScale ノードに接続します。
ConstantBiasScale ノードを選択し、[Details] パネルでバイアス値を 0 に設定して、スケールを 0.1 に設定します。 これにより、TrackerProgress がトラッカーの 0 から 10 の値に正規化されます。
ConstantBiasScale ノードをドラッグし、Step ノードの Y 入力に接続します。
LinearGradient ノードの VGradient ピンをドラッグし、Step ノードの X 入力に接続します。
Step ノードの白いピンをドラッグし、Multiply ノードの B 入力に接続します。
2 つ目の Constant ノードを選択し、値を 0.9 に設定します。
グラフを右クリックし、検索バーに「MaterialFunctionCall」と入力します。
Material Function ノードを選択すると、そのオプションが [Details] パネルで開きます。
検索バーに「UI_SDF_Circle」と入力します。
ドロップダウンから [UI_SDF_Circle] を選択します。
![グラフを右クリックし、検索バーに「MaterialFunctionCall」と入力します。 [Details] パネルで、マテリアル関数ドロップダウンから「UI_SDF_Circle」を検索して選択します。](https://dev.epicgames.com/community/api/documentation/image/416c0f4d-77fc-44fa-ba72-2dab28aa4df5?resizing_type=fit)
このマテリアル関数は、Constant ノードを通じてコンテナのサイズを制御し、マテリアル コンテナの形状を決定します。 この場合は円形のコンテナです。
2 つ目の Constant ノードをドラッグし、MF_UI_SDF_Circle ノードの Size(s) 入力に接続します。
MF_UI_SDF_Circle ノードの Fill ピンをドラッグし、Multiply ノードの A 入力に接続します。
Multiply ノードの白いピンをドラッグし、2 つ目の LinearInterpolate (Lerp) ノードの A 入力に接続します。
2 つ目の LinearInterpolate (Lerp) ノードの白いピンをドラッグし、Main Material ノードの Opacity 入力に接続します。
マテリアルが完成しました。完成したノード構成は次の画像のようになります。
画像をクリックすると拡大表示されます。
UMG でこのマテリアルを使用するには、マテリアル インスタンスに変換します。 マテリアル インスタンスのパラメータを UMG およびシーケンサーでオーバーライド、オン/オフ、呼び出しして、マテリアルが使用される UI をアニメートすることができます。
マテリアル インスタンスを作成する方法
コンテンツ ブラウザでマテリアルのサムネイルを右クリックします。
ドロップダウンから [Create Material Instance (マテリアル インスタンスを作成)] を選択します。