はじめに

この記事は Colorful Palette アドベントカレンダー12/21の記事です。
こんにちは、株式会社Colorful Paletteでエフェクトデザイナーをしている「ぬきお」です！

今日はNOVAShaderを使用しエフェクトを作成する際の簡単な制作Tipsを紹介します。

NOVAShaderとは

NOVA Shaderとは、UnityのUniversal Render Pipeline (URP)に対応したParticle Systemのための多機能シェーダです。ビジュアルエフェクト制作でよく使われる汎用的な機能がひとつのShaderにまとめられているため、効率的に高品質なエフェクトを作成することができます。

NOVA Shaderは無料で利用できるOSSとして公開されていますので、興味のある方はぜひ使用してみてください！より詳しい詳細は以下のリンクから確認することができます。
https://github.com/CyberAgentGameEntertainment/NovaShader/blob/main/README_JA.md

【Tips】Dissolveを使ったいい感じのエフェクトの消え方

エフェクトを消す表現には様々な手法があります。
フェードで消したり、サイズを小さくして消したり等、方法はエフェクトの用途によって様々です。
ここではTipsとしてNOVAShaderのDissolve機能を使った「いい感じのエフェクトの消え方」をご紹介します。

Alpha TransitionのDissolveを使用する

NOVAShaderの機能のひとつに「Alpha Transition」というものがあります。
これはエフェクトが消えていくアニメーションの表現として使用する機能になります。
Alpha Transitionには3つのモードがあり、その中の１つである「Dissolve」を使用していい感じのエフェクトの消え方を作ってみたいと思います。

Dissolveとは

そもそもDissolveとは何かという話なのですが、直訳すると「溶ける」という意味になります。文字通り、Dissolveは対象のオブジェクトを「溶かす」ように消える手法として使用することが多いです。

炎の消え方

まず、NOVAShaderを使い炎のような見た目のエフェクトを用意してみました。以下の炎は粒子の「Color over Lifetime」を使いフェードで粒を消しています。

フェードでもなんとなくそれっぽくはなりますが、ここでNOVAShaderの「Dissolve」を使い粒を消してみましょう。
ちなみにNOVAShaderのベースマップには以下のような炎のテクスチャを作成し、アタッチしました。

■ノイズテクスチャの用意
Dissolveを使用するには、まず溶けるように消したい形状のノイズテクスチャを用意します。
今回は以下のようなノイズテクスチャを作成してみました。

このテクスチャを、NOVAShaderのAlpha TransitionのモードをDissolveにした上で、「Alpha Transitionマップ」としてアタッチします。

DissolveはAlpha Transitionマップに指定したテクスチャの1つのカラーチャンネルの値に基づいてアルファ値を変更します。
上記画像の値だとChannelsに「Red」が指定されていますので、作成したテクスチャのRGBのRの値が参照されている状態です。
（今回作成したノイズテクスチャはグレースケールなので、RGBのどのチャンネルをピックアップしても全て同一の値になります。）
Dissolveはチャンネルの値が小さい部分ほど消えやすく、大きな部分ほど残りやすくなる仕組みとなっています。

次にDissolveのアニメーションについてです。

■アニメーション作成
NOVAShaderはいくつかの値をCustom Dateを使ってParticleSystem上でアニメーションを付けたり値を指定することが出来ます。
ここでは炎の粒子がノイズテクスチャの形状に沿って「溶けながら消えていく」アニメーションをグラフで管理したいため、上記画像の「Transition Progress」の値に「Coord1X」を付与し、「Custom1.x」でアニメーションを作成します。
この時、アニメーションを作成する前準備として必ず「Custom Vertex Streams」にCustom1.xを設定してください。

Custom Data側のTransition Progressのアニメーショングラフは以下のような形で設定しました。

Transition Progressの値が高くなればなるほど、Base Mapに設定しているテクスチャが溶けて消えていくような見た目になります。
より詳細なCustom Dateでアニメーションを作成する方法についてはこちらのリンクをご参照ください。

■Dissolveで消えていく炎の完成
これで、炎の粒子にDissolveが適用されました。動画は以下になります。

フェードのみで消していた炎に比べ、Dissolveで消える炎の方がより現実の炎に近いリアリティな動きが表現されたのではないでしょうか。
並べて比べてみました。

また、Alpha Transitionの「Edge Sharpness」の値を上げると縁の部分のエッジがどんどんパッキリとした見た目になります。
こちらの値は、エッジの境界線をよりはっきりと見せたいセルルック調のエフェクトを作成する際などにとても便利です。
試しに作成した炎のエフェクトのEdge Sharpnessの値を1にしてみます。

先程とは違いシルエットがパキッとした炎のエフェクトになったと思います。
このように、Dissolveの設定次第ではエフェクトのテイストも自由に調整することも可能です。

おわりに

いかがでしたでしょうか？
今回はNOVAShaderのDissolveを使ったいい感じのエフェクトの消え方について簡単なTipsを紹介してみました。
このように、エフェクトの消え方を少し工夫するだけで途端にリッチな見た目になるのがエフェクト制作の面白いところだと思います。

今回ご紹介したNOVAShaderの機能はほんの一部にすぎません。
まだまだたくさんの機能が内包されていますので、興味のある方はぜひNOVAShaderを使ってエフェクト制作を行ってみてください！