そもそもFF5の「リクイドフレイム」って何？
参考動画
https://www.youtube.com/watch?v=t5_U246CEuU
こんな風に三態を変化させるモンスターの事です。
画像は↓とかを見れば取得できますが、ライセンスとかあとライセンスとかで怒られるのは嫌なのでこれは用いません。
https://finalfantasy.fandom.com/wiki/Liquid_Flame_(Final_Fantasy_V)
下準備
代わりにそれっぽいシルエットを自分で作ります。まぁだいたい上からなぞって作ればいいでしょう。ひとまずヒト型と渦型を作ります。
大きさは合わせる必要があるため512x512で作っておきます。
はい、んでここで、GIMPかPhotoshop的なものを立ち上げます。僕はPhotoshopなんて持ってないので、GIMPで説明します。
GIMPで距離マップを作る
はい、GIMPが立ち上がったら、フィルタ(Filter)→汎用(Generic)→距離マップ(DistanceMap)を選択しましょう。特に設定をいじる必要はありません。
距離マップウィンドウが開いたら以下のような画像になると思います。
これをヒト型に対しても行います。
距離マップについては、後ほどきちんと解説しますので、ここでは「こういう結果になるのか」くらいに覚えておけばOKです。
後で使いやすいようにチャンネルを分けて1つの画像にしておく
今回はR(赤)とG(緑)を分けます。
これで1つの画像ファイルに2つ分の距離マップを格納できました。もしこれのやり方が分からない場合はトーンカーブを使うのもあり、ヒト型の場合は緑を出したいので赤と青のトーンカーブをゼロに、渦型の場合は赤を出したいので緑と青のトーンカーブをゼロにします。
はい、これで２つの異なる距離マップが１つの画像になりました。
これをUnrealEngineにドラッグアンドドロップでインポートします。
距離マップを使ってマテリアルで遊んでみる
まずは以下のように手っ取り早くLerpしてみましょう。
そうすると
単なるα合成ですが、距離マップのおかげでモーフしてるように見えない事もありません。とはいえ、現段階ではただのα合成なのでちょっと面白くないですね。
形を強調しよう
モーフィングにおいては形の情報が大事であり、この濃淡の情報がちょっと邪魔です。というわけで、それぞれの形の情報を強調してみます。
以下のように特定の値以上のところを強調するようにします。
最終的に0.01で割っているため100倍しているのですが、その前に0.19を引いてやることで0.2よりも小さい所は暗くなりますが、0.2以上の所は強調されます。
\frac{濃淡-0.19}{0.2-0.19}
本来だったらsaturateするべきでしょうがいくつかの理由があり、ここではsaturateしません。というわけで、この結果をエミッシブに入れてると滅茶苦茶光ります。
ともかく、形が強調されたことが分かるかと思います。
光ってはいますが、よりモーフィングっぽくなりました。
ちょっとだけデティールを入れよう
しかし形だけの情報だとちょっとだけ寂しいので以下の2つのテクスチャ(渦の穴と、ヒト型の輪郭)を用意します
そして、αブレンディングし、最後に赤を足します(赤を足しておかないと後で乗算した時に黒が目立ってしまうため)
そしてこの結果を先ほどのモーフに乗算します。
するとこういう結果になってしまいます。やっぱり赤が不自然ですね。ここは後で「炎っぽい効果」を入れた時に誤魔化しますので今は我慢しておきます。
炎っぽい効果を作る
下準備
GIMPのソリッドノイズや歪み効果などを使って、雑に炎っぽいテクスチャを作ります。↓こんな感じに。雑でいいです。
最近っぽく作るならAI的なところから作ってもいいんじゃないでしょうか？StableDiffusionとか…。
じゃあ乗算してみましょうか。
はい、これだけではダメですね。
メラメラ感がない
メラメラさせる
Pannerノードでスクロール
そこで、Pannerノードを用いてUVスクロールを行います。下から上にスクロールするようにします。
はい、そうするとスクロールし、ちょっとだけメラメラしました。
まだまだですね。
オパシティマスクをちょっと歪ませてみる
まず、GIMPなどで適当に雲模様を作ります。
これをnormalmap-online( https://cpetry.github.io/NormalMap-Online/ )などのサイト等でノーマルマップに変換します。
そしてこの法線マップをPanningしたもので、輪郭用画像(距離マップ画像)を少しだけ歪ませる。また、PanningはV方向のみにしておきます。
これにより、輪郭の参照位置が時間で変動するため、ゆらゆらした感じになります。
メラメラ感が気に入らない場合はPanningに渡しているTimeやPanningパラメータを調整してください。
仕上げ
もうちょっと全体的に、形に添ってまぶしくします。
オレンジ色を数倍(8倍)したものと、前に作ったノードの形状に沿って明るくしたものを乗算します。ただし、以前作ったものは明るすぎるため適度に割っておきます(225で割っていますが、お好みで)
これでできたものと、前回までのメラメラを足したものを明るさとします。すると
だいぶそれっぽくなりましたが後ろがちょっとわざとらしいので、こいつも歪ませます。
輪郭用画像情報の最後のノードを、炎テクスチャのUVにもAddします。
これでなんとかそれっぽくなりました。
はい、解説は以上です。ここまで読んでいただき、ありがとうございました。