【VFX Graph】Particle Strip を使ってみる

# 概要
パーティクル同士を線で結んだ表現が可能な `Particle Strip` を利用し、中央から線が広がっていく、以下のエフェクトを作成します。

`Particle Strip` は、 `Unity 2019.3` から使えるようになったようです。
[![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/6d134b82-ce66-3605-c1a9-8e69ed7b6b92.gif)](https://youtu.be/lXrvJYaipM8)

# 環境
OS：Windows 10
Unity：2019.4.0f1

Visual Effect Graph：7.3.1
High Definition RP：7.3.1

# 準備
今回は `GPU Event` を利用するのですが、[公式情報](https://docs.unity3d.com/Packages/com.unity.visualeffectgraph@8.0/manual/Events.html
)によると、この部分はまだ実験的機能のようです。

なので以下項目をチェックしてください。
 `Preferences > Visual Effects > Experimental Operators/Blocs`

※ ここにチェックをしておかないと Event関連の項目がBlockメニューに表示されません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/6976f70a-70cd-6d97-a258-8b387b572be9.png)

# VFX Graph の初期設定
`GPU Event` の追加を行う前にデフォルトのVFX設定を以下のように調整しておきます。

`Set Velocity Random` の範囲を `-10 ~ 10` にする事で放射状にパーティクルを広げます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/b906132f-859f-8b30-bdd1-429d4df42052.png)

# Particle Strip部分の作成
## Triggerイベントブロック作成

ここから、GPU Eventをセットアップしていきます。
まずは、 `Update Particle` に `Trigger Event Rate` ブロックを追加してください。

追加されたら、 `Rate` 項目に `60` を設定します。
入力部分が非常に狭いですが、これは既知バグらしいです・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/88e1ad54-10ad-180b-bf82-1da71244268e.png)

## GPU Eventのセットアップ
次に `GPU Event` 、 `Initialize Particle` の枠を追加していきます。
これは、以下の丸をつけている部分からドラッグで引っ張るとメニューが出てくるので、その際にそれぞれの項目を選択して追加してください。

また、今回はデフォルト出力の `Output Particle Quad` は利用しないので、接続を切ってしまって構いません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/4e7f34c8-a443-51e4-6236-21a44fa26469.png)

## Initialize項目を Particle Strip に変更

`GPU Event` に接続された `Initialize Particle` を選択し、 `Inspector` の `Data Type` を `Particle Strip` に変更してください。

これで、 Initialize項目が `Particle Strip` となるようです。
ここは、作成の際に直接選択ができればよいのですが、現状では一度作成して `Data Type` を変更するという手続きを取るしかないようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/6f937d9f-622d-c91e-1b50-4420903cb4e5.png)

# UpdateとOutput項目の作成
更に、 `Update Particle Strip` と `Output ParticleStrip Line` の項目を作成します。

先程同様、丸をつけた部分からドラッグする事で追加メニューが表示されるので、それぞれ追加してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/f14e43a6-ec97-38a7-eee2-4b44324cd888.png)

## Particle Strip の初期設定

`Initialize Particle Strip` の項目を
以下のように変更します。

### 出現量
`Strip Capacity : 1000`
`Particle Per Strip Count : 500`
### 位置
`Inherit Source Position` ブロックを追加してください。
これで本流の `Particle` を元に位置が設定されるようになります。

### 表示時間
`Set Lifetime Random` ブロックを追加してください。
設定値は `1 ~ 3` 秒としました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/f19161d3-7320-b2d7-37e2-ae8d638daf38.png)


この時点で、パーティクルにラインが表示される様になりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/35610a8c-d0bd-e46a-501f-b636d292653b.png)

# 装飾

もう少し面白みをつけていきます。

## 線の表現

`Update Particle Strip` に `Turbulence` ブロックを追加します。
これで、発生した線に揺らぎが出てきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/d0b98060-6803-5dc4-3387-acdfb99d87d2.png)

## 線の色

`Output ParticleStrip Line` に `Set Color over Life` ブロックを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/0cebfcf1-c2c3-fb28-9589-40a561c2989f.png)

色の設定は以下のとおりです。

### 左端
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/a19bb10e-6da7-03aa-1910-c998e0a76861.png)

### 右端
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/1934fbcb-946c-960e-a711-4798812d7cf6.png)

# 結果
これで、以下のエフェクトが作成できました。
[![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/6d134b82-ce66-3605-c1a9-8e69ed7b6b92.gif)](https://youtu.be/lXrvJYaipM8)


# 参考
**VFX Graph でなんか作る（4月16日号） - Unityステーション**
https://youtu.be/6Ff7S4ocNGs?t=6200

**Unity 2019.4 で VFXGraph を使ってみる (HDRP)**
https://qiita.com/beckyJPN/items/31274d76059b373f2941

**Visual Effect Graph Preferences | Visual Effect Graph | 8.0.1**
https://docs.unity3d.com/Packages/com.unity.visualeffectgraph@8.0/manual/VisualEffectPreferences.html