【Unity / NovaShader】インクが飛び散るエフェクトを作る
はじめに
NOVA Shader を利用して、インクが飛び散るエフェクトを作ってみました。
サンプルデータ
| 名前 | ファイルパス |
|---|---|
| サンプルシーン | Assets/_NOVAShaderSandbox/01_InkSplatters/01_InkSplatters.unity |
| SubstanceDesignerデータ | Data/SubstanceDesigner/Ink.sbs |
環境
- Unity 2020.3.33f1
- Universal RP 10.8.1
実装について
以下のインクのグラデーションテクスチャを用います。
NOVA Shader の Dissolve機能を使用することで、インクが広がるような表現を作ることができます。
ディゾルブのTransition ProgressをParticleSystem上で動かすことで、
インクが広がるような表現になります。
STEP1. 形状テクスチャの用意
インク形状のテクスチャを用意します。
Clip Studio で作画したインクテクスチャ
STEP2. Substance Designerでグラデーションをつける
Substance Designerにて、インクの形状に放射状のグラデーションを付けます。
作成したノード (Substance Designer)
使用したノードは以下になります。
- RGBA Split (Rチャンネルの抽出)
- Invert Grayscale (テクスチャの0-1反転)
- Flood Fill + Flood Fill to Position (インクの各形状に座標を割り当てる)
- Pixel Processor (座標から、放射状に広がるグラデーションを計算)
- Auto Levels (グラデーションを0-1に正規化)
- Levels (レベル補正)
Pixel Processor の中身の実装
Pixel Processor の中身の実装
Pixel Processor の中身の実装は以下のようになっています。
- GetFloat2 ノード : テクスチャ座標 $pos を取得
- Sample Color ノード ： $pos でのテクスチャの値をサンプリング
- Swizzle Vector2 ノード : XY成分(RG成分)を抽出
- Distance ノードで : 座標(0.5, 0.5)からの距離を計算
座標(0.5, 0.5)を中心とした放射状のグラデーションになります。
STEP03. Nova Shaderで動かす
Nove Shader の Alpha Transition に インクのグラデーションテクスチャを登録します。
Transition Progress 1から0へ向かって変化させると、インクが広がるような動きが生まれます。
STEP04. ParticleSystemで動かす
このTransition ProgressをParticle Systemから動かせるようにします。
まず、Transition Progress を Coord 1X に設定します。
マテリアル上のTransitionProgressの値は0に設定しておきます。
ParticleSystemのCustomVertexStreamsを以下のように設定します。
ParticleSystemのCustom Dataを以下のように設定します。
以上で、ParticleSystem側でインクを制御できるようになります。
最終結果
インクがバシャっと平がるような動きになります。
【調整】インクの出現タイミングをランダムにずらす (Substance Designer)
先ほどのエフェクトは、インクが地面の上で円状に広がるような動きになっています。
飛び散ったインクが、少し間をあけて地面にびちゃびちゃ落下するような動きを作ります。
インクのしぶきにランダムな時間差を持たせる
Flood Fill to Random Grayscale ノードを用いることで、要素ごとにランダムな色を割り当てることができます。
これを元のグラデーションとブレンドすることで、インクしぶきの出現タイミングをランダムに揺らすことができます。
ランダム値を入れる前と後の比較
左 : 放射状グラデーションのみ
右 : 放射状グラデーション + ノイズ
Discussion