UI 上のポストプロセス マテリアル

これまで、ポストプロセス ボリュームを使用して、シーンの外観を制御する既存の設定を調整してきました。 独自のカスタム ポストプロセス エフェクトを追加するには、ポストプロセス マテリアルを作成します。 マテリアルは、そのエフェクトをカメラに適用したり、ポストプロセス ボリュームに追加したりすることで、画面に表示されるプレイヤーの視覚内容に影響を与えることができます。

このシリーズでは、プレイヤーがダメージを受けた際に、画面上でダメージを視覚的に伝えるエフェクトを追加します。 画面の端が赤く点滅します。 プレイヤーのヘルスが減少するにつれてエフェクトが強まり、画面上のスペースをより多く占有します。

これを実装するには、次の手順を実行してください。

• 親ポストプロセス マテリアルを構築します。

• 親マテリアルのパラメータを制御するマテリアル インスタンスを作成します。

• ブループリント ビジュアル スクリプティングを使用して、画面上のエフェクトを表示および制御します。

• 一定時間後にヘルス (HP) が回復し、ダメージを受けたプレイヤーの視覚効果が消えるよう、プレイヤー キャラクターのブループリント ロジックを変更します。

開始する前に

「パズル アドベンチャー ゲームのアート パス」チュートリアル シリーズの以前のセクションで取り上げられた、次のトピックをすでに理解できていることを確認してください。

• 建築マテリアルとマテリアル インスタンス

• レベルにポスト プロセス ボリュームを追加します。

サンプル プロジェクト ファイルに含まれる次のアセットを使用します。

• BP_AdventureCharacter ブループリント

ダメージを表示するマテリアルを作成する

まず、エフェクトのアピアランスを定義する、ベースとなるマテリアルを作成します。 このマテリアルはグレースケール マスクを作成し、インゲームのカメラ ビューをマスクの明るい部分に表示し、点滅する赤色のダメージ エフェクトをマスクの暗い部分に表示します。

新しいポストプロセス マテリアルを作成するには、次の手順を実行してください。

1. コンテンツ ブラウザで、[AdventureGame] > [Artist (アーティスト)] > [Materials (マテリアル)] フォルダに移動します。

2. [Materials (マテリアル)] フォルダ内で、新しいマテリアルアセットをM_Screen_Damageという名前で作成します。 マテリアルを開きます。

3. [Details　(詳細)] パネルで、マテリアル ドメインを [Post Process (ポストプロセス)] に変更します。

   マテリアルのルートノードで利用可能なピンが変更されます。 ポストプロセス マテリアルではシーン ライティングを使用しないため、エミッシブ カラーのみを制御します。

サーフェスタイプのマテリアルでは、エミッシブ カラーがマテリアルが放出する光の量を制御します。 マテリアルのドメインをポスト プロセスに変更すると、サーフェスをシェーディングせずに画面に直接書き込むようになります。 この場合、エミッシブ カラーが各ピクセルの最終的な出力カラーを制御します。

ダメージ エフェクトの形状を定義する

次に、ポストプロセス エフェクトの形状を定義するマスクから始めて、マテリアルのグラフを作成します。 まず、GeneratedRoundRectNode を使用して、角丸矩形の形状にグレースケール マスクを描画します。形状の内側は白色で、外側は黒色です。 その後、マスクの各部に表示する内容を定義します。

グレースケール マスクを作成するには次の手順を実行します。

1. マテリアル グラフで、マテリアルのルート ノードの左側に GeneratedRoundRect ノードを追加します。

   

   ノードをマテリアルのルート ノードに接続すると、プレビュー ウィンドウでノード出力の例を確認できます。

2. ScreenPosition ノードを追加します。

3. ScreenPosition ノードの ViewportUV 出力を GeneratedRoundRect ノードの UV Coords (V2) 入力に接続します。

   ViewportUV 出力は、ビューポート画面の座標と同じ空間内にマスクを描画するように GeneratedRoundRect ノードに指示します。

ベクター パラメータでマスクの形状を制御するには、次の手順を実行します。

1. Constant4Vector ノードを追加します。 このノードは、カラー値を作成するために使用することも、GeneratedRoundRect マスクのサイズと形状を制御できる値の集合として幅広くご利用いただけます。

   キーボードで 4 キーを押したままグラフをクリックすると、このノードが追加されます。

2. Vector ノードを右クリックし、[Convert to Parameter (パラメータに変換)] を選択して定数をベクター パラメータに変換します。 「Damage Mask Controls」という名前を付けます。

   

   ベクター パラメータを使用することで、単一値の Constant (またはスカラー パラメータ) ノードを分離した場合と同様に各チャンネルの値を使用でき、グラフをより効率的かつ整然としたものにすることができます。 デフォルトでは、値には RGBA カラー チャンネルのラベルが付いていますが、ノードの [Details (詳細)] パネルで名前を変更することで、これらの値の名前を好きなように表現させることができます。

3. [Details (詳細)] パネルの [Parameter Customization (パラメータのカスタマイズ)] カテゴリで [Channel Names (チャンネル名)] を展開し、ベクター パラメータ ノードの各カラー チャンネルに名前を割り当てます。 これらのチャンネルには、GeneratedRoundRect ノードの入力に対応する名前を付けます。

   • R = サイズ X

   • G = サイズ Y

   • B = コーナー半径

   • A = シャープネス

   [Details (詳細)] パネルのパラメータ チャンネル名	ダメージ マスク コントロール (チャンネル名を変更)

4. [Material Expression Vector Parameter (マテリアル式ベクター パラメータ)] カテゴリで [Default Value (デフォルト値)] を展開し、各チャンネルのデフォルト値を次のように設定します。

   • サイズ X = 1

   • サイズ Y = 1

   • コーナー半径 = 0.4

   • シャープネス = 0.2

5. グラフで Constant Vector ノードの [Size X] ピンをドラッグし、AppendVector ノードを作成します。

6. [Size Y] ピンを Append ノードの [B] 入力に接続します。

7. Append ノードの出力ピンを GeneratedRoundRect ノードの Box Dimensions ピンに接続します。

8. ダメージ マスク コントロールと GeneratedRoundRect ノードの [Corner Radius] ピンおよび [Sharpness] ピンを接続します。

   

9. これらのノードの周りに「Damage Mask Falloff」という名前のコメント ブロックを追加します。

矩形のマスクを表示するには、次の手順に従います。

1. GeneratedRoundRect ノードをマテリアルのルート ノードの Emissive Color 入力に接続します。

   

2. Damage Mask Controls ノードを選択し、さまざまな Size、Corner Radius、Sharpness の値を試し、それぞれが矩形に与える影響を確認します。

3. 各値を以前に設定したデフォルト値にリセットし、GeneratedRoundRect とメイン マテリアル ノード間のワイヤーを削除します。

マスクの異なる部分にビジュアルを表示します。

拡張されたマテリアル インスタンスでは、線形補間 (lerp) を使用して、石の床マテリアルの乾いた外観と濡れた外観をブレンドしました。 床マテリアルの Lerp ノードは、Timeline を Alpha 入力として使用し、2 つのパラメータ値をブレンドします。 Lerp ノードでは、Alpha 入力は、A 入力と B 入力の間で Lerp がどの程度ブレンドするかを制御します。 Alpha が 0 の場合は全て A になります。 Alpha が 1 の場合は全て B を取得します。

アルファ値は、各ピクセルに値 (白色の領域は B を表示、黒色の領域は A を表示、灰色の領域はそれらをブレンド) を提供する、グレースケール マスクから取得することもできます。 このセクションでは、Lerp ノードを使用して、画面中央の明瞭なゲームビュー (マスクが白色) から画面の端に沿った赤色 (マスクが黒色) へとブレンドします。

ゲーム画面と、受けたダメージを表す赤色をブレンドするには、次の手順を実行してください。

1. GeneratedRoundRect ノードの右側に、LinearInterpolate (または Lerp) ノードを追加します。 ノードにカーソルを合わせ、[Toggle Comment Bubble (コメント切り替え)] ボタンをクリックし、1 と入力します。

   このグラフでは複数の Lerp ノードを使用しているため、Lerp ノードに番号を付けることでチュートリアルをより簡単に進めることができます。 このノードを Lerp(1) と呼びます。

   

2. GeneratedRoundRect Result 出力を Lerp (1) ノードの Alpha 入力に接続します。

3. SceneTexture ノードを追加します。

4. [Details (詳細)] パネルで [Scene Texture Id (シーン テクスチャ ID)] を「PostProcessInput0」に変更します。

   

5. SceneTexture ノードの Color 出力を Lerp (1) ノードの B 入力に接続します。

   

6. グラフで　Constant3Vector を追加します。 ノードを右クリックし、[Convert to Parameter (パラメータに変換)] を選択します。 パラメータに「Damage Color」という名前を付けます。 このパラメータは、ダメージ エフェクトの色を制御します。

7. Default Value の横の色見本をクリックし、色を赤色 (R = 1) に変更します。

8. Damage Color ノードの上部 (白) のピンを Lerp (1) ノードの A 入力に接続します。 ダメージカラーの一番上のピンは、3 つの RGB カラー チャンネルのみを出力します。

9. Lerp (1) 出力をマテリアルのルート ノードの Emissive Color ピンに接続して、プレビュー ウィンドウで結果を確認します。 Float3 から Float4 への変換の問題による未定義の算術エラーが表示されます。

   

Damage Color ノードの上部のピンは Float3 値 (3 チャンネル、RGB) を出力し、SceneTexture ノードの Color ピンは Float4 値 (4 チャンネル、RGBA) を出力します。 このエラーを解決し、値の型を一致させるには、コンポーネント マスクを使用して、シーン テクスチャのカラー出力からアルファチャンネルを削除します。これは、3 つのチャンネル (RGB) のみを一致させる必要があるためです。 コンポーネント マスクは、このようなエラーを解決するための一般的な方法です。

SceneTexture ノードの色を Float3 値に変換してこのエラーを解決するには、次の手順を実行します。

1. ComponentMask ノードを追加し、SceneTexture ノードの Color ピンを Mask ノードに接続します。

2. Mask ノードの出力を Lerp (1) ノードの B 入力に接続します。

   

3. Mask ノードの下部にある矢印をクリックすると、カラー出力の各チャンネルのチェックボックスを確認できます。

4. デフォルトでは、コンポーネント マスクは R と G チャンネルのみをマスクします。 B の横にチェックマークを追加します。 これは Float3 コンポーネント マスクを作成し、両方の Lerp (1) 入力が同じチャンネルを使用できるようにします。

   

グラフは次のようになります。

マテリアルはプレビュー ビューポートで次のようになります。

エフェクトにノイズとバリエーションを追加する

このセクションでは、フレームの外周にテクスチャを適用することで、マテリアルのノイズセクションを構築します。 これを使用すると、マテリアル パラメータを使用して、ゲーム内のキャラクターのダメージに関連するエフェクトの最終的な外観を演出することができます。

素材にノイズを追加するには、次の手順を実行します。

1. グラフの一番下に ScreenAlignedUVs ノードを追加します。 ScreenAlignedUVs ノードでは、テクスチャまたはエフェクトを画面全体にマッピングできます。 ビューポート全体または画面全体の UV 座標を生成します。

2. X 100%、Y 100% ピンからドラッグし、Multiply ノードを追加します。

3. 右クリックして Constant ノードを作成します。 これを右クリックして [Convert to Parameter(パラメータに変換)] を選択し、「Noise Tiling」という名前を付けます。 Multiply ノードの B 入力に接続します。

4. Noise Tiling ノードで、Default Value を 1 に設定します。

   

5. Multiply ノードの出力ピンをドラッグして TextureSample ノードを作成し、そのワイヤーを UV 入力に接続します。

6. TextureSample を右クリックしてパラメータに変換し、Noise Texture という名前を付けます。

   

7. Noise Texture ノードを選択した状態で、[Details (詳細)] パネルの Material Expression Texture Base カテゴリで Noise Texture テクスチャの割り当てスロットを TilingNoise05 に設定します。

   

   このテクスチャは、Unreal Engine に含まれるエンジン コンテンツの一部です。 独自のテンプレートを使用することもできますが、他に選択肢がない場合は、これをデフォルトとして使用することをおすすめします。 異なるテクスチャを使用した場合は、このチュートリアルで紹介する結果とは異なる結果になる可能性があることに注意してください。

8. Noise Texture ノードの R チャンネルからドラッグし、Multiply ノードを作成します。

9. B ピンを右クリックして [Promote to Parameter] を選択します。 パラメータ名を「Noise Falloff」とし、Default Value を 1 に設定します。

10. Multiply ノードの出力ピンからドラッグし、Power ノードを作成します。

11. Exp ピンを右クリックして、[Promote to Parameter (パラメータへ昇格)] を選択します。 パラメータを「Noise Amount」と名付け、Default Value を 1 に設定します。

12. 先ほど作成した 8 つのノードを選択し、C キーを押して、周りにコメント ボックスを追加します。 コメント ボックスに「Noise in Damage Mask」というラベルを付けます。

    

この時点で、Power ノードを M_Screen_Damage マテリアルのルート ノードの Emissive Color 入力に直接接続することで、この部分をテストすることができます。 プレビュー ウィンドウに次の内容が表示されます：

テストが完了したら、マテリアルのルート ノードをノイズ テクスチャ ロジックから切り離し、Lerp (1) ノードに再接続します。 このガイドの後半で全てを接続する前に、マテリアルの他の部分を作成します。

マスクにノイズを追加する

ノイズ マスクができたので、Multiply ノードを使用して 2 つを組み合わせ、ダメージ マスク フォールオフにブレンドする必要があります。 これは、画面の中心に最も近いダメージ マスクの内側のエッジの結果にノイズ マスクを適用するものです。

ノイズ テクスチャをマスクの黒い領域に追加するには、次の手順を実行します。

1. M_Screen_Damage マテリアルのルート ノードを右に移動し、GeneratedRoundRect ノードの隣にスペースを作成します。 ここに新しいロジックを追加するため、GeneratedRoundRect ノードと既存の Lerp (1) ノードの間のワイヤーを削除します。

2. グラフを右クリックして、新しい Lerp ノードを作成します。 ノードの上にカーソルを置き、[Toggle Comment Bubble (コメントの吹き出しを切り替える)] をクリックして、コメントとして 2 と入力します。

   

3. GenerateRoundRect ノードの Result ピンを Lerp (2) ノードの Alpha ピンに接続します。

4. GenerateRoundRectノードの出力からドラッグし、One Minus ノードを作成します。

   

5. One Minus ノードをドラッグして Add ノードを作成し、その出力を Lerp (2) ノードの [B] ピンに接続します。

   

6. One Minus ノードをドラッグして Multiply ノードを追加します。

   

7. Multiply 出力からドラッグして、新しい One Minus ノードを追加し、Add ノードの B 入力に接続します。

   

8. Lerp (2) ノードの後に、Saturate ノードを追加します。 これは出力値を 0 ～ 1 の範囲に制限します。

9. このロジックにコメントを追加し、「Gets the Brightest Spots of the Mask」というラベルを付けます。

   

この時点で、マテリアルは次のようになっているはずです。

Noise、Mask、Damage Color の各セクションを接続します。

グラフの Noise、Damage Mask、および Damage Color の各要素を接続するには、以下の手順を実行してください。

1. ノイズ マスク ロジックで Power ノードをドラッグし、ダメージ マスク エリア ロジックの Multiply ノードの B 入力に接続します。

   ワイヤーに Reroute ノードを使用することで、パスを明確にし、グラフを整理することができます。 ワイヤーをダブルクリックして再ルーティングノードを追加し、ドラッグしてワイヤーの経路を変更します。

2. Saturate ノードの出力ピンを Lerp (1) ノードの Alpha ピンに接続します。

   

3. 変更を保存してマテリアルに適用します。

Lerp (1) ノードをマテリアルのルート ノードの Emissive Color 入力に接続すると、結果が表示されます。

これで矩形のマスク領域を定義し、マスクに色を適用して、テクスチャを使用してノイズ マスクを作成し、マテリアル エディタのプレビュー ウィンドウにブレンドすることができました。

ダメージ エフェクトにパルスを追加する

このセクションでは、プレイヤーがさらにダメージを受けると、そのエッジの周りの赤色のダメージ インジケーターが点滅するマテリアル ロジックを構築します。 Sine ノードを使用してパルス動作を駆動し、正の値のみを使用するように正弦波を変更します。

ダメージが増加するにつれて赤色のエフェクトが点滅するようにするには、次の手順を実行してください。

1. グラフの上部にある空のセクションに、Time ノードを追加します。

   Time ノードはエディタ内で時間の経過を出力し、マテリアルをアニメーション化したり、指定した期間にわたって変更する際に役立ちます。

2. そのピンをドラッグして Multiply ノードを追加します。

3. Constant ノードを作成し、パラメータに変換して、「Pulse Speed」という名前を付けます。 ノードで、Default Value(デフォルト値) を 0.5 に設定します。

4. Pulse Speed を Multiply ノードの B 入力に接続します。

5. Multiply ノードをドラッグして、Sine ノードを追加します。

   Sine ノードは、増加する Time の値を、反復する波のパターンで -1 と 1 の間でスムーズに振動する値に変換します。

   

6. Sine ノードの出力からドラッグして Add ノードを追加し、ます。 B 入力の値が「1.0」に設定されていることを確認します。

7. Add ノードをドラッグして、 Divide ノードを追加します。 B 入力が「2.0」であることを確認します。

   この 1 加算 と 2 で除算 を設定することで、正弦波を 1 と -1 の間ではなく 1 から 0 に変更できます。 これにより、Sine ノードがテクスチャの値を反転させて赤から水色に点滅（赤の反転）するのを防ぎます。

   

8. Divide ノードをドラッグして Multiply ノードを追加します。

9. B　入力からドラッグして定数を作成します。 パラメータに変換し、「Pulse Amount」という名前を付けます。 デフォルト値を 1 に設定します。

   

10. グラフのこのセクションのノードを選択し、C キーを押してコメント ブロックを追加します。 「Damage Pulse Amount and Speed」とラベル付けします。

    

これで、マテリアルには、このポストプロセス マテリアルのダメージ エフェクトを構成する全ての主要な要素が含まれるようになりました。 この時点で、グラフは次のようになっているはずです。

Pulse Logic を接続する

パルス ロジックの設定が完了したら、次はこれをシーン テクスチャへのダメージ カラーの適用に統合します。 次に、マスクが点滅するときにそのマスクの強度を変更することができます。

「ダメージパルス量と速度」セクションを基盤として構築し、パルス ロジックをグラフ内のダメージカラーセクションおよびシーン テクスチャ セクションに接続する式を追加します。

パルス ロジックをダメージ カラーに接続するには、次の手順に従ってください。

1. グラフ上で右クリックし、Damage Color ノードとパルス ロジックの近くに新しい Lerp ノードを作成します。 「3」のラベルを付けます。

2. パルス ロジックの最後で、Multiply ノードの出力を Lerp (3) の Alpha ピンに接続します。

   

   Lerp (3) ノードでは、Alpha がマスクに適用されるパルスの量とパルスの発生頻度を制御します。

3. Lerp (1) の A 入力から Damage Color ワイヤーを削除し、新しい Lerp (3) ノードの B 入力に接続します。

   

4. Damage Color ノードを選択します。 [Details (詳細)] パネルの [Parameter Customization (パラメータのカスタマイズ)] セクションで [Channel Names (チャンネル名)] を展開し、テキスト フィールドを使用して A チャンネル名を「Color Amount」に変更します。

5. [Material Expressions Vector Parameter (マテリアル式ベクター パラメータ)] カテゴリで、[Default Value (デフォルト値)] の [Color Amount (カラー量)] の値を 2 に設定します。

   

6. Damage Color ノードで Color Amount ピンからドラッグし、Divide ノードを追加して、その出力を Lerp (3) ノードの A 入力に接続します。

   

7. Lerp (3) ノードとパルス ロジックの近くに新しい Lerp ノードを作成します。 「4」とラベル付けし、ます。

8. Lerp (3) ノードの出力を Lerp (4) の Alpha 入力に接続します。

   

9. Damage Color ノードの RGB (白色) ピンを Lerp (4) の B 入力に接続します。

10. SceneTexture ノードに接続されている Mask (RGB) ノードに戻ります。 Mask ノードの出力を Lerp (4) の A 入力に接続します。 このコンポーネント マスク ノードには、Lerp (1) 入力 B と Lerp (4) 入力 A につながるワイヤーがあります。

    

11. Lerp (4) の出力を Lerp (1) の A 入力に接続します。

12. Lerp (3) ノードと Lerp (4) ノードをドラッグして選択します。 C キーを押して、それらを囲むコメントボックスを作成し、Lerp Pulse and Colorというラベルを付けます。

13. [Save (保存)] と [Apply (適用)] をクリックします。

グラフの新しい部分は次のようになります。

Lerp (3) をマテリアルのルート ノードの Emissive Color 入力に接続すると、マテリアルのプレビュー ウィンドウでダメージ エフェクトの結果を確認できます。

グラフで Pulse Speed と Pulse Amount の値をそれぞれ変更し、エフェクトのサイズとエフェクトが適用される速度がどのように変化するかを確認します。 パルス量は 0 から 1 の間である必要があります。 後のステップで、マテリアル インスタンスでこれらのパラメータの両方を制御できるようになります。

ダメージ量パラメータでエフェクトを制御する

最後にマテリアル グラフに追加するのは、Damage Amount という名前の新しいパラメータです。このパラメータは、ゲームをプレイしているときにプレイヤーが受けたダメージの量に基づいてエフェクトのサイズを制御します。

このパラメータはキャラクターのブループリントで設定され、プレイヤーがダメージを受けたときにパラメータによって画面の外縁に表示される脈動ダメージ量を制御します。 プレイヤーが受けるダメージが大きいほど、プレイヤーの画面におけるこのマテリアルのエフェクトが強くなります。

ランタイム時にエフェクトのサイズを制御するパラメータを追加するには、次の手順を実行します。

1. 既存のマテリアル ロジックと M_Screen_Damage マテリアルのルート ノードの間にスペースを追加します。 グラフ内で右クリックして、Lerp ノードを追加します。 この Lerp ノードに 5 とラベルを付けます。

2. Mask (RGB) ノードの出力を Lerp (5) ノードの A ピンに接続します。

   

3. Lerp (1) ノードの出力を Lerp (5) の B 入力に接続します。

   

4. Lerp (5) で、Alpha (アルファ) ピンを右クリックし、[Promote to Parameter (パラメータへ昇格)] を選択し、パラメータに「Damage Amount」という名前を付け、デフォルト値を 1 に変更します。

   

   このパラメータに正確な名前を付け、必ずデフォルト値を設定してください。プレイヤー キャラクター ブループリントはこのパラメータを使用し、プレイヤーがダメージを受けて回復したときに、このマテリアルが画面にどの程度表示されるかを制御します。

5. Lerp (5) ノードの出力をルート ノードの Emissive Color 入力に接続します。

Damage Amount の値には 0 (ダメージなし、エフェクト オフ) と 1 (最大ダメージ、エフェクト オン) の間の値が使用されます。

プレビュー ウィンドウに表示される結果は次のようになります。

次に、GeneratedRoundRect マスクのサイズに影響を与えるダメージ量を入力として使用する新しいノード セットを追加します。 この追加により、プレイヤーがさらにダメージを受けると、ダメージ エフェクトが画面の中央に向かって点滅し、プレイヤーのヘルスが回復すると後退します。

「ダメージ量」が「ダメージマスク」のサイズと強さに影響を与えるようにするには、次の手順に従ってください。

1. マテリアル グラフで、[Damage Mask Falloff (ダメージ マスク フォールオフ)] セクションに移動します。 Append ノードとGeneratedRoundRect ノードの間のワイヤーを削除します。

2. Append ノードをドラッグして Multiply ノードを追加します。

3. Multiply ノードの出力を GeneratedRoundRect ノードの Box Dimensions 入力に接続します。

   

4. Multiply ノードで入力 B からドラッグし、Lerp ノードを追加します。 Lerp ノード 6 にラベルを付けます。

5. Lerp (6) ノードで、A の値を「0」のままにして、B の値を「0.75」に設定します。

6. Lerp (6) ノードの Alpha を右クリックして [Promote to Parameter (パラメータに昇格)] を選択してください。 他の Damage Amount ノードと一致するよう、このノードに Damage Amount という名前を付けてください。 または、元の Damage Amount ノードをコピーして貼り付けることも可能です。

   

7. [Apply(適用)] と [Save(保存)] をクリックします。

プレビュー ウィンドウに表示される結果は次のようになります。

全てがビルドされたときに、M_Screen_Damage マテリアル グラフは次のようになります。

エフェクトを制御するためのマテリアル インスタンスを作成します。

マテリアルが完成したので、マテリアル インスタンスを作成して、マテリアルで作成した全てのパラメータをコントロールします。 マテリアル インスタンスの公開済みパラメータを使用して、画面上のダメージ エフェクトの最終的な外観や雰囲気を定義します。

マテリアル インスタンスを設定してマテリアル パラメータを制御するには、次の手順を実行します。

1. コンテンツ ブラウザの [Artist (アーティスト)] > [Materials (マテリアル)] フォルダでマテリアル「M_Screen_Damage」を右クリックし、コンテキスト メニューから [Create Material Instance (マテリアル インスタンスを作成)] を選択します。

2. アセットに「MI_Screen_Damage」という名前を付けて開きます。

   

3. マテリアルのプレビューをリアルタイムで実行し、変更されたパラメータがマテリアルにどのように影響するかを確認するには、ビューポートの上にある黄色のストップウォッチ ボタンを 2 回クリックします。

   

4. [Details (詳細)] パネルで [Parameter Groups (パラメータ グループ)] のセクションを展開し、マテリアルで公開した全てのパラメータを表示します。 [Damage Mask Controls (ダメージ マスク コントロール)] などのベクター パラメータを展開すると、それぞれのパラメータ値が表示されます。

5. [Noise Texture (ノイズ テクスチャ)] を除く全てのパラメータにチェックマークを追加して、オーバーライドできるようにします。

   値を変更した後にパラメータからチェックマークを削除すると、親マテリアルに設定されている元のデフォルト値が使用されます。

6. マテリアル インスタンスでの作業中に、さまざまなパラメータを試して、プレビュー ウィンドウのダメージ エフェクトにどのように影響するかを確認します。 パルス量、ノイズ フォールオフ、パルス速度、ダメージ マスク コントロール (ベクター パラメータ) でさまざまな値を試し、これらによってエフェクトがどのように変化するかを確認します。

7. [Damage Amount (ダメージ量)] の値はデフォルトで「1」に設定されているため、プレビュー ウィンドウでマテリアルの変化を確認できます。 ただし、ゲームの開始時に、プレイヤーがダメージを受けるまでエフェクトが画面に表示されないように、これを 0 に変更します。 次のセクションでは、プレイヤー キャラクター ブループリントにこの値を制御させます。

8. マテリアル インスタンスを保存します。

マテリアル インスタンスのパラメータ値を設定します。

このチュートリアルのサンプル レベルでは、次のパラメータ値を使用します。 これらの値を使用したり、プロジェクトで必要に応じて調整することができます。

[任意] パラメータ値を整理し、制限します。

マテリアル インスタンスのパラメータ値をより簡単に操作して使用できるようにし、極端な値が発生する可能性を減らすために、パラメータをグループ化し、値の範囲を設定して数値スライダーを許容値または意図した値内に収めることができます。

たとえば、Damage Amount はプレイヤーのヘルス値を反映するために使用され、0 は画面にダメージがないことを、1 は画面に完全なダメージがあることを表します。そのため、この範囲内にあるスライダーを設定するのが合理的です。

親マテリアルで、名前付きの各パラメータを選択し、[Details (詳細)] パネルを使用して、それぞれの　[Group (グループ)] と [Slider Min (スライダ最小)] および [Slider Max (スライダ最大)] の範囲を次のように設定します。

マテリアル インスタンスでは、この変更がパラメータ リストのこの値にどう影響するかを確認できます。 パラメータは、グループに応じて新しいカテゴリに整理されます。 最小値と最大値の間で、これらの値を超えることなくスライダーをドラッグします。ただし手動で新しい値を入力することで、スライダーの制限をオーバーライドすることができます。

ポストプロセス マテリアルをキャラクター ブループリントに追加する

これで、ポストプロセス マテリアルの設定とインスタンス化が完了しました。 次に、動的マテリアル インスタンス (別名マテリアル インスタンス 動的(MID )) を作成して使用できるよう、キャラクターのブループリントを設定します。 これは MI_Screen_Damage マテリアル インスタンスを使用して、ブループリントの Damage Amount というパラメータを読み取ります。 ブループリント グラフで設定したロジックを使用して、Damage Amount のマテリアル インスタンスに値を挿入することで、ゲームプレイ中の状況に基づいてマテリアルをリアルタイムで調整できます。

このキャラクターには、ダメージを受けた際に変化するヘルス変数があります。 この変数をマテリアル インスタンスとともに使用し、キャラクターがさらにダメージを受けるとエフェクトをキャラクターの画面に適用し、ヘルス値が回復するにつれてエフェクトを削除します。

動的マテリアル インスタンスを作成し、ポスト プロセスに追加します。

マテリアル インスタンスは、ランタイム時に直接変更できないアセットです。 その代わりに、キャラクター ブループリント内に動的マテリアル インスタンスを作成します。 動的マテリアル インスタンスは、ゲームの開始時に作成されるマテリアル インスタンスのランタイム バージョンであり、名前付きパラメータを通じてゲームの実行中に変更できます。 続いて、プレイヤーがダメージを受けた際に画面に表示されるように、プレイヤーのカメラに MID を割り当てます。

マテリアルのインスタンスを作成して変数に保存するには、以下の手順に従ってください。

1. コンテンツ ブラウザで、[Content (コンテンツ)] > [AdventureGame] > [Designer (デザイナー)] > [Blueprints (ブループリント)] > [Characters (キャラクター)]に移動し、BP_AdventureCharacter ブループリントを開きます。

2. イベント グラフで、Event BeginPlay ノードで始まるロジックのグループを見つけます。 このグループを、このロジックにさらに多くのノードを追加できるよう、さらにスペースのあるグラフの領域にドラッグします。

   グラフ内のイベント ノードを見つけるには、[My Blueprint (マイ ブループリント)] パネルで [EventGraph] のリストを展開し、[Event BeginPlay] をダブルクリックします。 グラフ ビューでは、そのノードに焦点を当てます。

   

3. Set Default Movement Speed ノードの後に、実行 (exec) ピンをドラッグし、Create Dynamic Material Instance ノードを追加します。

4. この Create Dynamic Material Instance ノードで、親を MI_ScreenDamage に設定します。 これは、先ほど作成したマテリアル インスタンスで、画面上のダメージ エフェクトを制御するために使用されます。

   

5. ノードの Return Value (戻り値) ピンを右クリックして、[Promote to Variable (変数へ昇格)] を選択します。

6. [My Blueprint (マイ ブループリント)] パネルの [Variables (変数)] リストで、名前「NewVar」を「MID Damage」に変更します。

   

Create Dynamic Material Instance ノードは MI_Screen_Damage のランタイム バージョンを作成して新しい変数に保存され、グラフ内の他の場所で参照できるようになりました。

マテリアル インスタンスをカメラのポストプロセス パスに割り当てるには、以下の手順に従います。

1. [Components (コンポーネント)] パネルで、FirstPersonCameraコンポーネントをグラフにドラッグします。 これにより、プレイヤー カメラへの参照が作成されます。

2. その出力からドラッグして、Set Post Process Settings ノードを作成します。

3. 2 つの Set ノードの exec ピンを接続します。

   

4. Set Post Process Settings ノードの Post Process Settings 入力からドラッグし、Make Post Process Settings ノードを追加します。

5. Make Post Process Settings ノードを選択します。 [Details (詳細)] パネルの [Rendering Features (レンダリング機能)] カテゴリで、[Post Process Materials (ポスト プロセス マテリアル)] の横にチェックマークを追加し、そのピンを Make Post Process Settings ノードに追加します。

   

6. ノード内でポストプロセス マテリアルの入力ピンを右クリックし、[Split Struct Pin(構造体ピンを分割)] を選択します。 ピンは入力として配列を受け取るようになりました。

7. ポストプロセス マテリアルの配列ピンをドラッグし、Make Array ノードを追加します。

8. Make Array ノードの [0] 入力からドラッグし、Make Weighted Blendable ノードを追加します。

   

9. Make Weighted Blendable ノードで Weight を1に変更します。

10. Set MID Damage ノードの出力 (青色) ピンからドラッグし、Make Weighted Blendable ノードの Object 入力に接続します。

    

    Set ノードの出力ピンはその変数への参照を提供します。

11. グラフに追加したノードを選択し、C キーを押し、それらのノードを囲むコメント ボックスを作成します。 「Create Dynamic Material Instance for Post-Process Effect」とラベルを付け、[Player Camera (プレイヤー カメラ)] に割り当てます。

    

12. ブループリントをコンパイルして保存します。

このロジックは、ゲームが開始したときに動的マテリアル インスタンスを作成し、このブループリントのファーストパーソン カメラに適用します。

プレイヤーの Event BeginPlay ロジックの新しいセクションは次のようになります。

こちらは上記のハイライトされたセクションの一部を抜粋したもので、自身でロジックを作成する代わりにイベント グラフにコピーすることができます。

ゲーム内でエフェクトをテストする

マテリアル インスタンス (MI_Screen_Damage) で、ダメージ量 を一時的に 1 に変更し、[Save (保存)] をクリックします。 ゲームをプレイしてダメージを受けることなくエフェクトをテストすると、エフェクトに必要な外観と感触を調整できます。 ダメージ量 が 1 に設定されている場合、マテリアルは継続的にオンになります。 マテリアルのテストが完了したら、ダメージ量を 0 に設定し直します。

次に、キャラクターがダメージを受けた際にこのマテリアル インスタンスが表示され、ヘルスが回復した際に後退するようにするロジックをキャラクター ブループリントに追加します。

被ダメージを含むエフェクトを非表示または表示する

プレイヤーがダメージを受けたときにのみ動的マテリアル インスタンス エフェクトが表示されるようにするには、プレイヤー キャラクター内の既存のダメージ処理ロジックを拡張する必要があります。

この新しいロジックでは次のことを行う必要があります。

1. キャラクターの Health 変数に基づいて、マテリアルの Damage Amount パラメータを次のように変更します。

   • ヘルスが満タンの場合、画面にポストプロセス のエフェクトは表示されません。

   • 画面には、ヘルスが減るにつれて強くなるポストプロセス のエフェクトが表示されています。

2. プレイヤーが一定時間ダメージを受けない場合、ヘルスを全回復させ、ポストプロセス エフェクトを削除します。

Maximum Health 変数を作成する

プレイヤーのヘルス値を扱う際には、固定値「100」を直接入力するのではなく、ダメージ エフェクト ロジック全体で参照できる変数にプレイヤーの最大ヘルス値を保存することをおすすめします。 このようにすることで、キャラクターの開始時の体力を増減した場合でも、ブループリントのロジックが正しく機能します。

プレイヤーの最大体力を格納する変数を作成するには、以下の手順に従ってください。

1. [BP_AdventureCharacter] の [My Blueprint (マイ ブループリント)] パネルの [Variables (変数)]セクションで、[+] をクリックして新しい変数を追加します。

2. 名前を「MaxHealth」にして、タイプを Float (フロート) に変更します。 ブループリントをコンパイルします。

3. 前のセクションで使用したロジックの [Event BeginPlay] グループにあるイベント グラフで、Event BeginPlay ノードと Set Default Movement Speed ノードに注目します。

   

4. Event BeginPlay からドラッグして Set MaxHealth ノードを追加します。

5. [Variables (変数)] リストから、Health 変数を新しい Set ノードの Max Health ピンにドラッグします。

   

ここでゲームが開始すると、ヘルス値 (デフォルトでは 100) が MaxHealth に保存されます。 プレイヤーがゲームをプレイして ヘルス 値が変化しても、MaxHealthは変化せず、プレイヤーの最大ヘルス値が維持されます。

現在のプレイヤーのヘルス値をマテリアルに接続してください。

まず、プレイヤーのダメージ処理ロジックを拡張し、Damage Amount パラメータを使用して動的マテリアル インスタンスを制御します。それにより、プレイヤーのヘルスが減るにつれて画面上のエフェクトの強度が増加します。

プレイヤーのヘルス値が減るにつれてダメージ量を増やすには、次の手順に従ってください。

1. キャラクター ブループリントで、イベント グラフの左下セクション近くにある、(DT) ダメージおよび敗北の処理というラベルの付いたのグループに移動します。 Set Health ノードと Branch ノードの間に新しいロジックを追加するため、これらのノード間にはスペースを空けます。

   

2. [Variables (変数)] リストで MID Damage 変数をグラフにドラッグし、[Get MID Damage (MID ダメージを取得)] を選択します。

3. Get MID Damage ノードの出力ピンからドラッグし、リストから Set Scalar Parameter Value を選択します。

4. [Set Health (ヘルスの設定)] を [Set Scalar Parameter Value (スカラーパラメータ値を設定)] に接続し、その後 Branch ノードに接続します。

   

5. Set Scalar Parameter Value ノードの [Parameter Name (パラメータ名)] に「Damage Amount」と入力します。 これは、画面上のエフェクトのサイズと強さを制御するマテリアル パラメータです。

   エフェクトを機能させるため、この名前はマテリアル M_Screen_Damage の対応するパラメータに一致している必要があります。

   

6. Set Scalar Parameter Value ノードで、Value 入力からドラッグし、Lerp ノードを作成します。

7. Lerp ノードで A に 1.0、 B に 0 を設定します。 これは、ダメージが適用されると、ヘルスが減るにつれて最大ヘルス値 (100) から 0 になるように、値を再マップします。

8. Lerp ノードで、Alpha 入力からドラッグし、Divide ノードを作成します。

9. [Variables (変数)] リストから、キャラクターの Health 変数を Divide ノードの一番上の入力にドラッグします。

   

10. キャラクターの MaxHealth 変数を Divide ノードの下の入力にドラッグします。

Divide ノードでは、プレイヤーのヘルスを 1～0 の間の数値に変換します。1 はヘルスが満タン (ダメージなし) であることを意味します。 ただし、ダメージ量の値はプレイヤーのヘルスが減るにつれ、減少ではなく増加する必要があります。 Lerp ノードは値範囲を反転します。 たとえば、Health が 25 の場合、Lerp は 0.75 の値を Set Scalar Parameter Value ノードに返し、最大強度の 75% のエフェクトを生成します。

グラフ内の (DT) ダメージと敗北の処理セクション は次のように表示されます。

ヘルスを回復するためのリセット遅延を追加する

ダメージ エフェクトが消えるようにプレイヤーのHealth 変数 (HP) を完全に回復するには、プレイヤー キャラクターがダメージを受けないようにする必要があります。 Retriggerable Delay ノードを使用して、ヘルスが回復する前に完了する必要がある 5 秒の遅延を実装します。このタイプの Delay ノードを使用すると、クールダウンをリセットできます。次のノードを実行する前に一定時間待機しますが、時間切れになる前にもう一度トリガーされるとカウントダウンが再起動されます。

ダメージ エフェクトを除去するまでの遅延を追加するには、次の手順に従ってください。

1. Branch ノードの下で、Fn Set HP ノードの exec ピンからドラッグして、Sequence ノードを追加します。 これを使用して、プレイヤーがダメージを受け、まだヘルスが切れていない場合に実行する一連のアクションを追加します。

   

2. Then 0 パスからドラッグして Retriggerable Delay ノードを追加します。 Delay ノードで　[Duration (持続時間)] を 5 秒に設定します。

   

3. ベスト プラクティスとして、遅延後もプレイヤーが生存していることを確認するようにしてください。

   1. Retriggerable Delay からドラッグして Branch ノードを追加します。

   2. Branch ノードの Condition ピンからドラッグし、Greater (>) ノードを追加します。

   3. [Variables (変数)] パネルで、Health 変数を Greater (>) ノードの一番上のピンにドラッグします。

      

これで、プレイヤーがダメージを受けて撃破を回避する (ヘルスが 0 でない) たびに、遅延時間が 0 から再スタートするようになりました。 次に、遅延が完了した後に実行するロジックを設定します。

この時点で、ブループリント グラフは次のようになっているはずです。

プレイヤーのヘルスのブレンドのタイムラインを設定する

グラフのこのセクションでは、プレイヤーのヘルスを短時間で徐々に回復させるために使用するタイムラインを追加します。 Timeline ノードのコントロールは、トラックの開始方法、停止方法、およびトラック時間中の動作を定義します。

5 秒間のタイムラインを設定するには、次の手順を実行します。

1. グラフで Sequence ノードの Then 0 ロジックの配下でグラフを右クリックし、ノード アクションのリストで add timeline を検索し、[Add Timeline (タイムラインの追加)] を選択します。 Timeline ノードの名前を「Damage Blend」に設定します。

   

2. Damage Blend ノードをダブルクリックし、ブループリントの専用タブで開きます。

3. このタブで [+ Track (+ トラック)] > [Add Float Track (フロート トラックの追加)] をクリックして、タイムラインに新しいトラックを追加します。

   

4. トラックの名前は「Blend」にします このトラックラベルは、 Damage Blend Timeline ノード上で出力ピンとしても表示されます。

   

5. [+ Track (+ トラック)] ボタンの横で [Length (長さ)] が5秒であることを確認します

6. Blend トラックで右クリックし、[Add key to CurveFloat_0 (CurveFloat_0 にキーを追加する)] を選択します。 これを繰り返して別のキーを追加してください。合計で 2 つ必要です。

7. 最初のキーをクリックして選択し、その値を Time = 0、Value = 0 に変更します。

   

8. 2 番目のキーをクリックして、その値を Time が 5、Value が 1 に変更します。

9. 最初のキーを右クリックして [Auto(自動)] を選択します これにより、ブレンドが線形ブレンドから 0 と 1 の間のスムーズなブレンドに変更されます。

   

10. [Blueprint (ブループリント)] タブを使用して、Damage Blend Timeline ノードがあるイベント グラフに戻ります。

11. Sequence ノードで、Then 1 exec ピンを接続します。 Damage Blend ノードの Stop ピンに接続します。

    

12. 遅延の後の Branch ノードから True をドラッグし、Damage Blend ノードの Play from Start 入力に接続します。

    

Timeline ノードが 5 秒間で 0 から 1 に変化する値を出力するようになりました。 再トリガー可能な遅延が完了すると、タイムラインが再生されます。 タイムライン トラック ロジックが終了すると、Then 1 パスを通じて実行が継続され、タイムラインの更新が停止します。

プレイヤーのヘルスを復元し、ポストプロセス マテリアルを削除します。

タイムラインを設定できたので、5 秒のトラックを使用するロジックを作成し、プレイヤーの Health 変数を最初の値に戻し、マテリアルのダメージ量を 0 にまで下げます。

タイムラインを使用してプレイヤーのヘルスを徐々に回復させるには、次の手順に従います。

1. Damage Blend Timeline ノードの後に Lerp ノードを作成します。 タイムラインの Blend 出力ピンを Lerp ノードの Alpha 入力に接続します。

2. Lerp ノードで B 入力からドラッグし、MaxHealth への参照を追加します。

3. [Variables (変数)] リストで、Health 変数を Lerp ノードの A 入力にドラッグします。

4. Lerp ノードの Return Value ピンをドラッグして、Set Health ノード (ノード アクション リストの [Variables (変数)] > [Default (デフォルト)] の下) を追加します。

5. タイムラインの Update ピンをドラッグし、Set Health ノードの exec ピンに接続します。

   

   そして、Lerp ノードは、プレイヤーの現在の ヘルス 値からゲーム開始へと、タイムラインの長さである 5 秒間にわたって線形補間します。

6. イベント グラフで、Branch ノードの前に作成した Set Scalar Parameter Value ノードのある部分に戻ります。 ドラッグして Set Scalar Parameter Value、MID Damage、Lerp、Divide、Health の各ノードを選択し、Ctrl+C を押してコピーします。

   

7. イベント グラフで Damage Blend Timeline に戻り、Ctrl + V キーを押してノードを貼り付けます。

8. Set Health ノードの exec ピンを Set Scalar Parameter Value の exec ピンに接続します。

   

これで、プレイヤーのHealth 変数が最大値に戻り、ダメージ量も 0 に戻っています。

グラフはこちらのように表示されるはずです。

HUD に更新されたヘルス値を表示する

Health 変数が 100 まで回復すると、プレイヤーの UI に小数点以下 2 桁で表示されます。 HUD からこのビジュアル ノイズを除去するには、小数点以下の位置を除去して Health のみを整数として表示するロジックを追加します。

これは、Truncate を使用して小数点以下を切り捨てる場合の違いを示す例です。

HUD にプレイヤーのヘルス値が丸められた数値として表示されるようにするには、次の手順に従ってください。

1. 作成された Sequence ノードの前に実行される Fn Set HP ノードに移動します。 Fn Set HP ノードとその入力 (HUD と Health) を選択し、Ctrl + C を押してコピーします。

   

2. タイムライン ロジックの最後にある Set Scalar Parameter Value ノードの後に、Ctrl + V を押して 3 つのノードを貼り付けます。

3. Set Scalar Parameter Valueノードと Fn Set HPノードの exec ピンを接続します。

   

4. Fn Set HP ノードを右側にドラッグし、スペースを確保します。

5. Health 変数と Fn Set HP ノードの New HP 入力の間のワイヤーを削除します。

6. Health 変数からドラッグし、Truncate ノードを追加します。 これによって浮動小数値が整数に変換され、小数点以下の桁が削除されます。

7. Truncate ノードをドラッグして、Fn Set HP ノードの New HP 入力に接続します。 Unreal Engine では、Integer-to-Float 変換ノードが自動的に追加されます。

   

8. ブループリントをコンパイルして保存します。

完全なブループリントは、行った全ての追加を適用した次のようになります。

最終エフェクトをテストする

ゲームをプレイしてダメージを受けると、ポストプロセス のダメージ エフェクトが現れ、受けるダメージが増加する様子を確認できるはずです。

マテリアル インスタンスに戻ってパラメータ値を調整すると、希望する最終的な外観を実現することができます。 以下の例では、ダメージ エフェクトが増幅されています。

次の内容

次のセクションでは、低い領域に濃密なフォグを追加し、空のストーム クラウドを追加することで、レベルの大気要素を強化する方法を学習します。

• 

  環境ライティング機能の調整

  低い領域に濃密なフォグを追加したり、空のストーム クラウドを追加したりして、レベルの大気要素を強化できます。