moyasiエフェクト館

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


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

【Effekseer】1種類のテクスチャでエフェクトを作ってみよう

f:id:tktknkyo:20171222074706p:plain

 

エフェクトを新しく始めようとした方に、まず知ってもらいたいと思う部分が個人的には、「どんなテクスチャを使えばどんな描画になるのか」を、知ってもらいたいと。

 

という訳で、汎用的な1種類のテクスチャでエフェクトを作ってみよう、という内容です

f:id:tktknkyo:20171222080052g:plainf:id:tktknkyo:20171222080133p:plain

今回作るのがこちら、右は見えにくいですが、使用したテクスチャです

f:id:tktknkyo:20171222080253g:plainf:id:tktknkyo:20171222080319g:plainf:id:tktknkyo:20171222080342g:plain

f:id:tktknkyo:20171222080407g:plain

今回のエフェクトは、この4つの要素が合わさって出来ています。

 

最初の湾曲しながら、中心に向かう動き

f:id:tktknkyo:20171222080624p:plain

ノード構成はこのようになっています

 

・Angle

f:id:tktknkyo:20171222081017p:plain

このノードは、XYZが360°ランダムになるように設定しています

また、ライン部分のαの制御は、このノードのFカーブにて設定しています

Fカーブは、ほかのノードまで作ってから、フェードイン、フェードアウトが自然になるように設定していきます。

 

・AngleMove

f:id:tktknkyo:20171222081212p:plain

寿命を設定し、その他は回転のみ

これは、XYZそれぞれ-60~60°の間からのランダムな数値になるようにしています

これにより、角度が各方向ランダムにバラけた動きになります。

f:id:tktknkyo:20171222081402g:plain

ちなみに、このノードで回転に動きを入れない場合は、このようになります。

 

・Move

f:id:tktknkyo:20171222081625p:plain

このノードはY軸を、4.5~7.5から0の位置まで持っていく内容になっていて

ライン全体の色も設定しています。

なお、この例ではY軸を動かしていますがX軸でもZ軸でも問題はないです。

 

なぜどの軸でも問題ないのか?というのは

親のAngleにて、XYZそれぞれの角度をランダムにしているのが理由です。

この○軸というのは

親からの影響を受けないようにするとワールド座標

親からの影響を受けるようにするとローカル座標

になります、今回は親の影響を受けるのでローカル座標に

ローカル座標なので、親の向きから見てY軸になり

その親が全方向ランダムなので、ランダムな方向から、中心に向かうことになります

 

・LineColor、LineMain

f:id:tktknkyo:20171222082224p:plain

こちらはLineMainのノードですが、殆ど初期状態です、拡大率と寿命辺を少々いじった程度です。

LineColorは、このノードを複製後、拡大率を0.5にしています。

 

一番親のAngle以外のノードは、描画共通にて、色への影響を「常時」に変えておきます

これにより、この湾曲しているラインに、親のRGBAの情報が入るようになります。

 

 

【Glow】

 

f:id:tktknkyo:20171222080319g:plain

 

f:id:tktknkyo:20171222082622p:plain

いわゆる、Glowです

エフェクトを作るにおいて、何かと便利です

ここでは、色がオレンジから赤っぽい色に変化しながら、小さくなっていきます

 

もう一つのNodeという方も、用途は同じですが

こちらは、最後の爆発部分用なので

寿命が40

生成開始時間が50

拡大は、1→30

これで、爆発のタイミングに合わせて、拡大するような描画になります。

 

【衝撃「ライン」】

f:id:tktknkyo:20171222080342g:plain

・LineNull

f:id:tktknkyo:20171222083118p:plain

このノードにて、飛び散るラインの大体の動きを入れておきます

寿命にブレ幅を大きめにいれ、一気に放出するように生成時間を小さい数値に。

位置は、イージングで動かし

それと、生成方法の、生成角度に影響を与えるようにすると、各方向ランダムに飛ぶようになります。

拡大では、だんだん細くなって消えるようにしたかったので

X軸の終点は0に。

描画では、全体の色を設定。

 

この子ノードの実際に描画しているノードは

配置方法をY軸固定にし、色の影響を、親の影響を常時受けるようにすると、大体出来ています。

f:id:tktknkyo:20171222083837p:plain

この描画のタブは3つのノードとも全て同じです。

上のノードから順番に

f:id:tktknkyo:20171222083931p:plainf:id:tktknkyo:20171222084004p:plain

 

 

 

f:id:tktknkyo:20171222084025p:plainf:id:tktknkyo:20171222084035p:plain

 

f:id:tktknkyo:20171222084054p:plainf:id:tktknkyo:20171222084101p:plain

パラメータは各自こんな感じです

基本的に、細いやつ程、白くすることで中心部分だけが白くなって綺麗に見えます

 

【衝撃「粒子」】

f:id:tktknkyo:20171222080407g:plain

 

この部分は、ラインからの流用なので、具体的にどうやって流用するのかというと

f:id:tktknkyo:20171222084336p:plain

LineNullのノードをコピーすると、子のノード毎コピー出来るので

それを貼り付けます

 

LineNullの、拡大を、単一イージングの0.5から0に変化するようにした後に

子にある三つのノードの、配置方法を、Y軸固定から、ビルボード(Z軸回転ビルボード位でも可)

f:id:tktknkyo:20171222084054p:plain

ただし、子のLiinColorの一つが、XとYで拡大率が違うので同じにします

今回の例では2に。

 

これらの4つの要素を混ぜると

f:id:tktknkyo:20171222080052g:plain

この様な動きになってくれるかと思います。

最初の湾曲部分は、軌跡を使うと結構手軽に表現できるので、ぜひ試してみてください。