Unity VisualEffectGraph -シンプルパーティクル解説-

#はじめに
　前回は「Unity2019.1.0.b10」で「VisualEffectGraph」をインストールしてウィンドウを開く所までを書きました。
　(前回:https://qiita.com/KoniroIris/items/f003c2a4ca62fad11a2f )
　今回はVEGのウィンドウを立ち上げた直後にあるシンプルパーティクルについて解説していこうと思います。

#シンプルパーティクル
　ウィンドウを初めて立ち上げるとParametersのウィンドウが出ているので、上部の[BlackBoard]ボタンを押して消しておくと見やすくなります。
　最初の画面には図１のシンプルパーティクルが置かれており（画像が縦長になるので右にずらしました）、生成されるVFXは図２のようなアニメーションをします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/393006/65dbcc8e-8e73-9ab5-5575-50abeb990a61.png)
図１　シンプルパーティクルのノード図

![image.png](https://media.giphy.com/media/LO9H4nOzbNtKtrjPYK/giphy.gif)
図２　シンプルパーティクル

#コンテキストとは
　「Spawn」、「Initialize」、「Update」、「QuadOutput」の事をコンテキストと呼びます。また、InitializeとQuadOutputコンテキストには設定するプロパティがあります。

**Spawn**
　パーティクルの生成を行う部分です。設定するプロパティはありません。
　上部にStartとStopがある通り、パーティクル生成の開始と停止のイベントも受け付けます。
　Spawnコンテキストには最初から設定するプロパティはありません。

**Initialize**
　パーティクルの初期設定を行う部分です。設定する項目が「Capacity」と「Bounds」の２つあります。Capacityは生きているパーティクルの数の限界値を設定し、BoundsはVFXが画面内にあるかを判断しBoundsがカメラ内に無いとVFXは描画されません。言葉では分かりにくいと思うので下の図3のGifを参考にして下さい。
![image.png](https://media.giphy.com/media/Rkof7oPXN4kaqnWGh7/giphy.gif)
図3　Boundsの例

**Update**
　フレーム毎に処理をする部分です。設定するプロパティはありません。

**OutPut**
　パーティクルに対して形状を与える部分です。Quad以外にも多くのOutPutが存在します。Quadは2Dスプライトの形状をパーティクルに与えます。設定する項目が複数あり、「Blend Mode」と「Uv Mode」については私自身詳しく説明できないので分かったら編集で書き加えます。
　「Use Soft Particle」はエフェクトの交差点をフェードアウトするとの事です。詳しくはテラシュールブログさんを参考にして下さい(テラシュールブログ:http://tsubakit1.hateblo.jp/entry/2017/04/29/211243 )。そして最後に「Main Texture」です。ここでパーティクルに与える2Dスプライトを設定します。


#ブロックとは
　Spawn内にある「Content Spawn Rate」やInitializeにある「Set Velocity Random」といった部分をブロックと言います。
　ブロックはコンテキストに追加できる小さな機能の集まりで、ブロックを追加していくことで独自のコンテキストを作成する事が出来ます。
　改めてシンプルパーティクルの図１を見ていきましょう。
「Spawn」、「Initialize」、「Update」、「QuadOutput」の4つのコンテキストの中に幾つかのブロックが追加された状態になっています。

**Spawn内のブロック**
・ConstantSpawnRate
　このブロックには「Rate」というプロパティがあり、毎秒いくつのパーティクルを生成するかを設定できます。
　ただし、時間等で消失していないパーティクルの数とInitializeのCapacityが同じ数になった時はパーティクルが消えるまで生成が止まります。

**Initialize内のブロック**
　Initializeコンテキストには最初から設定する項目が２つあります。「Capacity」と「Bounds」です。Capacityは生きているパーティクルの数の限界値を設定し、BoundsはVFXが画面内にあるかを判断します。Boundsがカメラ内に無いとVFXは描画されません。(Gif追加)
・Set Velocity Random
　生成時に速度を追加するブロックです。XYZ軸のMinMaxを設定しMinMaxの間のランダムな値の速度を与えます。
・Set Lifetime Random
　パーティクルの生存時間（秒）を設定するブロックです。最大値と最小値の２つを決めるとその間のランダムな時間で消失します。

**Update内のブロック**
　シンプルパーティクルではブロックはありません。

**Output内のブロック**
・Orient:FaceCameraPlane
　このブロックはパーティクルの向く方向を設定することができます。
　「Mode」のタブはデフォルトで「FaceCameraPlane」となっており、これはカメラの方向に平面を向ける設定になります。
・Set Size over Life
　LifeTimeによってSizeを変えるブロックです。現在は「OverLife」なので、パーティクルの生存時間を参考にしています。生存時間でSizeをどう増減するかは、Curveを用いています。緑線をクリックして開くとCurveの編集ウィンドウが開きます。横軸がLifeTimeで0が生成、1が消失の時間を示します。縦軸はSizeで1を中心に増減させます。Curveウィンドウの基本操作はUnityマニュアルを参考にして下さい。（Unity マニュアル:https://docs.unity3d.com/ja/2019.1/Manual/EditingCurves.html ）
・Color/Alpha over Life
　LifeTimeによってα値（透明度）と色を変えるブロックです。横軸がLifeTimeで左端が生成、右端が消失の時間を示します。ウィンドウの操作はUnityマニュアルを参考にしてください。

#実際の動き
それでは上記を踏まえてどう動くのか、最初からSpawn,Initialize,Update,QuadOutputの順に追っていきましょう。

**Spawn**
　まずSpawnコンテキストで毎秒10個のパーティクルが生成されることが決まります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/393006/dad2f8c9-c888-e609-f01c-f92c6ca1382c.png)
図4 Spawnコンテキスト

**Initialize**
　Initializeコンテキストでパーティクルの個数上限32個と定められます。
　「SetVelocityRandom」ブロックにより、生成時にX-0.333~0.333、Y0.2~1、Z-0.333~0.333の間で3軸にランダムに速度がセットされます。
　次の「SetLifetimeRandom」ブロックでLifetimeを1秒~3秒の間と定められこの時間内で消失することを設定されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/393006/7856c61c-0c40-37dd-ebfe-a6310fb05bb0.png)
図5 Initializeコンテキスト

**Update**
　Updateコンテキストですが、こちらにはブロックが無いため、特に処理は行われていません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/393006/891430f4-e592-30e8-816e-58337a59aa9b.png)
図6 Updateコンテキスト

**QuadOutput**
　QuadOutputコンテキストです。MainTextureにDefaultParticleが設定されており、このTextureが生成されます。
　「Orient」ブロックでは、「FaceCameraPlane」モードであるため、どの方向から見てもカメラ方向に平面を見せる向きになります。
　次の「SetSizeoverLife」ブロックではOverLifeを参照してSizeを変更しており、生成時は0.087で消失時には1.0になるようにサイズの調整が行われます。
　最後の「Color/AlphaoverLife」ブロックではRGB255の白と生成時、消失時付近のα値を0に近くする設定がされています。これによって生成時は透明な状態から始まり、少し経つとα値が255になり姿がハッキリとし、消失時近くになるとまたα値が減って消えるように消失していきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/393006/c949c3bc-e8ae-4a3e-3efd-7906d6d4d3ba.png)
図7 Outputコンテキスト

　これら4つのコンテキストを通り、**「毎秒10個、最大32個のTextureのDefaultParticleがXYZ方向のランダムな速度をもってカメラの方向を向きつつ、時間に比例してサイズと透明度が変化し、1~3秒で消失する」**図8のパーティクルが生成されます（図２と同じです）。


![image.png](https://media.giphy.com/media/LO9H4nOzbNtKtrjPYK/giphy.gif)
図８　シンプルパーティクル出力

#色々値を触ってみよう
　一通りシンプルパーティクルに触れたので、ある程度どこを触ればどうなるか分かったと思います。
　後は自由にどんどん値を変えたりTextureを変えたりして触ってみて下さい！
　最初に戻したくなったら画面に置いたノードを全て消し、右クリックして「Create Node」→「System」→「Simple Particle System」と押せば最初のシンプルパーティクルのノードが配置されます。


#まとめ
　今回はシンプルパーティクルのSpawn,Initialize,Update,Outputといったコンテキストに始まり、コンテキスト内の機能としてのブロックを解説しました。
　記事を読んでコンテキストとブロックについて多少なりとも分かって頂けたら嬉しいです。