moyasiエフェクト館

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


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

【Effekseer】描画「軌跡」の使い方

Effekseerの描画の一つである軌跡

ちょっと使い方が解りにくい描画なので、その辺の解説をしていこうかなと

今回の記事に限りませんが、ブログに書いていく内容としましては

過去自分が苦戦したりした内容をメインに書いていこうかと思います。

 

【そもそも軌跡で何が出来る?】

基本的には、湾曲orカーブさせた動きを作る場合に使うかと思います

軌跡を使った単純な例がこちら

 

f:id:tktknkyo:20171206154623g:plain

f:id:tktknkyo:20171206154835p:plain

使用テクスチャは、こんなありふれたテクスチャです

 

まず、どういう動きをさせているかというと

上から下に、公転させて螺旋させながら動かしています

 

 

【軌跡で描画させるには】

そもそも、軌跡でややこしい部分としまして

軌跡のノード単体では、何も描画されない事が上げられると思います

Root直下に、軌跡のノードを置いた場合、何も表示されません

とりあえずで軌跡を試そうとしても、そもそも何も表示されないのです

 

軌跡での描画としては、文章で説明する場合は発生地点同士を繋ぎ合わせる

という感じでしょうか

f:id:tktknkyo:20171206155313p:plain

この上のラインでのノード構成はこちら

軌跡で描画させるには、親子階層にする必要があります

これだけでは解りにくいので

軌跡にしてある部分を、スプライトに変更して、尚且つラインを一本にすると

f:id:tktknkyo:20171206155533g:plain

こうなります、カーブしながら粒子が落ちていっているのが解ります

なお、particle単体は一切動いていません

f:id:tktknkyo:20171206155731p:plain

動きとして、この矢印のように動くノードを作り

回転と位置の影響を、生成時のみ受けるようにして

生成数を無限にします

 

こうすることで、矢印のような動きをしながら、1フレーム毎にparticleが生成されまて、上のGIFのようになります

 

で、ここで軌跡って何をするの?という話になると

この連続で発生しているparticle同士を繋ぎます

f:id:tktknkyo:20171206160424p:plain

赤の粒子毎の位置を、軌跡にするとつなぎ合わせてくれて

一つの大きなラインとなります

その位置をつなぎ合わせてくれるので、湾曲したり、カーブした動きを作ることができます

 

【軌跡の制御あれこれ】

軌跡は、こういう湾曲したりする動きをつくりやすい利点はありますが

なんといっても、制御が面倒なのが事実です

なぜなら、軌跡一つのノードでは動きを付けることができない為です

更に、見た目が一本のラインでも発生数が多いのも、制御のしにくさを与えています

f:id:tktknkyo:20171206182040p:plain

この一本のカーブしたライン、この紫の○毎に、個別でparticleが発生しています

この例ですとparticle数が9となります

見た目が一本でも、このように発生数が多くなる=処理が重くなる

無数のラインが飛び散るようなエフェクトを作る際

スプライトより軌跡の方が見た目が綺麗になるからといって

軌跡で作るのは、描画負担からあまり望ましくありません

 

また、particle毎が個別に発生する分制御が大変な部分が他にもあり

f:id:tktknkyo:20171206182735p:plainf:id:tktknkyo:20171206182753p:plain

これは、軌跡のノードのフェードインの比較です

左がフェードイン0、右がフェードイン10

右側は、全体が薄めになってると思いますが、これはライン一本でフェードインではなく

発生ごとの節目毎にフェードイン処理が入ります

この仕様、どういう時に困るかといいますと

f:id:tktknkyo:20171206155731p:plain

例えば、軌跡でこのようなカーブを作りたい場合で

ライン自体が発生し始めの

f:id:tktknkyo:20171206183800p:plain

この部分は透明状態からゆっくり出したいが

f:id:tktknkyo:20171206183838p:plain

ラインの途中のこの部分では色をはっきり出したい場合

この場合、軌跡のノードのフェードインを使うと途中から発生した部分にもフェードインがかかってしまい、場合によってははっきり見えない

(なおこれは、フェードアウトの方もちょっと描画が汚くなりがちです)

 

これを解決するのが、ver1.3辺りから追加された色への影響です

考え方としては、位置への影響と特に変わりはありませんが

軌跡の場合は、軌跡の描画の仕様から相性がいいです

f:id:tktknkyo:20171206184539g:plainf:id:tktknkyo:20171206184607g:plain

この二つのGIFアニメ、左が軌跡のノードのフェードイン、フェードアウトで描画したもの

右が色の影響にて描画したもの

右のほうが、途中の色がクッキリとしていて、フェードアウトも自然にできていると思います

左はフェードアウトの部分が、短くなったのが残ってしまっています

 

で、この色の影響で何をしたのかというと

常に親のRGBαを、この軌跡自体に影響を与えることができるので

このライン一本全体のαを一括で制御する事ができます

このラインに使った色はFカーブでこのように指定しています

f:id:tktknkyo:20171206185412p:plain

最初の10Fでフェードインしつつ

最後の10Fでフェードイン

中間の10F~30F感はα255で、クッキリ出しています

この辺のカーブをどうするかは、そのエフェクトによると思います。

なお、この方法で変える場合の利点として

動いている途中で消したり、途中で途切れる描画も可能という点です

f:id:tktknkyo:20171206185850g:plain

 

軌跡に限らず、この色の影響の効果、ノード全体の色を一括で制御する事が出来るので

表現したい方法によっては便利な場合もあります、ただ普段はそこまで使われないかな?とは

軌跡もそうなのでが、ちょっと凝ったものを作りたいという場合には中々力を発揮するのかなとは。

 

最後に、軌跡は描画の関係上、カーブっぽく見えても、繋ぎ合わせているだけなので

カーブが激しい場合などは、カク付いて見えることがあります

f:id:tktknkyo:20171206190209p:plain

あまり極端過ぎる数値だと、このようになる場合があるので注意が必要です

逆に、かなり緩やかなカーブの場合

f:id:tktknkyo:20171206190327p:plain

この、生成時間を増やしてみるのも一つの手段です

これが高くなるほど、描画は荒くなりますが、発生数自体が少なくなるので、処理が軽くなります

単純に生成時間を1から2に変えると、発生数が半分になる為です。