🔥

FireworksをVFX Graphでつくってみる (SGL004)

2022/01/16に公開

ShaderGraphとVFX Graph両方を学んでいくメモ..!
Youtubeに英語ですばらしいチュートリアルTutorialがあったので写経してみた.

完成品

https://www.youtube.com/watch?v=sXMC2Au1oA8

全体像

VFX Graph

作り方

本家を見るのが一番...!
https://www.youtube.com/watch?v=iCEHarLRCzI

ざっくり解説

4つのParticleSystemを作る.

  1. 打ち上げ玉のパーティクル (Rocket)
  2. 打ち上げ玉消滅後の爆発パーティクル (Explosion)
  3. 打ち上げ玉の軌道パーティクル (RocketTrail)
  4. 打ち上げ玉消滅後の爆発の軌道パーティクル (ExplosionTrail)

Rocket

打ち上げ玉

  • Init: SetPosition/SetVelocityRandom/SetLifetimeRandom
  • Update: Gravity/TriggerEventOnDie/TriggerEventAlways
  • Output: SetSize/SetColor
  • ポイントは、Gravityでちょっと減衰させるのと、SetColorでHDRで少し光らせること
  • TriggerEventOnDieでパーティクル消滅後に爆発イベントのパーティクル発火につなげる

RocketTrail

打ち上げ玉軌道

  • Init: SetLifetime/InheritSourcePosition/AddVelocityFromDirection&Speed(RandomDirection)
  • Output: SetSize/SetScale/SetColorOverLife
  • ポイントは、Capacityを大きめに設定して、きちんと軌道を表示させるParticleを用意すること。あとInheritSourcePositionで位置を継承しつつ、AddVelocityで少し加速させること

Explosion

爆発

  • Init: SetLifetimeRandom/InheritSourcePosition(Uniform)/AddVelocityFromDirection&Speed(RandomDirect)/SetSizeRandom(Uniform)
  • Update: LinearDrag/Gravity/TriggerEventRate(OverTime)
  • Output: SetColorOverLife
  • ポイントはSetColorOverLifeで色を設定するときに、ほんの少しだけHDRで白色Flashをいれること(Strenth+8くらいで)
  • こうすることで爆発時にチカっと光る感じのエフェクトになってリアル感が出る

ExplosionTrail

爆発軌道

  • 打ち上げ玉軌道から基本的にパクってくる. 速度や球数だけちょっと調整する

感想

VFXGraphめっちゃ面白い. パーティクル制作の幅が広がる.
VFXのチュートリアル上げてくれる人も希少ですごくありがたい...!
実際に手を動かしながら構成要素を分解していくと納得感がある.

Discussion