【Unity VFX Graph入門】Particle Strip Effect

1. Home
2. VFX & Shader

もくじ

• はじめに
• Particle StripのBuilt-inテンプレート
• ベースとなるParticle Systemを作る
• Particle Stripを追加する
• エフェクト完成

はじめに

Unity VFX GraphのParticle Stripを使いラインエフェクトを作成してみたい。Particle StripによりPaticle同士を線分として繋ぐことが可能となり、Particleの軌跡(トレイル)を描くことができる。Particleを使った点から線の表現が容易に実現できる。以下のUnity Japanより公開されているYouTubeビデオを参考にしてParticle StripのVFX作成を試してみる。

Particle Stripで軌跡を描こう - Unity VFX Graph Advanced Tips #1

本記事に掲載しているParticle Stripの作成プロセスはWork Scape Videoとしても作成したので、細かい操作や設定方法など文章のみでは分かりづらいところは、こちらのビデオも併せて参照してもらえると良いだろう。

Making A Particle Strip Effect With Unity VFX Graph | Work Scape #2

使用した各プログラムのバージョンは下記の通り。

• Unity 2019.4.18 LTS
• Visual Effect Graph 7.5.2

Particle StripのBuilt-inテンプレート

Particle Stripを簡単に試すことができるテンプレートがあるので、まずはそれを使ってみる。とりあえず、以下の手順に従い準備作業を行う。

1. HDRPでプロジェクトを作成
2. 新規でシーン作成
3. 背景をブラックにするのに、CameraとかVolumeを色々いじる。
4. VFX Graphのアセットを追加してScene上にドラッグ&ドロップしてインスタンス化
5. VFX Graph Editorを開いて、デフォルトのグラフエレメントを全て削除

VFX Graph Editor上で右クリックして、Create Node → System → Simple Heads & TrailsでテンプレートからParticle Stripのグラフを追加できる。( 1.1)

テンプレートから必要なコンテキスト、ブロックなどのグラフエレメントが全て作成される。Game Window上にエフェクトがうまく表示されるようVFX Graphのゲームオブジェクトの位置を調整する。このテンプレートからParticle Stripの基本的なグラフの構造が分かるだろう。( 1.2)

ベースとなるParticle Systemを作る

Particle Stripを1から作るためにまずはベースとなるParticle Systemを作る。一旦、テンプレートから作成したグラフは全部削除し、必要な要素を一つずつ追加していきたい。( 1.3)

1.3 VFX Graph Editor

Spawn Context

まずはVFX Graph Editor上に最初のエレメントとして「Spawn」コンテキストを追加する。さらに「Spawn」コンテキスト内に「Contant Spawn Rate」ブロックを追加する。Rateはここではあまり大きくせず、15ぐらいにしておく。( 1.4)

Initialize Particle Context

「Spawn」コンテキストの下に「Initialize Particle」コンテキストを追加する。Capacityは128とする。「Initialize Particle」コンテキスト内に「Set Lifetime」、「Set Position Random」、「 Set Velocity Random」の3つのブロックを追加する。

「Set Lifetime」のLifetimeは3、「Set Position Random」、「 Set Velocity Random」のRandomはPer-componentとして-1から1と設定する。( 1.5)

Update Particle Context

「Initialize Particle」コンテキストの下に「Update Particle」コンテキストを配置する。そして「Update Particle」コンテキスト内に「Force」と「Set Size over Life」の2つのブロックを追加する。

「Force」ブロックのForceには「Get Attribute: Position」ノードと「float」ノードを追加して「Multiply」ノードを経由させてつなげる。floatにはマイナスの値を設定する。ここでは-0.9とする。発生したParticleは中心に向かって飛ぶ。( 1.6)

Output Particle Quad Context

「Update Particle」コンテキストの下に「Output Particle Quad」コンテキストを追加する。Main Textureを適当なイメージに変える。ここではホワイトカラーの単純な円を設定した。「Orient : Face Camera Plane」ブロックを追加する。Cameraに対して常に正面を向くように自動で調整してくれる。( 1.7)

以上でParticle StripのベースとなるParticle Systemが設定できる。中心から外へ飛び出すParticleそれぞれにマイナスのForceを掛けることで、静止画だと判りづらいが、Particleは中心に少しずつ戻りながら緩やかなカーブを描くようになる。( 1.8, 1.9)

Particle Stripを追加する

ここからParticle Stripのためのエレメントを追加していく。

Update Particle Context

「Update Particle」コンテキストに「Trigger Event Rate」ブロックを追加する。Rateは60とする。RateのInputボックスは表示がおかしくなっており、数字が見切れているが、確かに60と入力されている。( 1.10)

GPUEvent Context

「Trigger Event Rate」のevtから線を延ばして「GPUEvent」コンテキストを追加する。( 1.11)

Initialize Particle Strip Context

「GPUEvent」コンテキストの下に「Initialize Particle Strip」コンテキストを追加する。VFX Graph Editor上のメニューでは「Initialize Particle Strip」コンテキストは出せないので、一旦「Initialize Particle」コンテキストを追加して選択し、Inspector上で「Data Type」を「ParticleStrip」に変更する。Strip CapacityとParticle Per Strip Countはそれぞれ128とする。( 1.12)

続けて、「Initialize Particle Strip」コンテキスト内に「Inherit Source Position」ブロックと「Inherit Source Color」ブロックを追加する。また、「Set Lifetime」ブロックを追加し、Lifetimeを2とする。( 1.13)

Update Particle Strip Context

「Initialize Particle Strip」コンテキストの下に「Update Particle Strip」コンテキストを追加する。「Update Particle Strip」コンテキスト内に「Turbulence」ブロックと「Set Color over Life」ブロックを追加する。「Turbulence」ブロックのIntensityを0.4、Frequencyを2とする。ここの値は好みで変える。「Set Color over Life」ブロックのColor ModeをColorとし、グラデーションエディターで好みのColorにする。( 1.14)

Output ParticleStrip Quad Context

「Update Particle Strip」コンテキストの下に「Output ParticleStrip Quad」コンテキストを追加する。Blend ModeをAdditiveとする。色の加算が起きる。また、Main Textureを適当なイメージに変更する。ここではラインが見えやすくなるようにWhiteで1pxのイメージを使用する。

「Set Size over Life」ブロックを追加する。「Set Size over Life」ブロックを選択し、Inspector上でCompositionをMultiplyとし、ベースのParticle SystemのSizeも反映されるようにする。最終的なSizeはCurveエディターで調整する。( 1.15)

エフェクト完成

完成したParticle Stripのグラフとそのエフェクトの実行プレビュー。ほぼBuit-inテンプレートと同じ構造をしている。VFX Graphを使いこなすにはこのようなParticle Systemのパターンを色々と作っていくのが良いのだろう。( 1.16, 1.17)

1.16 Particle Stripプレビュー

1.17 別バージョンのParticle Strip