moyasiエフェクト館

主にエフェクト関係の記事を上げていこうかと思います。


エフェクトに関係する記事上げてきます
エフェクト関係の記事の内容は緩く募集中
自分がわかる範囲であれば書いていこうかなと。

【Effekseer】2D風斬撃エフェクトを作ろう

f:id:tktknkyo:20180519135356p:plain

今回はちょっとした作例を、比較的にシンプルな斬撃エフェクトです。

f:id:tktknkyo:20180519135931g:plain

全体の動きとしてはこんな感じです。

 

f:id:tktknkyo:20180519140048p:plain

 

剣線メイン

最初の斜めのライン

剣線グロウ

最初の斜めのラインの、水色部分

衝撃纏め

衝撃部分を纏めるノード、発生タイミングなどの制御で、描画自体はしない

線 メイン

外に広がる細長いライン

線 グロウ

外に広がるラインの、水色部分

線 中心 メイン

中心にある、細長いライン

線 中心 グロウ

中心にある、細長いラインの、水色部分

歪み

加算合成での歪み

グロウ

うっすら背景にある、水色の部分

 

今回のテクスチャは、

f:id:tktknkyo:20180519140836p:plainf:id:tktknkyo:20180519140841p:plain

殆ど左側、歪みノードのみ、右側使ってます。

 

剣線メイン

f:id:tktknkyo:20180519151300p:plain

メインとなる斬撃部分。

f:id:tktknkyo:20180519145231g:plain

 

生存時間

30F

ここで生存フレーム数を調整します。

 

位置(イージング)

X7→X-5

高速2、低速3

今回は、X軸に動かして、剣線部分の動きを作ります。

 

生成方法(円、生成角度に影響にチェックを入れる)

開始角度60

生成位置種類、正順

ここで角度を調整します、開始角度が60、終了角度が360なので60~360の間になるのですが

生成位置種類を正順にすると、開始角度から順番に生成されます、発生数が1の場合、最初の開始角度からしか生成されません。

 

拡大(イージング)

X2,Y0.25→X3,Y0.1

高速2、低速3

段々と細長くなる動きにします。

 

描画

Z軸回転ビルボード

 

描画共通

ブレンド:加算

フェードイン:5

フェードアウト:10

加算合成にして、フェードイン、フェードアウトを設定

 

解りにくい場合は画像を参考にしてください。

f:id:tktknkyo:20180519142614p:plain

 

剣線グロウ

f:id:tktknkyo:20180519151328p:plain

f:id:tktknkyo:20180519145348g:plain

剣線メインと合わせて表示してます

共通

生存時間、30

メインと同じ生存時間にします

 

拡大

X2、Y1.25

剣線メインより、ある程度大きめにします

 

描画

配置方法:Z軸回転ビルボード

全体色

R0,G255,B255,A255

配置方法は、剣線メインと同じに、色は水色に設定します

 

描画共通

ブレンド:加算

フェードイン:5

フェードアウト:10

ここは剣線メインと同じに。

f:id:tktknkyo:20180519144921p:plain

 

衝撃纏め

衝撃部分の、発生タイミングの調整のみ

共通の、生成開始時間を8に

 

線 メイン

f:id:tktknkyo:20180519154002p:plain

f:id:tktknkyo:20180519154739g:plain

外側に広がるラインです。

 

共通

生成数:100

生存時間:5~25

生成時間:0.025

生成開始時間:-1

発生数を100に、生成時間には、大きめな振幅を

 

位置(イージング)

Y0→1.5~4.5

高速2、低速3

Y軸方向にラインを動かします。

 

生成方法(球)

生成角度に影響にチェックを入れる

X軸角度:0~360

Y軸角度:0~360

角度をランダムになるように設定する。

 

拡大(イージング)

X0.15~0.35→0.05~0.15

Y0.8~1.2→1.5~2.5

高速2、低速3

細長くなるように設定

 

描画

配置方法;Y軸固定

配置方法をY軸固定に

 

描画共通

ブレンド:加算

フェードイン:5

フェードアウト:10

f:id:tktknkyo:20180519155055p:plain

 

線 グロウ

f:id:tktknkyo:20180519160434p:plain

f:id:tktknkyo:20180519160448g:plain

線メインと合わせて使うようのノードです。

 

共通

親削除時削除にチェック

生存時間:25

親である線 メインが消えた時に消えるように

 

拡大

X1.5

Y1.25

多少大きめに設定

 

描画

配置方法:Y軸固定

全体色

R0,G255,B255,A255

色を水色に

 

描画共通

ブレンド:加算

フェードイン:5

フェードアウト:10

f:id:tktknkyo:20180519160914p:plain

 

 

線 中心 メイン

f:id:tktknkyo:20180519161048p:plain

f:id:tktknkyo:20180519161059g:plain

中心に配置する衝撃部分

 

共通

生成数:25

生存時間:5~25

生成時間:0.025

生成開始時間:-1

線 メインを流用、生成数だけ1/4に(中心部分の方が重なりやすいので発生数は少なめに)

 

生成方法(球)

生成角度に影響にチェックを入れる

X軸角度:0~360

Y軸角度:0~360

ランダムな方向に向くように

 

拡大(イージング)

X:0.075~0.175→0.025~0.075

Y:0.8~1.2→2~4

高速2、低速3

細長くなっていくように

 

描画

配置方法:Y軸固定

配置方法は線 メインと同じくY軸固定に

 

描画共通

ブレンド:加算

フェードイン:5

フェードアウト:10

加算合成にして、フェードイン、フェードアウト設定

f:id:tktknkyo:20180519161649p:plain

 

線 中心 グロウ

f:id:tktknkyo:20180519162037p:plain

f:id:tktknkyo:20180519162053g:plain

線 中心 メインのノードと合わせて使います

 

共通

親削除時削除にチェック

生存時間:25

線 中心 メインが消えたときに同時に消えるように

 

拡大

X:1.5

Y:1.25

線 中心 メインより大きめに

 

描画

配置方法:Y軸固定

全体色

R0,G255,B255.A255

色を水色に

 

描画共通

ブレンド:加算

フェードイン:5

フェードアウト:10

f:id:tktknkyo:20180519162454p:plain

 

歪み

f:id:tktknkyo:20180519162653p:plain

f:id:tktknkyo:20180519162729g:plain

※歪みは、単体では見えないので、このGIFでは歪みのチェックを外して表示しています

歪みってそもそも何?という方はこちらをどうぞ

tktknkyo.hatenadiary.jp

 

共通

生成数:3

生存時間:20~40

生成時間0.1

生成開始時間:-1

ランダム性を出すため、一度に複数発生させて、生存時間は長めで振幅も大きめに設定します

 

回転(角度・速度・加速度)

角度Z:0~360

Z軸の角度をランダムに

 

拡大(単一イージング)

5→12.5~17.5

高速2、低速3

ほかの要素を、全部覆うくらいの大きさになるように

 

描画

配置鳳凰:Z軸回転ビルボード

全体色:イージング

R255,G255,B255,A255→R255,G255,B255,A0

段々透明にしていく

 

描画共通

ブレンド:加算

フェードイン:10

フェードアウト:10

歪みにチェックを入れる

歪み強度:0.2

 

歪みがあると、この位見栄えが変わってきます、ただ結構調整面倒な部分もあります

f:id:tktknkyo:20180519164344p:plainf:id:tktknkyo:20180519164356p:plain

f:id:tktknkyo:20180519171108p:plain

 

グロウ

f:id:tktknkyo:20180519171155p:plain

f:id:tktknkyo:20180519171209g:plain

背面に付けるグロウ

 

共通

生存時間:30

生存時間はやや長めに

 

拡大(単一イージング)

5→10

高速2,低速3

全体的に大きめに

 

描画

全体色

R0,G255,B255,A128

水色で半透明に

 

描画共通

ブレンド:加算

フェードイン:10

フェードアウト:20

f:id:tktknkyo:20180519171803p:plain

 

これで完成です。

f:id:tktknkyo:20180519172029g:plain

 

また、色合いにランダム性もたせたりすると、結構綺麗な色にもなったりします

f:id:tktknkyo:20180519172322g:plain

 

具体的には

線 グロウ

線 中心 グロウ

この二つの色を

f:id:tktknkyo:20180519172446p:plain

このように設定して

 

グロウのノードはR0G64B255A128にします(Gを255から64に)

 

f:id:tktknkyo:20180519172647p:plain

連番画像に出力するとこんな感じです。