actionScript書きの日記

アラフォーFlashデベロッパのブログ。actionscriptやobjective-cを経て、現在はUnity、Spine、AfterEffectsがメイン。

UnityのShader Graphでディゾルブエフェクトを作る

Unity 2018から新規実装された(といってもPreviewだけど)ShaderGraphも、だいぶいろいろと情報が出てきた。

ディゾルブエフェクトなのだが、まず参考動画を2つ。


Unity 2018 Shader Graph - Tutorial 05: Dissolve Effect


DISSOLVE using Unity Shader Graph

 

作成方法は微妙に違っているが、SimpleNoiseノードから発生したOutputをPBR MasterのAlphaチャンネルに突っ込む、という基本構造は同じだ。

この2つを元に、外部から設定したテクスチャ画像を表示している3Dオブジェクト(例えばPlaneなど)に対してディゾルブを設定するものを作成してみた。それが以下の画像。

f:id:goodbyegirl1974:20190103182401p:plain

Blendノードで画像を混ぜることで枠を表現したが、これはPBR MasterのEmissionを使用することが可能かもしれない。その方が表現の幅は広がりそうだ。

参考動画 Trapcode Particular


Particle Dance - Trapcode Particular Tutorial

 

いわゆるよく見る典型的な「Particular」なのだが、こういう細かい要素が折り重なる表現はUnityなどではまだまだ難しい。連番書き出しで何とか移植できるものなのかを現在検討中。類似のチュートリアル動画は複数存在するが、内容はこれが一番分かりやすかった。

炎のテクスチャの作成方法

AfterEffectsで炎のテクスチャを作る手順を、備忘録兼ねてまとめておく。

 

白の平面レイヤーを作成し、マスクを掛ける。

マスクは縦長で、境界をぼかすこと。その後マスクの横幅を拡大するようにアニメを作成する。

 

f:id:goodbyegirl1974:20181202172031p:plain

 

 

リニアワイプのエフェクトを上下に掛ける。

下はバッサリ切り、上はぼかしが残るように数値を調整する。

 

f:id:goodbyegirl1974:20181202172146p:plain

ラフエッジと極座標は現時点では無視して構わない。

 

 

ラフエッジを適用し、ぼかし部分を炎の形にする。

f:id:goodbyegirl1974:20181202172257p:plain

 

炎をアニメさせたいなら、この後ラフエッジの「オフセット(乱流)」の値あたりをアニメーションさせるとそれらしくなる。

爆破エフェクト

以下の動画を参考に作成してみた。

 


Aerial Explosion Tutorial Unity Shuriken

 

Unity上のマテリアル設定を「Multiply(Double)」にするのは初見で非常に参考になった。いつも加算とアルファブレンドばかりで、乗算を使用する機会がなかなかなかったので。

残念ながらテクスチャの作成方法に関しては一切の言及がない。こちらは見よう見まねでAfter Effectsで作成したが、煙のテクスチャに関しては前回の記事の動画が参考になった。やっと自分独自のテクスチャが徐々に溜まってきて、こういう動画も参考にできるようになったということか。

参考動画


Particle Effects for Unity 01: Making Looping Smoke Sprites in After Effects

 

1時間22分と長丁場だが、それに見合うだけの濃い中身だ。雲模様の作成方法、特に「CC Vector Blur」の使い方は参考になった。素材の作成方法を開示してくれる動画は本当に貴重。

After Effectsの操作メモ(備忘録)

After Effects でシェイプやマスクの形状を変形する際に、普通にバウンディングボックスをドラッグすると四隅のうちドラッグしたのと対角線上の頂点を基準点として拡縮が行われる。

画像の中心点を基準として拡縮する方法がずっと分からずに悩んでいたんだけど、Shift + Cmd(Macの場合)でドラッグすれば解決。知らなかったのでメモ。