Zenn
✨

『鳴潮』ポリゴンでできた魔法陣

に公開
gamedev
VFX
鳴潮
wutheringwaves
tech

本記事は『鳴潮』の VFX がどういったテクニックで制作されているかを観察・推察しながら紐解き、開発者向けに知見として形に残しておくことを目的としており、ゲームプレイ時の録画を引用させていただいています。

🐸立体で作るメリット

光属性のキャラであるフィービーは、見た目からして光輝くような VFX で溢れていて取り上げたい要素が沢山あるのですが、今回は魔法陣。まず発動はこんな感じでここだけで凄いポイントが色々ありますが、離れた位置に発動するので‥

近付いて見下ろすとこんな感じ。

階段で表示すると分かりやすいですが、各パーツごとに高さを変えて３層くらいになってます。あと形状がカクカクだけどシャープなので、ローポリゴンで魔法陣の模様が作られているように見えます。

そして、魔法陣の模様のマスクテクスチャで切り抜かずにわざわざモデルで作るのにはメリットが色々あります。

✨解像度に依存しなくなる

例えばカメラが近寄って魔法陣の一部が画面いっぱいに表示されても、ポリゴンモデルなのでエッジがとても奇麗です。パスで作ったイラストレーターの図形が解像度に依存しないのと同じですね✨

✨描画面積が最小限になる

魔法陣の透過部分をテクスチャで抜いた場合はおおげさに言えばこの画像のピンク部分くらいの面積を描画してしまいます。ポリゴンモデルなら見えている部分だけの描画コストで済みます。

フィービーのこの魔法陣は一番外側のパーツは不透明に見えますが、うっすら透けているので実際は半透明ですね。UE でいう Masked の不透明にするにしてもテクスチャだと抜きを描画するコストはタダではないので、画面に大きく表示されるものほどポリゴンの方が優位になると思います。

✨不透明にできる

フィービーのこの魔法陣に関しては半透明ですが、抜きが必要ないので不透明にできることもメリットになります。

不透明にした場合のメリットは、半透明より描画負荷に優しいだけでなく描画時にソートの問題が起きなかったり、DOF が適切にかかるといったような恩恵があります。(逆に言えば半透明には問題がたくさんあるといえますね😭）

✨立体パーツ込みで作れる

フィービーの魔法陣は模様の部分から高さ方向に光の帯が立ち上がっているデザインになっています。

ピンク部分のように模様に合わせて縦に伸ばした板を添わせて、ほんのり虹色の要素とか光のすじとか銀河のようなつぶつぶの絵柄のマテリアルを UV スクロールで流している感じですね。魔法陣の模様のモデルと一体型で作っていた場合でも高さ軸のスケールで光の帯の長さを自由に可変できるのですよね。

これがテクスチャだと、絵柄に沿ってモデリングしないといけないので少し手間がかかります。魔法陣の模様が元からモデルだと、エッジを高さ方向に押し出すだけで位置が完全に一致する帯を作れますね✨

✨どんなマテリアルでも貼れる

抜きのことを考えなくて良いので、クリスタルとかガラスとか水面のような背景オブジェクト用のマテリアルでもなんでもアサインして面白い表現ができるメリットもあると思います。他にも「頂点カラーが使える」「UV を使える」「起伏を持たせたモデルにできる」「頂点変形させられる」とか、色々とポリゴンモデルならではな特性を活かして面白い表現ができるかも知れません。

🐸おまけ

発動演出を少し見てみます。

まず、杖を振る際には「幅広くて黄色い光」と「細くて青い光」の２本の軌跡がついていて UV スクロールもさせています。杖の先には虹色のフレアを表示していてこちらも凝っています。

杖を振り上げる際には地面に円を描くように模様が表示され、細長い光の帯が立ち上がりますが、その中には緑に寄せた光の筋も出ていてとても奇麗。カラーにランダム幅を持たせているかも？

また、杖を振り下す際には空中と地上のひし形のパーツがサンドイッチして魔法陣が現れますが‥

カメラを瞬間的に引いているため画面にカメラブラーが入り、そのあとややゆっくりと元のカメラ位置に戻ります。この簡易的なカメラ演出がさり気なくてとても良い感じ。この時、強めに光の帯が立ち上がっていますが、よく見ると奥の背景が一瞬歪んで元に戻るのが分かります。

そんな感じで出現演出はとても凝ってますが、魔法陣が現れてからは外周の２つのパーツがそれぞれ左右に回転して、魔法陣全体は UV スクロールで模様が流れているだけなのでかなりシンプル。

🐸思ったこと

メリットを色々あげましたが、ふだん魔法陣の模様をポリゴンで作ったりしていないので、私的にも思いのほか目からウロコな感じかもと思いました。

また、地面に多少の起伏があっても描画されるよう魔法陣をデカールで作るケースも多いと思うのですが、デカールには壁で伸びたり半透明の床には投影されなかったりと色々問題もあります。なので、こうした「地面から少し宙に浮かせてモデルで作っている」というのはデカールより安全な表現方法でもあると思います。

それから、フィービーの技には他にもカッコイイ演出がたくさんあるので、引き続き取り上げていきたいと思います✨

Discussion