『鳴潮』カードの軌跡のメイキング
前回『鳴潮』に登場するカードが降り注ぐ VFX をこちらの記事で取り上げましたが、今回はそれを UE5 で再現しながら解説します。
🐸軌跡パーツを手元で再現
完成はこんな感じで所要時間は Photoshop でのテクスチャ作成も含めて１時間半くらい。テクスチャは雰囲気が掴めれば良い程度に大まかに作っています。
🎨テクスチャ
サムネイルの下に赤いラインが入ったものがテクスチャで、４枚用意しました。UV スクロールさせる銀河と黒い部分を指定するためのテクスチャ、そのエッジを青くするためのテクスチャ、そして幅を狭めていくためのディゾルブ用のグラデーションテクスチャです。
銀河の絵はフリー素材ぱくたそ［ https://www.pakutaso.com ］から使用させていただいて、色調を変えてシームレス加工しています。
🧩マテリアル
マテリアルの中身はこんな感じです。
🐻それでは解説！
では解説に入ります。といってもマテリアルの解説中心になります。
✨スクロールする銀河
まずベースとなる銀河から。ScreenPosition でスクリーンスペースの UV 座標を利用しています。適当にタイリングして Panner で UV スクロールさせています。
✨スクロールしない黒い領域とエッジ
マスクテクスチャのエッジは、テクスチャに直接色を乗せずにマテリアルで色を変更できるようにしています。スクリーンスペースの UV を利用していますが UV スクロールはさせません。
マスクテクスチャは真っ黒の部分にも薄っすらと銀河の模様を乗せたかったので 0.1 だけ色を持ち上げています。（さらに 0～1 clamp しておいた方が丁寧ですね）
以上の３つを重ねるとこんな感じで、銀河はスクロールしますが黒いエリアは動きません。
✨両端のラインとディゾルブ
両端から中央に向かって消えていくようグラデーションテクスチャを利用しています。Step を使って閾値を超えたら真っ白、越えなければ真っ黒になるようにして、それを不透明度に利用してます。1-x は白黒反転させているだけで、テクスチャの白と黒が逆だったので入れてます。。（テクスチャの方を編集して白黒反転させたらこの 1-x は省略できます）
ディゾルブさせる幅を少し内側にして両端のラインだけのマスクを作り、黄色い色を与えています。それを銀河のところに加算させて色を与えています。
ディゾルブについては moko さんという VFX Artist の方の講演内容を参考にしています。
https://www.youtube.com/watch?v=yMuDva2Vh9I
✨露出に影響を受けさせない工夫
エミッシブカラーに繋げる前に EyeAdaptationInverse を挟むことで、シーンの露出の影響を受けないようにできます。こちらも moko さんのブログを参考にしました。
✨完成！
最後に、鳴潮のように３本の板を傾けてシーンに配置して完成です。
本当はこの軌跡が出現する際にも上から下に向かって先端が黄色く光りながら表示されたりするのですが、そこは特筆するほどでもないかなと思ったので省略します。やっていること自体はシンプルだと思います。あとはテクスチャのクオリティであったり、繊細なアニメーションと様々な盛り付け要素の組み方であれだけカッコイイ VFX に仕上がっているのだと感じます。
Discussion