うにty生活

UnityChanを生活させたい

【Unity VFX】滞留して最後に散るかっこいい演出 #33

 f:id:tubakihimeLoveHate:20200906114200p:plain

 

今回はUnityのVFXやっていきます。

先週くらいに初めてVFX触りはじめて、Shader GraphやらVFXやら今更感はあります。

けど公開されてすぐだと仕様決まっていないことが多いので、執筆した項目もうないじゃんってこともよくあります。だからちょうどいいのかなっていう言い訳です

 

先に完成品見せます。

スッと消えていくカッチョいいUnityロゴを作成しました!

Efectは適当にいじっててもそれっぽくなるので、ポイントだけ押さえて説明していきます。

 

環境

Windows10

HDRP 7.4.1

VFX 7.4.1

GPU NVIDIA GeForce GTX 1650 4GB

VFXはGPUで動くらしいので、GPUも載せときます。そんなにたいしたやつではないです

 

作成したいもの

今回作成するものは以下の表現を組み合わせています。自分のやりたい表現があれば是非見ていってください。

・ エフェクトをメッシュの形にする

・遷移していく色

・滞留させて最後に散るエフェクト

 

エフェクトをメッシュの形にする

エフェクトをメッシュの形にするための準備は以下の2つです。

・メッシュを用意する

・PointCacheAssetを用意する

 

今回用意したメッシュはこちら

f:id:tubakihimeLoveHate:20200905134052p:plain

 

Unityのロゴです!

 

VFX Graphでエフェクトをメッシュの形状にするには、PointCaheノードを利用します

f:id:tubakihimeLoveHate:20200905134538p:plain

 

次にノードにアタッチするための、PointCacheAssetを準備する必要があります。

PointCacheはメッシュの法線や位置情報をTextureにベイクしたものです Window>Visual Effects >Utilities > Point Cache Bake Tool

f:id:tubakihimeLoveHate:20200905170651p:plain

 

pCache Toolで、チェックボックスは法線、位置、色を取得するかどうか

今回は法線だけでいいので、Normalだけにチェック。

 

Point Countで頂点数を決めることができます。pCacheでは元々のメッシュの頂点数は関係ありません。ここのcountで決めた頂点数でエフェクトを均等配置します。メッシュをアタッチしたら、セーブして完了。(メッシュをアタッチしないとセーブボタンは出てきません)

f:id:tubakihimeLoveHate:20200905170546p:plain

 

今回は用意されている、ビルドインエフェクトを元に作成していきます。

右クリック>CreateNodeまたはスペースを押すとノードを作成することができるのでSimple Swam Particle Systemを選択

 

再生するとこんなエフェクトが出てくるので、これをカスタマイズしていきます。

 

まず最初にエフェクトをメッシュの形にしていきます。

元々Initialize Particleに存在するPosition(Sphere)を削除して、Set Position from Mapノードを生成。

外にPointCacheノードを配置したら、先ほど作成したPointCacheAssetを割り当てます。

PointCacheノードSet Position from MapのAttribute Mapを繋げます。

f:id:tubakihimeLoveHate:20200905174008p:plain


Gameを再生すると、これだけでメッシュの形になりました!簡単だ!

Turbulence(後述)が激しくてわかりにくいと思うので、Intensityを0.1くらいにすれば形が確認できます。

f:id:tubakihimeLoveHate:20200905174257p:plain

 

 

色を変化させる

Outputにノードを追加します。

Set Color over Lifeを使用

f:id:tubakihimeLoveHate:20200905174617p:plain

f:id:tubakihimeLoveHate:20200905174721p:plain

これはカラーを左から右に徐々に遷移させていくのに使います。

 

Set Color Random from Gradient

f:id:tubakihimeLoveHate:20200905174752p:plain
こっちはピッカーの中でランダムな部分が選択されます。

色ノードは人によって好みが違うので、自身で色々カスタマイズしてみてください。

 

ランダムに動かす・滞留させる

ランダムに動かす部分と最後に散って消える演出は同じノードで行っています。mark

既に存在する、codeUpdate ParticleのTurbulenceノードを調節します

f:id:tubakihimeLoveHate:20200905180322p:plain

 

Turbulenceノード

f:id:tubakihimeLoveHate:20200905222024p:plain

Turbulenceは乱気流という意味で、決まった数式によってランダム風な乱気流を再現します。

乱気流はシュミレートされているので、ランダムではありません。

Positionの中にランダムな値を入れてやることによって、完全に同じ乱気流ができるのを防ぎます。

 

Turbulenceノードにはよくわからないパラメーターが多いですが、これはパーリンノイズというノイズの生成時に利用するパラメーターなので、今回説明は省略して以下に設定のみ表示します。 

 

Intensityは乱気流のスケールで、値が大きいほど、大きく動きます。

今回は最後までメッシュの形状を残しておきたいので、Intensityはずっとゼロ推移させて

最後だけ大きくすることで滞留を表現できますよね?

 

以下のノードを組み合わせます。

・Intensityのプロパティ

・Age Over Life Time

・Sample Curve

・Multiply

f:id:tubakihimeLoveHate:20200905223109p:plain

 

Curveの途中、0付近のプラスマイナスをウェーブさせることで波打つように揺れます。

そして、最後にグン!っとあげると滞留&散る演出の完成です。

f:id:tubakihimeLoveHate:20200905223339p:plain

 

この方法、先日Unityステーションの「VFX Graphで何か作ろう」っていう動画内で同じ方法でやってるのを見つけて驚きました。

この組み方は、公式も使ってるし色んなところで応用が効くのでおすすめです。

 

その他設定は以下のとおり

Scale 0.5 0.5 0.5

Dragは調節できるようPropertyに

Octaves = 1

Frequency = 1

Roughness = 0.5

Lacunarity = 1

 

最後にすっと消えて欲しいのでalfa over lifetimeノードを追加します。

カーブはこんな感じ

f:id:tubakihimeLoveHate:20200905224819p:plain

 

最後に完成したノードを全て載せておきます

f:id:tubakihimeLoveHate:20200905230126p:plain

f:id:tubakihimeLoveHate:20200905230121p:plain

f:id:tubakihimeLoveHate:20200905230130p:plain

f:id:tubakihimeLoveHate:20200905230133p:plain

 

まとめ

今回できるようになったこと

エフェクトをメッシュの形にすること

色の遷移

滞留&時間による変化

 

短時間でこんなクオリティのものが簡単に!ノードベース最高!

今回初めてyoutebeの埋め込み機能付けてみました、またブログの読みやすさも変わったかな?

 

というところで今回はここまで

それではまた