この記事では、AEとUnityで以下のようなストリークテクスチャ、簡単な衝撃波エフェクトの作り方を紹介します。
対象読者
・エフェクトデザイナー
・AEでテクスチャを作っている、作りたい方
環境
・After effects25.5.0（日本語版）
・Unity 6000.0.023f1
AEはおそらく何でも大丈夫で、UnityはNova Shaderを使えれば何でも大丈夫です。
コンポジション設定は、下画像を参考にしてください。
1.テクスチャ作成
1.平面レイヤー(Solid Layer)
まずは、平面レイヤーを作成します。Ctrl+Yで平面レイヤーを設定ウィンドウを開いてください。
名前：Streak01
幅1024×高さ1024
カラー：黒
デュレーション：0:00:00:01
設定したらOKをクリックします。
その後、作成した平面レイヤーをタイムラインウィンドウにドラッグ＆ドロップで追加して「Streak01」と名付けておきます。
2.塗り(Fill)
次は、平面レイヤーの色を変更します。
エフェクトコントロールウィンドウ上で右クリック
描画（Generate）→塗り(Fill) で付与します。
色を白に変更してください。
3.トランスフォーム1(Transform)
次は、白い部分が大きすぎるので小さくしていきます。
ディストーション(Distort)→トランスフォーム(Transform)を付与してください。
スケールの高さを30
スケールの幅を13
にして細長くします。
4.ワープ1(Warp)
次は、ワープを使ってストリークの基本的な形状を作成します。
ディストーション(Distort)→ワープ(Warp)を付与してください。
数値調整をする前に、ワープ(Warp)をトランスフォーム(Transfotm)の上に配置します。
ワープスタイル、ワープ軸、ベンドはデフォルトのままで
垂直ディストーションを20にして少し絞ります。
ちなみに、トランスフォームとワープを入れ替えた理由ですが、
トランスフォームの前と後で、歪み方が変わるからです。
左：ワープ入れ替え前 右：ワープ入れ替え後
トランスフォームの細長い状態からだと綺麗に歪まず、正方形の状態だと綺麗に歪んでくれる。
綺麗に歪んだものをトランスフォームでサイズ調整という流れ。
さらにトランスフォームを先に付与した理由は、サイズを小さくしてどう歪ませているか見やすくする為です。
塗り→ワープだと画面全体が白一色だから分かりづらい…
5.波形ワープ1(Wave Warp)
基本的な形状は完成したので、ここから波形ワープを使ってストリークを作り込んでいきます。
ディストーション(Distort)→波形ワープ(Wave Warp)を付与してください
波形の種類：半円形
波形の高さ：102
波形の幅：90 ※数値が大きいほど波の数が少なく、数値が小さいほど波の数が多くなる。
方向：-90
フェーズ：-2*-230 ※波の位置をずらすことができる
これでストリークテクスチャのメインのトゲを作成できました。
6.波形ワープ2(Wave Warp)
メインのトゲを作成できたので、次はもう一度波形ワープを付与して細かいトゲを作成していきます。
ディストーション(Distort)→波形ワープ(Wave Warp)を付与して
波形の種類：半円形
波形の高さ：168
波形の幅：52
方向：-90
フェーズ -1×-43
こんな感じで衝撃波の方向性を決める中央の大きなトゲと細かいトゲによるランダム感を作成することができました。
※個人的には一回目の波形ワープでトゲの量は少ないけどサイズは大きい、二回目の波形ワープでサイズは小さいけどトゲの量は多いという考え方で作ると経験上、良い形になりやすいです。
ただ、この考え方で作ることが絶対に正しいわけではありません、実際に一回目の波形ワープの高さの数値の方が少ないです。
なので、基本は基本としてその都度調整するという作り方が良いと思います。
7.波形ワープ3(Wave Warp)
この状態でも結構良いんですが、下の丸くなっている部分がカッコ悪いのでさらに波形ワープを追加して馴染ませていきます。
ディストーション(Distort)→波形ワープ(Wave Warp)で付与
波形の種類：ノイズ(滑らか)
波形の高さ：310
波形の幅：50
フェーズ：-3×-20
こんな感じで馴染ませができました。
8.ワープ2
次は、ワープで内側を縮めていきます。
ディストーション(Distort)→ワープ(Warp)付与して
ベンドを0
垂直ディストーションを-75にします
かなり衝撃波っぽい形になってきたと思います。
9.トランスフォーム2
次は、トランスフォームで位置、回転、サイズを調整していきます。
ディストーション(Distort)→トランスフォーム(Transform)を付与してください。
まず、回転を-90 にしてテクスチャの外側を左に向けます。
次は、少し右に寄りすぎているのでX軸の位置を：433にして中央に移動させます。
最後に、少し小さいのでスケールを：110にして大きくします。
10.CC Light burst
最後にCC Light Burst 2.5で、ぱっきり感を馴染ませていきます。
描画→CC Light Burst 2.5を付与してください。
まずはRay Lengthで、どれだけ広げるかを調整します。今回は30にします。
次にCenterを調整して、どこを中心に広げるかを決めます。
X軸に994を入力します。
このブラーは、無くてもある程度問題ありませんが、紹介させていただきました。
11.書き出し
次は、テクスチャ書き出しを行います。
コンポジションタブからフレーム保存、ファイルをクリックしてください。
するとレンダーキューに飛ぶので、出力設定をしていきます。
出力モジュールをクリックして
形式をPNG、チャンネルをRGB+アルファにしてOKをクリックします。
次は、出力先をクリックして保存先とテクスチャ名を決めます。
保存場所は皆さんの好きなところで、名前を「T_streak_01」にして保存をクリックします。
最後にレンダリングボタンをクリックすることで出力完了です。
設定した保存場所にテクスチャがあったら成功です。
テクスチャ完成
これでテクスチャが完成しました。
以降は、簡単なエフェクト作成とストリークテクスチャに関しての補足になります。
エフェクト作成は必要ないという方は、補足を読んでいただいてOKです！
2.エフェクト作成
テクスチャが出力できたのでUnityでエフェクトを作成します。
今回もNova shaderを使うので用意しておいてください。
インストール方法については以下の兄魔もここさんのNotion記事、Youtubeを参考にしてください。
https://rightful-anger-716.notion.site/Nova-172a1a217679809ab196f5f4c83816ce
2-1.テクスチャインポート
まずは、書き出したテクスチャをUnityにインポートします。
インポートする前に、素材ごとにフォルダ分けしておくと便利です。
プロジェクトウィンドウにドラック＆ドロップでインポートしてください。
テクスチャをクリックすると、Inspector windowでテクスチャの詳細が確認できます。
Alpha is Transparencyにチェックを入れてApplyをクリックするとアルファも反映された見た目になるのでやっておくと良いと思います。
左：Alpha is Transparency チェック前 右：Alpha is Transparency チェック後
2-2.マテリアル作成
次は、マテリアルを作成します。
プロジェクトウィンドウ上で右クリック
CreateからMaterialをクリックして作成
名前を「M_Streak_01」にします。
次に、このマテリアルでNova Shaderを使えるようにしたいので変更していきます。
マテリアルを選択した状態でInspectorウィンドウの上部にあるShaderと書かれた部分をクリックします。
すると選択項目が出てくるので、Nova →Particles→Uber UnlitにしてNova shaderに変更します。
できたら、Basemapにストリークテクスチャをドラック＆ドロップで適用してください。
2-3.パーティクルシステム作成＆マテリアル付与
次は、パーティクルシステムを作成してマテリアルを付与します。
Hierarchyウィンドウで右クリック
EffectsからParticle systemをクリックします。
名前を「Ef_Streak_01」にしてください。
もしこの時に、Transformに余計な数値が入っていたらリセットしてください。
方法は、Inspectorウィンドウの上にあるTransformの３つの点をクリックしてResetでできます
続いて、パーティクルにマテリアルを適用します。
ドラッグ＆ドロップで適用してください
エフェクト再生してみると、現在こんな感じになっていると思います。
これでエフェクトを作成する準備が整いました。
2-4.背景を暗くする
エフェクトを作成する前に背景を暗くしてエフェクトが見えやすくしたいと思います。
ヒエラルキーウィンドウにある、Directional Lightを選択してRotationのXに190を入力します。
ここで注意です。
暗い背景でエフェクトを発光させるとかっこよく見えがちですがそれに頼りすぎないようにしましょう。
実際のゲームでもずっと暗いことは無いので明るくてもエフェクトがしっかり見えるように作成することが大事です。
2-5.パーティクルシステム編集
では、パーティクルシステムを編集してエフェクトを作っていきます。
メインモジュール その1
まずは、メインモジュールのLoopingのチェックを外してください。
Emission
次は、Emissionモジュールでパーティクルを出す数を設定します。
今回は、5ぐらいにしておきます。
Shape その1
次は、Shapeモジュールでどんな範囲でパーティクルを出すかを決めます。
Shapeモジュールを編集する前に、Sceneウィンドウの上の球体アイコンをクリックして
現在のパーティクルの出現範囲がどうなっているか表示します。
Shapeの設定通りConeの形になっていることが分かります。
今回は、中心から放射状に飛んでほしいのでShapeのConeからSphereにします。
確認すると、全方向に飛ぶようになりました。
Renderer
ただ、以下の画像のように進行方向にエフェクトが向いていません。
なので、Rendererモジュールを開いてビルボードからストレッチビルボードに変更します
再生してみると、ちゃんと進行方向に向くようになりました。
メインモジュール その2
次は、もう一度メインモジュールに行って 寿命、速さ、サイズを設定します。
Start Lifetime 0.15、0.3
Random between to constantsにして 0.15秒から0.3秒の間で消えるようにします。
Start Speed 15、30
15から30にして速く飛ばします。
Start Size 3、4
サイズが小さいのでStart Sizeでサイズを大きくします。3と4を入力してランダム感を出します。
Duration 0.1
今回のエフェクトは最初の一回しか出さないのでDurationが5秒も入りません。なので0.1秒に変更します。
メインモジュールを編集していて気付くと思いますが、
エフェクトはランダム感、自然感が大事なので基本Random between to constantswを入れています。
Shape その2
再生した時に、パーティクル同士が重なっているのでもう一度、Shapeモジュールを編集します。
まずは、Radiusでshapeのサイズを大きくします。大体７ぐらいにします。
次は、Radius Thicknessを1から0にしてパーティクルの発生箇所を Shapeのアウトライン部分、一番外側のみに発生させて行きます。
エフェクトの重なりを解消できました。
Limit velocity over Lifetime
次は、Limit Velocity over Lifetimeでブレーキをかけて飛ばしすぎてしまうことを防ぎつつ、動きに緩急を付けます。
まず、speedをRandom between to constantsにして
ブレーキをかけた時に、0.5から1ぐらいのスピードで動くようにします。
続いて、Dampenでどれだけブレーキをかけるかを決めます。今回は、0.15ぐらいにしておきます。
Color over Lifetime
次は、エフェクトが急に消えてしまっているので Color over Lifetimeで段々消えるようにします。
まず、上部分をクリックして、一つ白い矢印を増やします。Locationは60%にします。
次は、上の一番右の矢印のalphaを0にします。 これで中盤から後半にかけて段々消えるようになります。
Size over Lifetime
続いて、Size over Lifetimeで段々細くして消すようにします。正直なくても十分なんですが、こういう消し方をすることもあるので説明します。
まずは、Separate Axisにチェックを入れてX、Y、Zを分けてサイズを調整できるようにします。
次は、Y軸カーブをクリックして調整していきます。
Y軸は、縦の長さなので変わってほしくありません。
下のプリセットの一番右をクリックして、カーブを直線にしてサイズが変わらないようにします。
次は、X軸のカーブ（横幅）を調整します。
一旦、先程と同じく直線にして
カーブの上で右クリックをしてAdd keyでキーを増やします。
増やしたキーの上で右クリックをしてEdit keyをクリック、timeを調整します。 0.6ぐらいにしておきます。
次は、一番右のkeyを右クリックからEdit keyでValueを0.5にします。
ただ、カーブの見た目がおかしくなっていると思うので下画像のような見た目にしてください。
0.5の部分は、0でも問題ありません。
2-6.Nova shader編集
パーティクルシステムの編集が終わったので 最後にNova shaderで色と発光を調整していきます。
EmissionのNoneをクリックして、Allに変更します。 次に、Color TypeをColorにして色を入れていきます。
上画像のような色にしたら、Emissionの欄のIntensityも3にします。
これで簡単な衝撃波エフェクトが完成しました。以下のようになったら成功です。
背景明るいバージョン
そして、背景を明るくして見るとこんな感じになります。めちゃくちゃぼやけて見づらいということはないので問題ないかなと思います。
もし、明るい背景の前において見えづらくなる場合は、こういう円のテクスチャをAlpha blendで置いて上げると背景の明るさの影響を受けにくくなって相対的に見えやすくなります。
この手法は結構使うの使ってみてください。
3.補足
3-1.テクスチャサイズについて
続いて、テクスチャサイズについてです。
今回は1024×1024で作成していますが、実際に使う場合はサイズを下げて使うことをおすすめします。
テクスチャはサイズが大きいほど容量も大きくなり、
数が増えるとゲーム全体の負荷に影響します。
1024×1024 1.3MB
128×128 21.4KB
128×64 10.7KB
このような一枚絵で、そこまでディテールがないテクスチャであれば、サイズを下げても見た目への影響はそこまで大きくありません。
今回のテクスチャであれば、128〜256程度でも問題なく使えると思います。
128×128
128×64
128×64は、テクスチャの比率が変わっているのでParticle Systemの数値が同じでもエフェクトの横幅が大きくなってしまいます。
テクスチャサイズが1/2なので、Start Sizeの横幅にあたる部分を半分にすると元のサイズに戻ります。
↓Start Sizeの横幅にあたる部分を半分の数値にした時の見た目
ちなみに、AE内でのサイズ調整方法は
Ctrl+Kでコンポジション設定を開いてサイズを変更後
Project window内に配置している平面レイヤーのスケールを変更した分だけ調整するという感じです。
1024×1024を128にしたいなら、コンポジションを128に変更後
平面レイヤーのスケールを12.5にします。
まとめ
以上で、ストリークテクスチャの解説は終わりです！
最後まで見ていただきありがとうございました、エフェクト作成に使っていただけると嬉しいです。
今後の記事もよろしくお願いいたします。
