UE4マテリアルで体の一部から消えていく表現を作りたい

目標

---

キャラクターのかっこいい消え方を考える。
UE4のマテリアルでGANTZのような体の一部からじわじわ消えていく表現を作りたい。
GANTZ風となると、上から下へ消えていくのではなく、任意の部位から、さらに複数個所同時に消え始めるようにしたい。

環境

・UE 4.26.1 (エンジンビルドはしていません)

やってみる

作戦としては、
・対象のモデルの足元から頭の先までを0~1で取得できるようにする。
・どの部分から消え始めるのかを指定するパラメーター用画像を作って挙動を作る（今回はCurveAtlasを使います）。
・時間経過で0~1の値を与えると徐々に消えていくようにする。
という感じでしょうか。
やってみましょう。

マテリアルを作る

まずはコンテンツブラウザ上でマテリアルを作成します。
コンテンツブラウザ上で右クリック→メニューから「マテリアル」を選択してマテリアルを作成します。

マテリアル作成

足元から頭の先までを0~1で取得できるようにする

体の位置を0~1で取得できるようにします。
イメージとしては以下のような情報が欲しいわけです。

体の位置情報

この対応、デザイナーにお願いすれば一発だったりします。
上記のような画像がある場合はそれで問題ないです。
私はなんとかして上記の情報を取得しようと思います。

マテリアルで以下のような処理にして、BP側から値を渡す作戦にします。

体の位置取得

BPは「Character」を継承して「SkeletalMeshComponent」からマテリアルを取得して「CreateDynamicMaterialInstance」をして各パラメーターを設定しています。

体の位置取得BP

これで取得できました。
※ActorPositionを使用せずわざわざパラメーターにしているのは、アクターの座標が必ず足元というわけではないため指定するようにしています。

消え方のパラメーター作成

消え方を指定するパラメーターを作成します。
イメージとしては以下のようなものになります。

消え方情報

黒いところから白いところにむかって消えていくという情報になります。上記の場合は胸あたりと膝あたりからそれぞれ上下に消え始めていくパラメーターになります。
これもデザイナーが用意してくれることもありそうですが、今回は自分で用意します。

以下のように、コンテンツブラウザ上で右クリック→メニューから「その他」→「カーブ」と「カーブアトラス」を作成します。

カーブアトラス作成

カーブを作成する際は「CurveLinearColor」を選択します。

カーブ選択

カーブを開き、Rの線を以下のように設定します。

カーブ設定

G,B,Aの値は今回は使用しません。

カーブアトラスを開き、「詳細」タブの「カーブ」の項目にある「GradientCurve」の「＋」ボタンを選択して先ほど作成したカーブを指定します。

カーブアトラス設定

これで消え方の設定は完了です。

消える挙動を作成

基本的にはカーブに設定した黒いところから消え始めて白いところが後から消えていくという処理になります。
以下のように対応してみました。

消える挙動

赤く囲った箇所について説明していきます。

オパシティマスクを使って非表示にするため、詳細から「BlendMode」を「Masked」にします。

カーブアトラスを使うには「CurveAtlasRowParameter」と打つと、上記の「Param」のようなノードが作成されます。
ノードの詳細設定は以下のように行います。
今回はRに値を設定したため、赤いピンを使います。

CurveAtlasRowParameter

カーブから取得した値は「0~1」のため、「0」の部分も始めは「1」以上であってほしいので「1」を足しています。
この値が「1」未満になったときにマスクする対象とします。

時間経過が「1」のときにすべての値が「1」未満になってほしいため、「0.001」という小さな値を減算しておきます。(無理矢理！)
そうすることで全体が「0.999~1.999」の値になり、時間が経過すると「カーブの値(0.999~1.999) - 経過時間(0~1)」となります。

そのままだと時間経過「0」の段階で「0.999」の部分がマスクされてしまうため、時間経過が「0」のときはマスクをしないようにします。(無理矢理！！)

※ベースカラーはひっそりと黒を指定しています。GANTZだし。

これでマテリアル側の基本的な挙動は対応できました。
BP側でこれのTimeParamに0~1の値を設定することで動作が確認できます。 動作を確認してみましょう。

消える処理

挙動は問題なさそうです。

GANTZっぽくする

ここまでの対応だけではGANTZっぽさが弱いように感じます。
消え始める部分に色を付けることでもう少し表現を近づけてみます。
以下のように対応します。

GANTZ風処理

赤く囲った箇所が追加した処理です。

2つの値(上記画像の左下のほうにある「1.02」と「1」)で指定した範囲内の場合、エミッシブカラーに青色を指定していて、消え始めているところから離れるほど光が弱くなっている処理になります。
これにより、消え始める一定範囲は青く光るような表現になります。

GANTZっぽくなったかも

先ほどよりもGANTZっぽい表現ができているように感じます。

GATNTZっぽい

光の具合

消え始めるところと離れているところで色が若干違うのも確認できます。

思ったこと

意外といい感じにできているように見えますが課題もあります。
断面の表現やマスクしている箇所にエフェクトを出したい場合などの対応はマテリアルで対応すると難しいと思われます。
マスク対象のサイズによって調整する必要があったりもします。
いい方法が思いついたらまた上げてみようと思います。


ここまでの内容は以下のリポジトリに上げてあります。 github.com


正しい対応方法やより良い方法があればご指摘お願いいたします！！！