UnityのVisual Effect Graphの設定と使い方 | Unityを使った3Dゲームの作り方(かめくめ)

UnityのVisual Effect Graphの設定と使い方

今回はUnityのVisual Effect Graph(VFX)について見ていきたいと思います。

VFXはUnityのParticle Systemのパワーアップ版?でノードベースで視覚的にエフェクトを作成出来るツールです。

シェーダーを視覚的に作成出来るShader GraphのParticle System版ですね。

Unityのシェーダーグラフの使い方と個々のノードについて見ていきます。

現在(2019/03/22)はまだプレビュー版です。

最新鋭の映像ツールから生まれた新登場の Visual Effect Graph について学びましょう。Unity 2018.3 では HDRP 用 のプレビューをご利用いただけます。ご意見をお聞かせください。製品の改善にフィードバックを生かします!
スポンサーリンク

VFXを使用する前に

VFXを使用するには

Unity2018.3以降のバージョン
SRPをHDRP

とする必要があります。

既にゲームを作っているプロジェクトを使うのではなくVFXを試しに使ってみる用のプロジェクトを作成した方がいいです。

SRPに関しては

Unityのプロジェクト作成時にいくつかのテンプレートを選択する事が出来ますが、その違いを見ていきます。

の記事で記載しているSRPの設定をするか、Visual Effect Graphを試しに使ってみたいという方は新しいプロジェクトを作成し、テンプレートをHi-Definition RPで作成するとすぐにVisual Effect Graphを使えます。

旧テンプレートからHi-Definition RPへと変更して使う場合はPackage Managerでいくつかインストールする必要がありますが、組み合わせによってはうまくVFXが動作しない為、わたくしのインストールしたバージョンを書いておきます。

Unity2018.3.11f1
Visual Effect Graph 4.10.0-preview
High Definition RP 4.6.0-preview

です。

同一バージョンでもうまくいかない可能性もあるので、バージョンを変えてインストールし、エラーが出ないものを選択してみてください。

新しいバージョンをインストールした後に前のバージョンに戻すとうまく動作しない事があるのでそんな時は一旦removeボタンを押した後に再度インストールするとうまくいく事があります。

バージョンを変えるにはPackage Managerのウインドウの右上から変更出来ます。

PackageManagerで違うバージョンに変更する方法

今回はVisual Effect Graphの大まかな画面の説明と使い方に特化し、個々のノード、コンテキスト、ブロックの説明については別記事でやりたいと思います。

Visual Effect Graphを使うまでに行う事

設定が終わったところでVisual Effect Graphを使う前にエフェクトのゲームオブジェクトの作成と設定について見ていきましょう。

Visual Effectゲームオブジェクトの作成

Visual Effect Graphでエフェクトを作成する時に必要になるものを作成します。

ヒエラルキー上で右クリックしVisual Effect Graph→Visual Effect Graphを選択し、Visual Effectのゲームオブジェクトを作成します。

Visual Effectゲームオブジェクトの作成

これがエフェクトのゲームオブジェクトになります。

作成したVisual Effectを選択するとシーン上にランプのアイコンが表示され、インスペクタは以下のようになります。

Visual Effectゲームオブジェクトのインスペクタ

Visual EffectのAsset Templateの部分にはこのエフェクト用のテンプレートファイルを設定する必要があります。

エフェクト用テンプレートファイルの作成

Visual EffectゲームオブジェクトのAsset Templateにテンプレート用ファイルを設定する必要があるのでそのファイルを作成します。

Assetsエリア内で右クリックしCreate→Visual Effect→Visual Effectを選択し、新しく出来たファイルの名前をMyVFXとします。

VFXのテンプレートファイルの作成

これでテンプレートファイルが出来ました。

VisualEffectのテンプレートファイルが作成された

作成されたMyVFXファイルをVisual EffectゲームオブジェクトのAsset Templateにドラッグ&ドロップして設定します。

VisualEffectにテンプレートファイルを設定

Visual EffectゲームオブジェクトのAsset Templateにテンプレートファイルを設定するとシーン上のVisual Effectゲームオブジェクトからエフェクトが放出される様子が見れるようになります。

シーン上のVisual Effectからエフェクトが発生する

今回はヒエラルキー上にあらかじめVisual Effectゲームオブジェクトを作成してからインスペクタでVFXのテンプレートファイルを設定していますが、テンプレートファイルをヒエラルキー上にドラッグ&ドロップをするだけでそのテンプレートファイルが設定されたVisual Effectゲームオブジェクトの作成も出来ます。

これでVisual Effect Graphを使う準備が整いました。

Visual Effect Graphの画面

作成したMyVFXファイルをダブルクリックするかVisual Effectゲームオブジェクトを選択しインスペクタのVisual Effectの右のEditボタンを押すとVisual Effect Graphのウインドウが開きます。

このウインドウ内で視覚的な操作をしてエフェクトを作成していくことになります。

Visual Effect Graphの画面

ツールバー

Visual Effectの画面の上にはツールバーがあります。

Refreshボタンを押すと画面を更新します。
Sellect Assetボタンを押すと現在選択しているAssetsフォルダのテンプレートファイルが選択されます。
Blackboardボタンを押すとParametersウインドウのオンとオフを切り替えます。
Target GameObjectボタンを押すと現在のテンプレートファイルのプレイヤー(開始や停止、再生レートの設定、イベントの送信)のオン・オフを切り替えます。
Force Runtime Modeは翻訳するとランタイムを強制するということのようですがよくわかりません。
Auto Compileは自動でコンパイルしその場で変化を確認出来るようにします。
Compileボタンは手動でコンパイルをする時に押します。

Parametersウインドウ

先ほどの画像の赤い四角で囲った部分がParametersウインドウで右上の+を押すと新しいパラメータ―を作成する事が出来ます。

試しに+ボタンを押してVector3を選択しNew Vector3の部分をダブルクリックするか選択した後インスペクタで名前をMyVector3とします。

VisualEffectの新しいパラメータを作成する

矢印の部分をクリックするとそのパラメータの値を見ることが出来ます。

Exposedにチェックを入れるとVisual Effectゲームオブジェクトのインスペクタでこのパラメータが見れるようになります。

VisualEffectゲームオブジェクトのインスペクタにパラメータが表示された

パラメータの横のチェックを入れるとVisual Effect Graph内で設定したパラメータのデフォルト値を上書きする事が出来ます。

VisualEffectのパラメータのデフォルト値を上書きする

チェックを入れない場合はデフォルト値が表示されます。

Target visual effect GameObjectウインドウ

先ほどの黄色い四角で囲まれた部分がTarget visual effect GameObjectウインドウでヒエラルキー上でVisual Effectゲームオブジェクトを選択した状態でAttachボタンを押すとエフェクトのプレイヤーが表示されます。

エフェクト操作のプレイヤーウインドウ

Detachボタンを押すと現在プレイヤーで操作しているエフェクトを外します。
Selectボタンを押すとアタッチ(取り付け)されているエフェクトのゲームオブジェクトを選択します。
Play Rateは再生のレートを設定出来ます。
EventsのOnPlayとOnStopボタンはイベントを発生させるボタンで、エフェクトのコンテキストでそれらのイベントを契機にエフェクトの発生や停止をさせる時に使用出来ます。

ノード、コンテキスト、ブロック

実際にエフェクトの流れを作成していくのが先ほどの画像の青色の四角で囲った部分のコンテキストでその中にブロックを作成してパーティクルへの効果を作成していきます。

青色で囲った部分のコンテキストはデフォルトで作成されるものですが、Visual Effect Graphウインドウの何もない所でSpaceキーを押すか、右クリックからCreate Nodeを選択しそこからContextを選んでいけば自分でコンテキストを作成する事も出来ます。

コンテキスト、ブロック共通で右上のチェックを外すとそのコンテキストやブロックの効果を無効に出来ます。

コンテキストの有効・無効の切り替え

Spawn

Spawnコンテキストはエフェクトを生み出すタイミングのコンテキストです。

Visual Effect GraphのSpawnコンテキスト

デフォルトではConstant Spawn Rateブロックが設定されていてRateで定期的に生み出すエフェクトの数を設定します。

Initialize

Initializeコンテキストはエフェクトの初期化をするコンテキストです。

Visual Effect GraphのInitializeコンテキスト

デフォルト設定では

Capacityで同時に生存できるエフェクトの許容量を設定。
Boundsで領域を作成し、その領域がカメラ内にある時にエフェクトを生成するようです。

デフォルトのブロックでは

Set Velocity RandomブロックでXYZ軸の速度の最低値と最大値の範囲のランダム値で設定しています。
Set Lifetime Randomブロックでパーティクルの生存時間を最低値と最大値の範囲のランダム値で設定しています。

右上のLocalという部分をクリックするとWorldに変化し、パーティクルはローカル軸からワールド軸へと変化します。

Initialize、Update、QuadOutputが連動していて、それらのLocal部分もWorldに変化します。

Update

Updateコンテキストはパーティクルが生成されてからフレームレートで実行されるコンテキストです。

Updateが実行されるタイミングはテンプレートファイルのインスペクタで設定する事が出来ます。

コンテキストのUpdateのタイミング設定

Fixed Delta Timeは固定フレームでDelta Timeはフレームの実行が処理速度に応じて変わるようです。

エフェクトのサイズや速度等、パーティクルが生成されてから変化を加えたい時はこのコンテキストにブロックを作ると良さそうですね。

Quad Output

Quad Outputは最終的な結果出力コンテキストです(他のアウトプットもあります)。

デフォルトの設定を見ていきます。

Blend Modeはブレンドの仕方の設定で

Additiveは色を追加するブレンド方法でアルファ値はブレンドする前に乗算されます。
Alphaはテクスチャのアルファ部分を透明にするブレンド方法です。
Maskedはブレンドせず、ピクセルカリング(ピクセル毎に取り出す)を行う為にアルファのしきい値を使用します。
AlphaPremultipliedはAdditiveブレンドとAlphaブレンドの両方を使用することが出来ます。
Opaqueはブレンドせずアルファも使用しません。

UVModeはUVがどのように処理されるかで

SimpleはUVを変更せずそのまま
FlipbookはFlip Book Sizeを指定してパラパラ漫画のように処理します。
FlipbookBlendはFlipbookと同じですが、texIndexの小数部に応じてセル間をブレンドするようです。
ScaleAndBiasはUVScaleとUVBiasの値でタイリングを行います。

Use Soft Particleにチェックを入れるとパーティクルデプスとシーンデプスのテストを行う事が出来ます。
Main Textureはパーティクルに使用するテクスチャの設定です。

デフォルトで設定されているブロックを見ていきます。

Orient : Face Camera Planeブロックはエフェクトの向く方向を設定します。
Set Size over Lifetimeブロックはパーティクルの生存時間に対するサイズを設定しています。
Color / Alpha over Lifetimeブロックはパーティクルの生存時間によって色や透明度の変化を設定しています。

コンテキストやブロックはVisual Effect Graph上で値を変更しますが、一部はインスペクタで設定を変更出来るものもあります。

ウインドウ、コンテキスト、ブロックの操作

ウインドウ、コンテキスト、ブロックの操作方法について少し見ていきます。

ウインドウ

Visual Effect Graphの画面内の何もない所で右クリックするとコンテキストメニューからCreate Nodeでノードを作成したり、Create Sticky Noteで付箋を貼ることができます。

Create NodeとCreate Sticky Node

付箋はタイトルと内容を編集する事が出来ます(日本語は使えないみたいですね?)。

タイトル付近で右クリックすると付箋の設定を変更する為のコンテキストメニューが表示がされます。

Visual Effect Graphの付箋

Spaceキーを押すとコンテキストメニューのCreate Nodeと同じでノードの作成が出来ます。

Spaceキーでノード作成メニューの表示

表示された項目からコンテキストやブロックを選択することが出来ますが、検索窓にキーワードを入れて検索する事も出来ます。

マウスのスクロールボタンでスクロールするとコンテキストとブロックの拡大と縮小をすることが出来ます。

以下は下スクロールをして縮小してみた時の例です。

コンテキストとブロックの縮小

スクロールボタンを押した状態でマウスのドラッグ、またはAltキーをおした状態でマウスドラッグをするとマウスを押した部分から視点を移動させることが出来ます。

VisualEffectGraphで視点の変更をしたサンプル

マウスドラッグをすると破線の四角が表示されるので、ノード、コンテキスト、ブロックを囲むと選択する事が出来ます(複数選択可)。

コンテキストとブロックを選択出来る破線の四角

Fキーを押すと選択したコンテキストまたはブロックにフォーカスする事が出来ます。

コンテキストやブロックをフォーカスする

Ctrl+Aキーを押すと全てのコンテキストとブロックを選択する事が出来ます。

コンテキストとブロックを全選択

Ctrl+Dキーで複製、Ctrl+Cキーでコピー、Ctrl+Vキーで貼り付け、Delキーで削除等は通常のアプリケーションと同じように使えます。

ノード、コンテキスト、ブロック

ノード、コンテキスト、ブロックはタイトルが表示されている辺りのヘッダ部分をマウスドラッグする事で移動させることが出来ます。

ブロックをドラッグして他のコンテキストに移動させる事や、コンテキスト内の並びを変更する事も出来ます。

コンテキストやブロックを選択した状態でマウスの右クリックするとコンテキストメニューが表示され、新たなブロックを生成したり等のコンテキストやブロックに関するメニューが表示されます。

VisualEffectGraphのコンテキストのコンテキストメニュー

また、選択した状態でSpaceキーを押すとそのコンテキストで追加出来るブロックを選択することが出来ます。

ノードやコンテキストやブロックのソケット部分をドラッグし、何もない場所でドロップするとそのソケットと連結出来るコンテキストやノードを選択することが出来ます。

VisualEffectGraphのソケットをドラッグし何もない場所でドロップ

上の例ではSpawnコンテキストのConstant Spawn Rateに繋げるソケットからドラッグし何もないところでドロップするとConstant Spawn Rateに繋げることが出来るノードの選択が出来ます。

Timelineを使用する

TimelineでVisual Effect Graphの連携が出来ます。

タイムラインに関しては

Unityでタイムライン(Timeline)を使ってゲームのイベントシーンの動きを作成してみます。タイムラインを使うとキャラクターのアニメーションや音声の再生等のタイミングを合わせることが視覚的にわかりやすくなります。

を参照してください。

TimelineでVisual Effect Activation Trackを使用してイベントで属性を変更したり、エフェクトのパラメータ―の制御等も出来ます。

Visual Effect GraphをTimelineで使用するにはVisual Effectゲームオブジェクトを選択した状態でTimelineウインドウのCreateボタンを押します。

TimelineでVisualEffectGraphを使用する為にVisualEffectゲームオブジェクトを選択

VisualEffectゲームオブジェクトを選択した状態でTimelineのCreateボタンを押す

これでVisualEffectGraph用のTimlineファイルが作成出来ます。

Timelineウインドウ内のトラック部分の空いた場所で右クリックしVisual Effect Activation Trackを選択します。

VisualEffectActivationTrackの作成

これでVisual Effect Activation Trackが出来たのでヒエラルキー上のVisual Effectゲームオブジェクトをドラッグ&ドロップしてVFXテンプレートファイルを設定します。

VisualEffectActivationTrackにVFXファイルを設定する

Visual Effect Activation Trackを選択した状態で右クリックしVisual Effect Activation Clipの作成をします。

VisualEffectActivationClipの作成

Visual Effect Activation Clipを選択した状態でインスペクタには

VisualEffectActivationClipのインスペクタ

上のようにOnPlayとOnStopイベントに関連して属性を設定する事が出来ます。

属性はそれぞれのイベントで+ボタンを押すことで属性を追加する事が出来ます。

VisualEffectActivationClipのイベント属性の追加

Visual Effect GraphとTimelineを使う

試しにOnPlayイベントにColorで赤い色を追加してみます。

VisualEffectActivationClipのOnPlayイベントにColorアトリビュートを設定する

次にVisual Effect GraphでSpawnコンテキストにOnPlayイベントを接続します。

SpawnコンテキストにEventコンテキストを接続する

InitializeコンテキストにInherit Source Colorブロックを設定します。

InitializeコンテキストにInherit Source Colorブロックを設定

次にVisual Effect Activation Clipの位置を30フレーム辺りから始まるようにドラッグします。

VisualEffectActivationClipを30フレームから開始させる

実際に実行してみると、

VisualEffectActivationTrackのサンプル

上のようにVisual Effect Activation Clipが来た時にパーティクルの色が赤くなっています。

VFXで実際にエフェクトを作る際に役立つもの

VFXで実際にエフェクトを作る時に参考になるのが、Unity BlogのVFXのサンプルについての説明です。

Visual Effect Graph empowers you to author next-generation visual effects through its node-based behaviors and GPU-based compute power. For starters, we re...

説明されているサンプルは実際にプロジェクトを以下のGit Hubからダウンロードできます。

Visual Effect Graph - Samples Project. Contribute to Unity-Technologies/VisualEffectGraph-Samples development by creating an account on GitHub.

最新バージョンのみダウンロードすれば全部のサンプルを見れますが、最新のサンプルははUnity2019のベータ版を使う必要があります。

終わりに

視覚的な操作でパーティクルが作成出来るのは便利ですね。

ただ新しいシステムに替わるとその使い方を覚えないといけないのが辛い所・・・・(´Д`)

今回はVisual Effect Graphの使い方に特化させました。

使用するノードやコンテキストの詳細は以下の記事を参照してください。

UnityのVisual Effect Graphのノード、コンテキストの個々の詳細を見ていきたいと思います。

ブロックに関しては

UnityのVisual Effect Graphのブロックの個々の機能について見ていきます。

を参照してください。

参考サイト

UnityWiki-VisualEffectGraph

スポンサーリンク

記事をシェアして頂ける方はこちら

フォローして頂くとやる気が出ます