この記事では、After effectsで衝撃波テクスチャの作り方を紹介します。
対象読者
・エフェクトデザイナー
・AEでテクスチャを作っている、作りたい方
・AEで衝撃波の作り方が知りたい方
環境
・After effects（日本語版）
・Unity 6000.0.23f1
Youtube版もありますのでぜひ！
動画と記事、好きな方でご覧ください！！
↓Part1
↓Part2
今回の作成物
今回の作成物
1.ベース作成
1-1：コンポジション作成
まずは、コンポジションを作成していきます。
コンポジション名：shock01
サイズ：1024×1024
デュレーション：0:00:00:04
背景色：黒色
フレームレートは何でも良いですが、とりあえず30にしておきます。
デュレーションが4fである理由は後ほど説明します。
1-2：ベースの形を作成
次は、衝撃波の大まかな形を作成していきます。
まず、平面レイヤーを作成します。
サイズ：1024×1024
色：黒色
その後、レイヤー名を「base」にします。
次は、平面レイヤーに塗りを適用します。
エフェクトコントロールウィンドウ上で右クリック、描画→塗りで選択してください。
カラー：白色 にします。
その後、平面レイヤー(base) のサイズを変更します。
baseレイヤーを選択後、Sキーを押して
スケール：25.0% にします。
サイズ調整した平面レイヤーにワープを適用して形を歪ませます。
ディストーション→ワープをクリックします。
ワープスタイル：円弧
ワープ軸：水平
ベンド：50
垂直ディストーション：26
今回は上記の数値で進めます。皆さんがアレンジする際は色々変えてみてください。
現時点で上画像のような見た目になっていたら問題ないです。
これでベースの形の作成は完成です。
1-3：プリコンポーズ
次は、プリコンポーズしていくのですがその前に平面レイヤーを追加します。
プロジェクトウィンドウに ブラック平面1 というものがあると思うのでそれをタイムラインウィンドウにドラック＆ドロップします。
追加した平面レイヤーの名前は「gradation」 にします。←後ほど使います。
base、gradationの両方を選択して Shift+Ctrl+C(Windows) Command + Shift + C(Mac)でプリコンポーズします。
一応、レイヤー上で右クリックでもプリコンポーズが可能です。
名前は、「Shock01_P01」
すべての属性を新規コンポジションに移動 を選択してOKをクリックします。
2.衝撃波作り込み
ここからベースの形を衝撃波に近づけます。
2-1：波形ワープで大まかなギザギザを作成
ディストーションから波形ワープを適用します。
波形の種類：サイン
波形の高さ：42
波形の幅：23
方向：90
今回はこの数値で作成します。
2-2：タービュレントディスプレイスで細かいギザギザを作成
タービュレントディスプレイスで細かいギザギザをつけて馴染ませます。
ディストーションからタービュレントディスプレイスを適用します。
変形：垂直方向
量：326
サイズ：70
複雑度：10
2-3： ワープで形をしぼる
ワープで外側を広げて、内側を狭めて衝撃波の形により近づけていきます。
ワープスタイル：でこぼこ
ワープ軸：水平
ベンド：70
垂直ディストーション：100
2-4：ワープで形をしぼる
現状、白い部分がはみ出しているのでトランスフォームでサイズ調整します。
ディストーションからトランスフォームを適用します。
スケール：70
回転：90
位置(X軸のみ)：692
2-5：さらに形を調整したい場合は…
現在の形でも問題ないですがここからさらに形を調整したい場合は、
波形ワープを使用して形を調整していきます。
波形の種類：三角形
波形の高さ：113
波形の幅：132
フェーズ：-1×-330
※今回適用した波形ワープは、タービュレントディスプレイスとワープの間に配置してください。
この調整は無くても良いですが、こっちの形のほうが良いのでこのまま進めて行きます。
2-6：CC Light Burstでブラーをかける
現在の状態でも大丈夫ですが、見た目がガタガタしすぎているので馴染ませます。
描画→CC light burstを適用します。
Center：832(X軸のみ)
Ray Length：30（好みで大丈夫です。)
2-7：VC Color Vibranceで黒抜き
VC Color Vibranceで黒抜きしていきます。
これはプラグイン(無料）なのでインストールしてきてください
Color：白色
Matte alpha：On
下画像のように黒い部分を消せたと思います。
ちなみに黒抜きできてるかどうかは、下画像の赤丸部分のアイコンをクリックすれば分かります。
3.衝撃波を削る
3-1：ベースの形にグラデーションをかける
最初のコンポジション(Shock_P01)に戻って平面レイヤー(gradation)にグラデーションを付与します。
描画→グラデーションで付与してください。
次に、平面レイヤー(gradation)のトラックマットの部分をクリックして平面レイヤー（base)を選択します。
上画像のような見た目になったと思います。
トラックマットに二種類のアイコンがあります。今回の場合はどちらでも大丈夫ですが、２つ目の太陽のようなアイコンにしておきます。
グラデーションの数値を変更します。
グラデーションの開始：237(Y軸のみ)
※衝撃波を内側から外側から削っていくような見た目にします。黒い部分から段々削れていくので内側部分を黒く、外側部分を白くします。
今回は、上部分が内側、下部分が外側になるので下画像の見た目で問題ありません。
3-2：しきい値で削る
コンポジション「shock01」に戻ります。
レイヤー(Shock01_P01)にしきい値（スタイライズ→しきい値)を付与します。
トランスフォームとCC Light burstの間に配置してください。
下画像のようになったと思います。
しきい値の値を0に近づけると元の形になり、数値を上げるほど削れていくのが分かると思います。
これを利用して削れていくアニメーションを作っていきます。
最終的に2×2の連番テクスチャを作成するので、4枚の画像が必要になります。
最初にデュレーションを4fにした理由がこれになります。
※4fにしなくても作成可能ですが、
・タイムラインの移動時に操作しやすい。（タイムラインのロックが可能ではあるが…
・4f以上で出力するといらない枚数が出力される。
・数値を変更する度に、レンダリングが走って重くなることがあるので必要な分だけにする。
1f目：0
2f目：40
3f目：80
4f目：128
上に記載している通りのフレーム位置にしきい値の数値を入力してアニメーションキーを打ち込んでください。
以下のようになったらOKです。
3-3：書き出し
続いて作成した衝撃波を4枚書き出します。
ファイル→書き出し→レンダーキューに追加 をクリックします。
すると、レンダーキューウィンドウに飛ぶので出力設定を行います。
出力モジュールをクリック
形式：PNG
チャンネル：RGB+アルファ
その後、出力先 をクリックして出力したいフォルダを選択します。
ファイル名：shock01_[#####]
サブフォルダ名：shock01
保存をクリック後、レンダリングボタンをクリックして書き出します。
出力したフォルダの中を確認して、段々削れていく画像が四枚入っていたらOKです。
3-4：連番画像作成
出力した四枚の画像を使用して連番画像を作成します。
四枚の画像をAEにインポートします。
次に、コンポジションを作成します。
名前は「shock01_atlas」にします。
設定内容は以下になります。
インポートした画像を先ほど作成したコンポジション(shock01_atlas)にドラック＆ドロップします。
その後、画像を全選択してSキーを押します。スケールの値が出てくると思うので100から50に変更します。
次に、もう一度全選択してPキーを押します。位置の数値が出てくると思うので
以下のように数値を変更します。
現在の状態が以下と同じ見た目だったらOKです。
3-5：連番画像の出力
最後に画像を書き出します。
コンポジション→フレームを保存→ファイルをクリックします。
するとレンダーキューに飛ばされると思うので設定していきます。
出力モジュールのところをクリックします。
形式：PNG
チャンネル：RGB+アルファ
次は、出力先部分をクリックします。
名前は「t_shock_01」にします。
出力先を決めたら保存をクリックして、レンダーキューウィンドウにあるレンダリングボタンをクリックしたら
書き出し完了です。
3-6：結果
以下のようになったら完成です。
本来は黒い部分を無くしていますが、記事の背景の関係で見えなくなってしまうので
黒い部分をありにしています。
4.Unityでエフェクト作成
4-1：テクスチャインポート～マテリアル作成 Unityバージョン：6000.0.23f1
以降は、作成した衝撃波テクスチャを使用したエフェクトの作成を行っていきます。
今回使用するシェーダーは、NovaShaderになります。
インストール方法については以下の兄魔もここさんのNotion記事、Youtubeを参考にしてください。
※今回の記事で使用しているバージョンは6000.0.23f1ですが、合わせなくても問題ないです。
https://rightful-anger-716.notion.site/Nova-172a1a217679809ab196f5f4c83816ce
まずは、テクスチャをインポートしていきます。
プロジェクトウィンドウにドラック＆ドロップでテクスチャをunityに入れましょう。
今回、マテリアルやテクスチャでフォルダ分けしています。
やらなくても問題ありません。
ちなみにテクスチャをクリック後、Inspectorウィンドウを見てみるとテクスチャの詳細が確認できます。
Alpha Is Transparencyにチェックした後、applyをクリックすると黒抜きした状態が確認できます。
次は、マテリアル作成です。
Projectウィンドウ上で右クリック→Create→Materialで作成します。
名前は「m_shock01_ab」とします。
マテリアル作成後はShaderを変更します。
作成したマテリアルを選択後、Inspectorウィンドウに詳細が表示されるので上部のShaderの右隣にあるトグルから変更します。
Nova→Particles→UberUnlitで変更してください。
シェーダーを変更後、テクスチャを適用します。
Base mapに作成したテクスチャをドラック＆ドロップで適用します。
4-2：パーティクルシステム作成
Hierarchyウィンドウ上で右クリックして
Effects→Particle Systemで作成します。名前は「shock01」にします。
次にパーティクルシステムにマテリアルを適用します。
ドラッグ＆ドロップで適用してください。
※以降パーティクルシステムはPSと略します
作成したPSのTransformはリセットしておいてください。
4-3：パーティクルシステム編集
以下、基本モジュールの変更部分です。
Emissionモジュールの設定
Shapeモジュールの設定
Limit Velocity over Lifetimeモジュールの設定
Color over Lifetimeモジュールの設定
↑もう片方のグラデーションも同じ
Texture Sheet Animationモジュールの設定
Rendererモジュールの設定
再生してみて以下のようになっていると大丈夫です。
ちなみに背景が灰色なのは、
下画像のようにSceneウィンドウ上部にある赤で囲んだアイコンの ▼ をクリックするといくつかチェックする部分が出てくるのでSkyboxのチェックを外すと単色背景になります。
ただ、上記設定はシーンウィンドウでしか反映されません。gameウィンドウも単色の背景にしたい場合は、
HierarchyウィンドウにあるMain CameraオブジェクトをクリックするとInspectorウィンドウに詳細が表示されます。
その中にある、Enviromentの欄のBackgroundの右隣の部分をクリックすると色変更ができます。
4-4：シェーダー設定
ここからは、シェーダーの設定をしていきます。
Render Settingsは以下のようになってます。
変更していないのでデフォルトの状態です。
Emissionは以下のように設定してます。
変更しているのは、emissionだけなので以上になります。
5.完成、確認
以上で完成となります。
再生してみて以下のようになっていたら成功です。
AEのみで良い感じに衝撃波を削ることができたので紹介させていただきました。
今回説明した方法より良い作り方もあるかもしれないので色々試してみてください。
最後まで見ていただきありがとうございました！
