VFXgraphと遊ぼう！

はじめに

こんにちは、デザイナーの藤田です。
今回の記事では弊社で定期的に行っている勉強会で発表した内容を紹介させて頂きます。
この勉強会は「VFXgraphと遊ぼう！」と題しVFXgraphへの興味を高めて触れるきっかけにしてもらう事を目標にしたもので、内容は作例紹介と「インタラクティブな床」の作成チュートリアルになります。

勉強会は下記のような流れで進めましたのでそれに沿って今回の記事も記載しています。

1. 興味を持って頂くための導入としてVFXgraphのサンプル作例紹介
2. VFXgraphの基本的な構成
3. サンプル作例の制作過程を紹介

VFXgraphとは

エフェクトをノードベースで作成することが出来るUnityの機能です。
従来のパーティクルシステム（Shuriken）では主にCPUで処理していた部分をGPUで処理することでより多くのパーティクルを一度に扱うことができ、ノードの組み合わせ次第で様々な表現を作ることが出来ます。

サンプル紹介

勉強会ではまずVFXgraphに興味を持っていただくために、サンプルを共有し基本機能や従来のパーティクルシステム（Shuriken）との違いを解説しつつ実験的な表現を含めた作例を紹介しました。

サンプルを配置したシーン

シェーダーについてのサンプル

下段左から3点はVFXgraphではシェーダーグラフで作成したシェーダーのプロパティを自由に扱えることや、VFXgraphで使えるパララックスと使えなかったパララックスオクルージョンについて、6 ウェイライティングの煙が扱えることなどについてのサンプルになります。

アクションゲームを想定したエフェクトについてのサンプル

下段右側2点はコリジョンに当たった際の挙動や、軌道をカーブを使って制御する方法、また、2点をつなぐ動きなどをVFXgraphで作るサンプルです。

メッシュの参照とポイントキャッシュの使用についてのサンプル

メッシュの頂点やUVなどを参照し、パーティクルをメッシュに沿っての配置しテクスチャの色を適用したサンプルです。
分解と再構築を繰り返す表現を作成しました。

指定したオブジェクトとパーティクルの距離を使用するサンプル

プロパティバインダーを使用してゲームオブジェクトの位置をVFXgraphで参照し、パーティクルとの距離に応じて動きを付けているサンプルです。

VATを制御するサンプル

ボーンアニメーションをHoudiniでVATにし、VFXgraphで制御するサンプルも作成しました。
VATは複雑な動きを持ち込めるのでVFXgraphで制御できると夢が広がりますね。
見た目が気に入っているので今回の記事のアイキャッチにも使用しています。

VFX Graphの基本構成と処理の流れ

サンプルの紹介の後はチュートリアルに入る前にVFXgraphについての簡単な説明を行いました。

4つの主要コンテキスト

VFX Graphは主に4つのコンテキストを繋ぎその中に「ブロック」と呼ばれる処理単位を配置して挙動を作っていきます。。

• Spawn（発生）： パーティクルを「いつ」「どれくらい」発生させるかを管理します（例：毎秒10個出す、一度に500個出すなど）。

• Initialize（初期設定）： 生まれた瞬間のパーティクルの初期状態を決めます（例：初期位置、寿命、最初のサイズなど）。

• Update（更新）： 毎フレームごとの変化を計算します（例：重力をかけ続ける、ノイズで揺らす、位置を移動させるなど）。

• Output（出力）： 最終的な見た目（レンダリング）を決定します（例：テクスチャの指定、色、メッシュの形状、向きなど）。

基本的にこの流れに沿って処理されていきます。

この時「ブロックは上から順に処理される」ことに注意してください。
例えば、「サイズをセットしてから数値を足す」のと、「数値を足してからサイズをセットする」のでは、最終的なアウトプットが変わってしまいます。
意図した通りの挙動にならない場合は、ブロックの並び順（計算順序）を見直してみるのがポイントです。

 オペレーターとブラックボード

またVFX Graphを使いこなす上で重要な要素として「オペレーター」といろいろな値を管理する「ブラックボード」があります。

• オペレーター（Operators）： いわゆる「ノード」を組んで計算を行う部分です。四則演算やサイン波、ランダムなどブロックに繋ぐことで、複雑な動きや変化を作ることができます。

• ブラックボード（Blackboard）： 変数（プロパティやアトリビュート）を管理する場所です。

  • 「アトリビュート」: 計算結果を保存しておき、後で別のコンテキストで使う。（一時的な値の保存）

  • 「プロパティ」: C#スクリプトや他のVFX Graphから値を操作できるようにする。（外部からのアクセス）

チュートリアル：インタラクティブに動く床を作ろう

VFXgraphについてザックリと解説したところで実際にチュートリアルに入りました。

今回は上記のような「指定したオブジェクト（プレイヤー）が近づくと、六角形の床が競り上がり、色が変化する」 というエフェクトの作り方を解説します。

ノードの全体像と作成の流れ

1.使用するコンテキストとブロックを配置
2.六角形を並べる
3.指定したオブジェクトが近づいたときにパーティクルの高さが変化するようにする
4.高さと色の初期値をランダムにし、　動きに変化を加える

手順①：基本構成の作成（Contextの設定）

VFX Graphのデータを作成し、基本となる4つのContext（コンテキスト）を設定します。

Spawn: Single Burst を追加し、Countを 512 程度に設定。
Initialize: Set Position を追加。初期位置を保存するために、Blackboardで Vector3 のAttribute（名称：InitializePosなど）を作成し、そこに Get Position の値を繋いで保存しておきます。

Update: Set Position を置いておきます。
Output: URP Mesh Output を使用し、六角形のメッシュを設定します。

手順②：六角形を均等に並べる

6角形はただ並べるだけでは隙間ができてしまうため、Operatorノードを組んで互い違いに配置されるようにします。

• IDの取得: Get Particle ID でパーティクルごとのIDを取得。

• 行と列の計算:

  • IDを「20」で割った余り（Modulo）を列として使う（X軸）

  • IDを「20」で割った商（Divide）を行として使う（Z軸）

• 互い違いにする処理:

  • 行番号を「2」で割った余り（Modulo）を出し、奇数行か偶数行かを判定。

  • 奇数行の場合のみ、位置を少しずらすようにオフセットを加算します。

• 適用: 計算結果を Initialize コンテキストの Set Position に繋ぎます。

手順③：オブジェクトとの連動（Property Binder）

Unityのシーン上のオブジェクト（プレイヤーなど）の位置情報をVFX Graphに渡す設定です。
ノードは下の図のように配置し、terget_posがVFX Property Binder コンポーネントを介して指定したオブジェクトの位置を取得してきています。

1. 距離の計算
   Distance ノードを使用し、パーティクルの現在位置（Get Position）と、ターゲット位置（TargetPos）の距離を測ります。

2. 高さの制御（Sample Curve）
   距離を Sample Curve に入力し「近いと1、遠いと0」になるようなカーブを描きます。

   この値を Update コンテキストの Set Position のY軸（高さ）に加算します。
   ※ Minimum ノードなどで高さの上限を設定しておきます。

Blackboard設定: Position のプロパティを作成（例：TargetPos）し、Exposed（公開） にチェックを入れます。

コンポーネント設定:シーンのVFX Graphオブジェクトに VFX Property Binder コンポーネントを追加します。

バインディング:プラスボタンから Position を追加。Propertyに (ブラックボードで作成したプロパティの名称)_position と入力。Targetに追従させたいゲームオブジェクト（Playerなど）をドラッグ＆ドロップ。これで、シーン上のオブジェクトを動かすと、VFX Graph内の値も更新されるようになります。

手順④：高さと色の初期値をランダムにし、　動きに変化を加える

1. ランダム化
   

2. 回転と色の演出:

   • 同様に距離の値を別のカーブに通し、Output の Set Color や Set Angle に繋ぎます。

   • 競り上がるタイミングで180度回転させたり、発光色を変えたりすることで、リッチな見た目になります。
     

これで、プレイヤーが歩くと床が反応して動くエフェクトの完成です。初期位置に少しランダムな値を加えたり、カーブを調整したりして、好みの動きを探ってみてください。

まとめ

今回は「ゆるふわ勉強会」という枠での発表で気軽に幅広い方に見て頂ける機会でしたので職種の垣根を越えて興味を持っていただきつつ、VFXGraphのエフェクト認識をほぐすような内容になるよう意識しました。
VFX Graphと聞くと、爆発や魔法、スキル演出といった「派手なエフェクト」をイメージすることが多いかもしれません、しかし今回ご紹介したようなプレイヤーの動きに連動する「インタラクティブなギミック」のような空間演出などにも活用できます。
「GPUによる物量の描画」「複雑な動きを計算」「3D形状との高度な連携」などをコードを書かずに実現できるので、アイデアを膨らませて、自由な発想で遊んでみてください。

デザイナーを募集中です

Aimingでは、より良いものを追い求める技術向上や表現の追求に興味があるデザイナーを募集中です。今回はデザイナーの話をしましたが、企画やエンジニアも同じような方々が集まっている会社です。このような環境でゲームを作りたいと思った方は、ぜひ下記の応募欄から応募をお願いいたします。

最後まで読んでいただき、ありがとうございました！

一緒にゲームを作る仲間を募集中です！！詳しくは各ページをご覧ください！