こんにちは。かもそばです。

今回は魔法陣と落雷を合わせたエフェクトを作ってみたので、作り方を解説したいと思います。

使用ツール

Unity 2021.2.0a17
Houdini
Substance Designer
Photoshop
AfterEffects
Clip Studio Paint EX

要素01 - 発光

エフェクトの構成要素

こちらの表現は、横長のライン、フレア、オーラ表現の3つで構成されています。

横のライン

フレア

オーラ表現

構成要素01 - 横のライン

横のラインは、以下のようなグレースケールのテクスチャを使用しています。

Particle Systemの3D Start Size を以下のように設定し、横に長くしています。

構成要素02 - フレア

フレアのテクスチャはAfter Effects の Optical Flare という有料プラグインを使用して作成しています。

構成要素03 - 上昇するオーラ表現

オーラ表現

オーラ表現では、オーラテクスチャをUVスクロールさせつつ、マスク用のグレースケールテクスチャと乗算しています。
これらのテクスチャは、Substance Designerで作成しています。

オーラテクスチャ

マスクテクスチャ

オーラ表現のシェーダー

上記の二つのテクスチャは、マテリアル上にて指定しています。

オーラ表現のShaderGraphは以下のようになっています。

マテリアル上ではUVスクロールの情報は設指定せず、Particle System の Custom Dataを使ってUVスクロールをコントロールしています。

UVスクロールを取得するSubGraph

Custom DataにてUVスクロールの値を定義しています。

Custom Vertex StreamsでCustomDataを指定することで、ShaderGraphにて値を取れるようになります。

Custom Vertex Streams のデータを取得するには、UVノードを使用します。

要素02 - 魔法陣

魔法陣表現の構成要素

魔法陣
オーラ

魔法陣

オーラ

構成要素01 - 魔法陣

魔法陣テクスチャの作成 (Clip Studio)

Clip Studioを利用して以下のような魔法陣を作成しました。

Clip Studioを使った魔法陣の書き方は、下記の記事が参考になります。

魔法陣テクスチャの加工 (Substance Designer)

作成した魔法陣はSubstance Designerに取り込み、ディゾルブ情報を含んだテクスチャを作成します。
内側から外側へ向かって魔法陣が出現するような表現にするため、
内側は明るく、外側は暗いようなグラデーションをGチャンネルに格納しています。

魔法陣のシェーダーは以下のようになっています。

光が流れる表現について (ShaderGraph)

魔法陣では、光が流れるような表現を作っていますが、マスクテクスチャのUVスクロールで表現しています。

ビルボードに対してUVスクロールをかけた場合、タテ・ヨコ方向のスクロールになりますが、
Polar Coordinates ノードを使用してUVに極座標変換をかけることで、内側から外側への流れを作ることができます。

魔法陣が光る表現 (Custom Data)

魔法陣が一瞬だけ光りますが、Emissionという数値をCustom Dataにて定義し、
Emissionの値を一瞬だけ持ち上げることで光らせています。

Custom Vertex Streamsは以下のように設定しています。

SubGraphにて、Custom Vertex Streamsの値を取得しています。

CustomDataのEmissionの値をRGB値に乗算することで、光るようになります。

構成要素02 - 上昇するオーラ表現

https://youtu.be/eUG3jvU1W00

オーラ表現は、円柱モデルにオーラテクスチャを貼りつけることで作成しています。

円柱モデル

円柱モデルはHoudiniで作成しています。

オーラテクスチャの作成

オーラテクスチャのひな型となるsbsarを作成し、Unity上でsbsarを使ってオーラテクスチャを作成しています。

SubstanceDesignerのデータはsbsarとしてUnityへ持っていくことにより、
エフェクトの表示を見ながらテクスチャを調整することができるため、調整作業を高速に回すことができてオススメです。

sbsarの作成

Substance in Unity を導入すると、Unity上でsbsarを扱えるようになります。

sbsarの作成

Substance Designerでは Perlin Noiseや Slope Blur　Grayscaleを使ってSubstance Graphを作成し、sbsarとして書き出します。

Substance Designer

ノイズのコントラスト調整には、Slope Blur Grayscale,
ノイズのうねりにはFlow Map Generator, Vector Morph Grayscale や Vector Blur Grayscaleを使用しています。

Flow Map Generatorは高低マップからフローマップを作成するカスタムノードで、以下のリンクからダウンロードできます。

構成要素03 - 地面を這うオーラ表現

地面のオーラ表現では、円盤メッシュにオーラテクスチャを張り付けてUVスクロールさせています。

使用しているテクスチャは以下になります。

Substance Designerで作成したオーラテクスチャ

要素03 - らせん

ParticleSystemの設定

回転しながら上昇する動き

らせんの動きは、Velocity over Lifetimeで設定しています。

Trail

Trailsを設定し、尾を引くようにしています。

出現位置を4等分する

Emissionモジュールの Burst の Count = 4,
ShapeモジュールのRadius Thickness = 0, Mode = Burst Spread, Spread = 0 という設定を行うことで、
円周を4等分した位置からパーティクルが発生してくれます。

要素04 - 玉の出現

らせんが上昇した後、球が出現しています。

4倍スロー再生

エフェクトの構成要素

玉の出現部分は、4つの要素で構成されています。

フレア
散らばる光の粒子
広がるリング
玉

構成要素01 - フレア

使用したテクスチャは以下になります。

After Effects の Optical Flare で作成したフレア

構成要素02 - リング + 散らばる粒

リングの素材は以下を使用しています。

Substance Designerで作成したリング素材

玉や、散らばる粒子では、以下のテクスチャを使用しています。

Substance Designerで作成した玉の素材

要素05 - 玉の落下

電気が残る表現は円盤メッシュに稲妻テクスチャを貼りつけています。

円盤メッシュ

円盤メッシュはHoudini の Labs Disc Generatorを使うと簡単に作れます。

稲妻テクスチャ

使用した稲妻テクスチャは以下になります。

こちらのテクスチャはSubstance Designerで作成しています。
以下のチュートリアルを参考にして作成しました。

リング状の電気表現は、落雷の直前の電気の予兆にも使用しています。

要素06 - インパクト

https://youtu.be/6Z3vr6VgLCs

エフェクトの構成要素

フレア
インパクト表現(手描き)
稲妻アニメーション(手描き)
青い衝撃波
黄色い発光
黒い煙

構成要素01 - フレア(紫)

フレア表現には以下のテクスチャを使用しています。
Substance Designer の Star Burst や Splatter Circularなどで作成できます。

構成要素02 - フレア(黄色)

落雷の瞬間に出る、黄色いフレアでは以下のテクスチャを使用しています。

構成要素03 - インパクト(手描き)

黄色いインパクトは、円錐台モデルにテクスチャシートを貼りつけることで作っています。

モデル

Houdini の Labs Cylinder Generator で円錐台モデルを作成しています。

テクスチャアニメーション

以下のようなフレアアニメーションを手描きして、円錐台メッシュに貼りつけています。

実際には、8フレームのテクスチャアニメーションを1枚のテクスチャシートにまとめています。

構成要素04 - 稲妻アニメーション (手描き)

インパクトの瞬間に落ちる落雷は、手描きしています。
作画に使用したツールは Clip Studio Paint EX です。

以下のようなテクスチャシートを作成し、ParticleSystemにて利用しています。

Clip Studio Paint EXを使ったアニメーションの作成

Clip Studio Paint EXを使ったアニメーションの作成は、以下の動画が参考になります。

吉邉尚希 (ヨツベ) アニメーションメイキング|CLIP STUDIO PAINT

構成要素05 - 青い衝撃波

インパクトの瞬間に、以下のような青い衝撃波を出しています。

この衝撃波はHoudiniのPyroFXで作成しています。

Houdiniにて煙の塊を落下させ、煙の真上に配置したカメラでレンダリングしています。

構成要素06 - 黒い煙

フレアが終わった直後にリング状に広がる黒い煙を入れています。

3Dモデル

こちらは円盤メッシュにて煙テクスチャをUVスクロールさせることで作成しています。
円盤メッシュはHoudiniのLabs Disc Generatorで作れます。

テクスチャ

煙の質感表現には以下のテクスチャを使用しています。

Substance Designerで作成したテクスチャ

また、Perlin Noiseから作成したNormal Mapを使ってUVディストーションさせ、煙がうねるような動きを作っています。

Perlin Noiseから作成したディストーションマップ

ShaderGraph

要素07 - ひび割れ表現

こちらのひび割れ表現は、青く発光するひび割れと黒いひび割れの二つを重ねています。

テクスチャ

ひび割れのカラー情報と、ひび割れのディゾルブ情報を含めたテクスチャを使用しています。

ひび割れの色情報

ひび割れの外側から内側へ削れていくようなディゾルブマップ

ひび割れテクスチャの作成(Substance Designer)

ひび割れテクスチャはSubstance Designerで作成しています。

ひび割れの作成は、以下のチュートリアルを参考にしました。

ひび割れ ShaderGraph

ひび割れ表現のシェーダーは以下のようになっています。

ディゾルブのかかり具合は、Particle SystemのCustom Dataからコントロールできるようにしています。

焦げ

テクスチャは以下のようになっています。

焦げのテクスチャ作成(Substance Designer)

焦げの基本となる形状を作成します。
煙の形状にSlope Blur Grayscaleを利用することで、外側へ伸びる焦げを作ることができます。

別のSubstanceGraphにて、焦げの形状を回転させながら複数回重ね合わせます。

煙テクスチャの作成方法

煙テクスチャの作成方法は、SubstanceDesigner入門の本に載っています。

要素08 - 帯電表現

帯電表現に使用しているテクスチャは以下になります。
こちらはSubstance Designerで作成しています。

以下のチュートリアルを参考にして作成しました。

ツール紹介

Image Sequencer

Image Sequencerを使うと、連番画像からテクスチャシートを作成することができます。
Image SequencerはUnity Technologies社が公開しているVFX Toolに含まれています。

動画

Image Sequencerを利用した連番画像のテクスチャシート化

Input Framesタブにて連番画像を登録します。

Processors タブにて、リサイズ、アルファ抜きなどの処理を行い、Assemble Flipbookで1枚のテクスチャシートにまとめます。

Exportタブにて、各種設定を行いエクスポートをします

Discussion