2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

オーブをVFXGraphでつくる

Last updated at Posted at 2022-01-18

VFXGraph修行中メモ

完成品

元ネタ

ParticleSystemで作られてたやつをもとにVFXGraphで再実装した。

作り方

VFXGraph

VFXGraph

VFXShaderGraph: Orbのリング部分

VFXShaderGraph

5つのパーツから構成される

  1. Circle: オーブの輪郭
  2. EnergyLineHead: エネルギー線の先端軌跡
  3. EnergyLine: エネルギー線
  4. OrbCore: オーブの中心の光
  5. Smoke: オーブから出力される煙

1. Circle: オーブの輪郭

VFXShaderGraphのリング

  • 極座標でリングを作る.
  • SmoothStepで輪郭をくっきりさせる

Circle

  • 3つのリングを一定間隔で生成して動きのあるリングを作る
  • VFXShaderGraphのリングを描画要素に指定
  • サイズはLifeに応じて大きくしつつ、Alphaは開始と終わりで薄くする.

circle

2. EnergyLineHead: エネルギー線の先端軌跡

EnergyLineHead

  • 中心付近からランダム位置に生成、角度とベクトルもランダムに設定
  • Turbulenceで軌跡をいいかんじにバラけさせる
  • TriggerEventRate(OverTime)でEnergyLine用のイベントを発火する

EnergyLineHead

3. EnergyLine: エネルギー線

EnergyLine

  • 末尾サイズを少しすぼめつつ、色は末尾を透明に.
  • HDRColorで光らせる

EnergyLine

4. OrbCore: オーブの中心の光

OrbCore

  • 開始角度とLifetime、SpawnRateをいい感じに調整してウニョウニョ動いているように見せる.
  • テクスチャは煙っぽいものやウニョウニョ感が出るものを使う

OrbCore

5. Smoke: オーブから出力される煙

Smoke

  • RandomVelocity/RandomAngleで射出
  • Alphaは徐々に薄く、色は暗めに

Smoke

感想

構成要素の分解ができれば意外と作れる..!
Turbulenceで乱数軌道を作るところと、TriggerEventRate(OverTime) xOverDistanceがハマリポイントだった.

2
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?