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

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

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

【UE4】DynamicParameterにて、ノイズテクスチャを使ったフェードアウト

f:id:tktknkyo:20171218022630p:plain

今回は「DynamicParameter」によるフェードアウト

【UE4】Dynamic Parameterを使ったフェードアウト - moyasiエフェクト館

DynamicParameter」に関することは、こちらも参考にしてみてください。

 

今回は「DynamicParameter」と、ノイズテクスチャを合わせたフェードアウトに関して。

 

DynamicParameter」でどういう処理をするか

今回はノイズテクスチャの、模様に沿ってちぎれて消える用なフェードアウトを作りたいと思います。

この方法、手軽で見栄えが綺麗になるのでオススメです。

 

f:id:tktknkyo:20171218023225p:plain

まずはここの部分の「DynamicParameter」を、マテリアルエディタ上で確認しやすくするために、定数ノードに差し替えて、それぞれの変化を確認します。

f:id:tktknkyo:20171218023505p:plain

f:id:tktknkyo:20171218023715p:plain

f:id:tktknkyo:20171218023742p:plain

上から順番に、1,3,5で設定した例です

この時点で、ちぎれて消える表現にはなってきていると思います。

f:id:tktknkyo:20171218024758p:plain

また0乗は1になる性質上、元のノイズテクスチャに限らず真っ白になります。(ただしこの例ではClampで最大0.95にしてあるので、厳密には少しだけ灰色です)

 

つまり、この「Power」のノードのExpのピンに「DynamicParameter」を繋げて

カスケード上で0から数値を上げていけば、契れて消えていく表現にすることが可能です。

 

 

f:id:tktknkyo:20171218025900p:plain

このノイズでのフェードアウト部分を作っても、シームレスなテクスチャの場合、そのままでは使いにくいので、そのノイズから切り取るためのテクスチャと「Multiply」で乗算すると、その形に切り抜かれます

 

元から、形を切り取ったテクスチャを使えば良いのでは?と思われるかもしれませんが

分けるのには利点があります。

f:id:tktknkyo:20171218030338p:plain

この様なタイリング数を変えることで、模様を細かくしたり

 

f:id:tktknkyo:20171218030500p:plain

この様なUV座標を動かして歪みを適用してみたり

 

f:id:tktknkyo:20171218030613p:plain

この様なUV座標をスクロールさせてみたりができます

Panner」ノードは、UVスクロールさせるなどの動きができるノードで

上二つであれば、加工したテクスチャそのまま持ってくることも可能ではありますが

スクロールさせる場合には、テクスチャをそのまま持ってくるだけでは、再現できません。

f:id:tktknkyo:20171218030822p:plain

乗算したこの形のテクスチャを作って、それのUVを動かしてしまえば
この周りを切り取っている場所毎移動してしまい

f:id:tktknkyo:20171218030934p:plain

この様な結果になってしまいます。

 

f:id:tktknkyo:20171218031418p:plain

またこの囲った二つの「TextureSample」ノードは

赤枠がノイズテクスチャ

黄色枠が切り取るテクスチャ

なので、パラメータ化すれば、違う模様で消えたり、違う形で消える差分をマテリアルインスタンスで作ることもできます。

当然、上の例で出したようにノイズのUVを歪ませる処理や、UVスクロール処理を入れたり、それらのテクスチャや定数ノードをパラメータ化して

そちらを動かせるようにしてみても、表現が広がると思います。

 

 

【UE4】UE4によるパーティクルの歪み

f:id:tktknkyo:20171217083246p:plain

今回はUE4での、パーティクル自体の歪みについての記事となります。

歪みというのは、X軸とY軸を動かす事で、屈折の原理と似たようなものかなと。

 

歪みを使う利点としてテクスチャそのものを変えるような処理であるために、同じテクスチャでも、差分をつくりやすくなるなどの利点があります。

 

歪みを使うには、マテリアルの「TextureSample」のUVの入力ピンに、歪み用のノードを接続します。

f:id:tktknkyo:20171217083804p:plain

ただし、そのまま繋いでもうまく表示してくれません、理由はUVは座標のことであり、テクスチャ(2D)なので、X軸とY軸の2つのチャンネルの情報なのに

テクスチャそのまま繋いでいるので、3チャンネル(RGB)の情報を入れているからです。

間に「componentMask」というノードを挟むと、ちゃんと表示されるようになります。

f:id:tktknkyo:20171217084206p:plain

このノードの役割は、チャンネル数を削減するノードであり

ノード名の横の()内に、削減して使うチャンネルを表示します

この画像の例の場合、テクスチャそのままから持ってきた3チャンネル(RGB)の情報を、2チャンネル(RG)に変えてくれます。

このノードはこのような役割の他に、RとGとBチャンネルにそれぞれ別のグレースケールの情報を入れておき、個別に取り出すこともできます。

f:id:tktknkyo:20171217084928p:plain

ただ「TextureSample」のノードには、この用に元々個別に出力するピンがあります。

なのでこのノードから、ComponentMaskにて1チャンネルの情報を取り出すことは不要になるのですが

f:id:tktknkyo:20171217084735p:plain

この様な、ほかのノードで加工した後に、取り出したい場合には有用です、UE4でのマテリアルエディタで色々加工したい場合には、所々で使う機会はあると思います。

f:id:tktknkyo:20171217085148p:plain

 

上の方で歪みを適用した元のテクスチャはどんなのかといいますと

f:id:tktknkyo:20171217084206p:plain

f:id:tktknkyo:20171217085531p:plain

このような、短調な粒子状のテクスチャになっています

ただ、このままだと全体に模様が出来てしまい、エフェクトとしては使いにくくなってしまっています

なので、もう一つ同じテクスチャを追加し、「Multiply」で乗算すると、丸い形に切り抜かれます。

f:id:tktknkyo:20171217085810p:plain

 

ただ、この状態では、元々あったテクスチャ同士を合わせて、歪みを適用しただけなので、色々な用途に使いやすいか?と言われると正直疑問だと思います。

むしろ、このくらいであれば、テクスチャ自体に加工をしてやれば良いのでは?と、その方がテクスチャの枚数少なくなります。

なので、サムネイルに使った画像の様な、差分を作りやすくする様に組んでいきます。

 

f:id:tktknkyo:20171217090356p:plain

まずは、この歪み処理とある部分です

 

 

f:id:tktknkyo:20171217090534p:plain

この紫の部分の説明です

歪み用のテクスチャを「componentMask」に繋いだあと

Multiply」にて「constant」の定数ノードを掛け算をしています

歪ませるのはX軸とY軸を移動させているのですが、その数値を2倍にすることで、移動量を強くしています、この数値を強くしていくと、模様がどんどん変わっていきます。

DynamicParameter」を代わりにつないで、カスケード上で歪みの強度を操作した動きを作る事も出来ますし

ScalarParameter」を使うことで、マテリアルインスタンスやBP上から操作することも可能です。マテリアルインスタンスについては、下の公式ドキュメントを参考にしてください。

Unreal Engine | インスタンス化マテリアル

BP上での操作について、カスケードで使っているマテリアルのパラメータを変えることもできるのですが、長くなってしまうのと、記事を見かけなかったので、いずれ記事は書きたいと思います。

 

f:id:tktknkyo:20171217091731p:plain

次は、右の方のこの部分

TextureCropping」このノードはUのショートカットキーがあるので、それで出しましょう。

このノードはタイリング処理を行うためのノードであり、シームレスなテクスチャを使う場合は接続する事が多くなるであろうノードです。

また、ノードの詳細部分に

f:id:tktknkyo:20171217092301p:plain

この様な項目があり、ここでタイリング数を変えることができます

シームレスに作ったテクスチャであれば、ここを高い数値にして上げることで、模様が細かくなります。

この後ろの「Add」のノードは、こうやってつなぐもの、と覚えておけばOKです

今回の例ですと、タイリング処理をする部分と

歪みで模様と付ける部分の2種類を適用したかったので

その用な場合は、この「Add」ノードで加算してからUVにつなぐと綺麗につながってくれます。

 

 

f:id:tktknkyo:20171217092853p:plain

次にこの紫で囲った部分です

最初の方の

f:id:tktknkyo:20171217085810p:plain

この部分との違いは

間に「Power」ノードが挟まっていることです

これは、マスク用テクスチャとコメントが入れてあるテクスチャでは

外の方まで白すぎるのではないか?と判断したのでマテリアルエディタ上で調整しています。

このノードの例ですと、このテクスチャを4乗している結果になります

ノード自体に数値を入れていますが、Expとあるピンに、定数ノードなどを入れれば、その数値になるので

こちらも

【「Multiply」にて「constant」の定数ノードを掛け算をしています】

と上の方にある部分同様、「DynamicParameter」や「ScalarParameter」によって、動的に数値を動かすことも可能です。

 

f:id:tktknkyo:20171217093450p:plain

最後のこの部分は、言うまでもないかもしれませんが

カスケード上にて、色を変えれるように「ParticleColor」を繋いでいるだけです。

 

今回はここまでとなります、マテリアルでの歪みは、少々面倒な部分もあるかもしれませんが

画像全体を動かすという、かなり影響の大きい処理であり、更に動的に数値の変更も可能なので

テクスチャをそのまま使っただけではできない用な、内側が蠢いていたりするようなエフェクトを作れたりもしますので、是非活用してくれればと思います。

 

 

【Effekseer】歪み機能のあれこれ

f:id:tktknkyo:20171216081158p:plain

今回は、Effekseerの機能である歪みの解説みたいなのをしていきます

 

歪みをEffekseer上で有効にする場合にはまず

「ウインドウ」の中の「オプション」を開き

f:id:tktknkyo:20171216100731p:plain

下の方にある、「歪み方法」を「1.20互換」に変更します

f:id:tktknkyo:20171216100804p:plain

そもそも歪みとは?

 

歪み自体がどういう処理なのかと言いますと

読み込んだテクスチャのRとGチャンネルの情報を元にX軸、Y軸を移動させます

ただ、どのように動いているかを説明したとしても、具体的にどうやって活かすのかを、ピンと来る方はあまり居ないのではないでしょうか。

例えば、単色(緑のみの■テクスチャ)であれば、これを使えば全体が動く、というのは想像出来ると思いますが

 

例えば

f:id:tktknkyo:20171216082031p:plain

この様なテクスチャを歪みとして使ったらどうなるか?と言われると

歪みを使ったことがない人には、中々想像しにくいと思います。

個人的に、歪みの機能に関しましては、まずは歪み機能を使ってみて、どのように入れたら、どの様な結果になるのか、を試してみてからをオススメします。

 

歪み機能の実装

Effekseerで歪み機能を使う場合、描画共通のタブにある、歪みのチェックを入れます

f:id:tktknkyo:20171216082428p:plain

これで、歪みがONになります

下の歪み強度は、初期では1になっています、この数値は必要に応じて変えてください

比較としてGIFアニメ貼ります、左から強度が0.2、0.5、1です

なお、これはブレンドが「加算」で試しています。

f:id:tktknkyo:20171216083322g:plainf:id:tktknkyo:20171216083414g:plainf:id:tktknkyo:20171216083456g:plain

強度が強くなるにつれて、歪みテクスチャの細かい模様が出やすくなっていきます

個人的に、強度は0.2と0.5を使うことが多いです。

 

これは加算合成での歪みで、通常合成で歪みを入れた場合

f:id:tktknkyo:20171216084617g:plain

この様になります、歪みの強度は0.2で試しています

 

f:id:tktknkyo:20171216085844p:plain

この画像は、歪み強度を0.2、加算合成で歪みを適用した先ほどのものから

ラインの本数を少なくしたものです

緑で囲った部分が、元のラインの部分と思われるもの

加算での歪みは、元のラインを残しつつ、歪ませた描画を足している感じでしょうか。

f:id:tktknkyo:20171216090514p:plain

こちらが、上記のを通常合成に差し替えたものです

緑で囲った部分には、かろうじて元のラインと思われるものは残っていますが

青で囲った部分は、原型が殆どないです。

通常合成での歪みは、元の形を壊してしまいやすいです、ただそもそも歪みを使うことで元の形が多少雑でも、歪み機能によって誤魔化したりも出来る、という利点にもなります。

 

それぞれの長所・短所

 

加算合成としての長所として

元の形に、加算していく形になるので、元の形状を崩しにくく

元の描画に、付け加えることで、攻撃エフェクトなどではより強そうに見せたりするのを

一つ歪みを付け加えるだけで可能です、ただ加算する事の最大の短所が「白飛び」です具体的にはこのようになります

f:id:tktknkyo:20171216092228g:plain

エフェクトで加算合成使う場合には、白飛びする危険があるというのは

歪みでも同様というワケです

f:id:tktknkyo:20171216092814g:plain

また、背景色にも加算の歪みが適用される関係上

背景が明るい場合、加算の歪みを使うとかなり白飛びが発生する恐れがあります

黒背景上では、加算合成の歪みは手軽なのですが

そのままでほかのゲームツールに入れ込んだ場合、ゲームの背景を加算合成で歪ませることで真っ白になってしまう危険性があります。

これ、非常に重要です、自分もやらかしたことあるので。

加算合成する場合は、背景色を明るめにして作ってください、またゲームデータ自体の方でも、ちゃんと確認するのを私はオススメします。

また白飛び対策をしたい場合、歪み強度ではなくαを調整してください。

f:id:tktknkyo:20171216093731p:plain

簡単な対処法の一つとしましては、一度Pngなどの画像に出力してから

通常合成で再生する事です、こうすることで、歪みが入っているような描画になりますが

背景などには一切影響を受けなくなります。

f:id:tktknkyo:20171216094103p:plain

出力形式を1枚にまとめて出力、にして、録画のボタンを押せばOKです。

ただしこの方法をする場合、ノードは全て加算合成にしてください。

通常合成を混ぜると、うまく出力してくれない事が多いです。

公式さんに要望出したことはありますが、技術的に難しいとの事。

 

では、通常合成の方の長所に注目しますと

大きいことが、白飛び対策が基本的に不要という点です

背景が灰色の状態で、RGBα全て255で発生させ続けても、白飛びしません

(背景が歪みはするので、多様は禁物ですが)

なので、強い歪みを連続的に出して、蠢いている表現をしやすいです。

一つの例としてがこちら

f:id:tktknkyo:20171216095338g:plain

中心部分に通常合成の歪みを入れています

1フレーム毎に発生し続けて、更にRGBαが255となっています

これを加算合成ですると...

f:id:tktknkyo:20171216095516g:plain

中心が真っ白になります

通常合成の歪みは、連続的に歪ませる場合にかなりの効力を発揮します。

HITエフェクトなどの、単発系などには加算合成の歪みはかなり便利ですが

白飛びへの対処には気を使う必要があります。

 

 

なお、Effekseerの歪みは、上にあるノードを歪ませます

f:id:tktknkyo:20171216100435p:plain

この用なツリーの場合、2に歪みを入れている場合

1には歪みが適当されますが、3には歪みが適用されません。

 

【UE4】Dynamic Parameterを使ったフェードアウト

f:id:tktknkyo:20171214193350p:plain

今回は、UE4のマテリアルエディタのノードの一つである「DynamicParameter」による簡単なフェードアウトのやり方を

 

そもそも「DynamicParameter」とは

パーティクルシステムである、カスケードで数値を設定することができ

その数値を、マテリアル内に適用する事ができます

 

例えば、カスケード内で、数値を5に設定したら

DynamicParameterが5の数値として出力されます

定数であれば、定数ノードを使えばいいのですが

このノードを使う利点は、カスケード内で動的に数値を変化させることが出来る点です。

 

マテリアルダイナミックインスタンスの、エフェクト版とでも思ってもらえば良いかなと。

で、重要なのがおそらく、動的に動かせて、結局何ができるのか?という事

具体例がないと、ピンと来ないと思います

 

f:id:tktknkyo:20171214194537p:plain

これはサムネイルでもある画像ですが、一つの単純な例として見てもらえればなと

中央の「Power」は、Baseに読み込んだデータを、Expで読み込んだ数値で累乗します

Baseに3

Expに3なら、3の3乗で27になる、といった感じです。

 

右側にある「Subtract」は、引き算をするノードです、AからBを引きます

 

DynamicParameterで数値を変化させるとどう変わるのか?というと

f:id:tktknkyo:20171214195120p:plain

f:id:tktknkyo:20171214195008p:plain

f:id:tktknkyo:20171214195152p:plain

エディタ内では、定数ノードに置き換えています

この構成の場合、数値が低くなるほど、最終結果の、中心の黒い部分が大きくなります

また、1になると、全て真っ暗になります

 

どのような数値でも、1乗してもそのままになり

元が同じテクスチャから引き算をしているので、全て0になるので真っ黒に

 

しかし、1を超える数値を入れた場合、テクスチャからそのまま情報をとってくる場合

0~1に限定されます

なので、1の部分がそのままで、1未満の部分のみ減っていきます(0.9*0.9=0.81など)

で、その減った数値を引いているので、中間の部分は白い部分が残り

中心の白が強い部分がくり抜かれて、リングのような表示になります。

 

これにより、高い数値から1に持っていくことで、中心から削れて、細くなっていって消えるような表現にすることが可能です。

 

当然、別々のテクスチャ同士で引き算することも可能ですが

その場合はDynamicParameterが1になっても、完全に消えて切れないので注意が必要です

その場合は、particlecolorのαをマテリアル側で繋げておいて

カスケードのColorOverLifeのαを最後に0にやって消してあげるといいです。

 

f:id:tktknkyo:20171214200636p:plain

また、このように引き算する前のノードに、加算や乗算などの処理を入れたノードを入れる場合、数値が1を超えてしまう場合があるので注意です(Addは足し算するノードです)

1を超えるとどうなるのか、というと

たとえば、1を超えて1.5になってしまい

累乗が5の場合だと、1.5の5乗で約7.5

1から7.5を引くと、-6.5と、高いマイナスの数値になってしまいます

こうすると、実際に表示した場合に、極端に黒く表示されてしまう場合があるので注意が必要です。

 

その場合にはこの

f:id:tktknkyo:20171214201021p:plain

Clampというノードを使うといいです

これは数値の最大値と最小値を決めてくれるノードです

Powerや、Subtractの前に、このノードにつないで0~1にすると、解決してくれます。

 

ちなみにこのClamp、Powerを使う際に、結構便利なことも多いです

理由は今回と同じく、1を超える数値を累乗すると、極端に高い数値になる事がある為。

Clampの最大値を0.95など、ちょっと低めの数値にしてから、Powerで累乗すると

1の部分がなくなるので、全ての場所が薄くなっていくので

Powerノードで薄くしたいけど、1の部分が消えなくて邪魔、という場合などに特に重宝します。

 

【UE4】カスケードで何かを作ってみよう

f:id:tktknkyo:20171213191827p:plain

 

UE4で、エフェクトつくろうとした時に、カスケードって何?ってなりそうかな?というか自分はなったので、勝手に記事書きます、ご了承を。

 

そもそも自分が最初につまづいたのが、カスケードの起動が出来ない

というより、新規作成が解らない(論外)

 

UE4起動した画面の、コンテンツをクリックすると

コンテンツブラウザというのが出るので

この中の「パーティクル」をクリック

f:id:tktknkyo:20171213192421p:plain

エフェクトでもカスケードでもなく、パーティクルです

この辺若干ややこしい用語なのかもしれません。

f:id:tktknkyo:20171213192718p:plain

作ったのを開くと、こんな画面が出てきます

ビューポートにある、この謎の物体が上の方向に動いています

未だに、これが何なのかはよく解りません。

 

 

f:id:tktknkyo:20171213193119p:plain

エフェクト作る際に、重要そうなこの三つ

緑の部分が、エミッターに入れたマテリアル

赤の部分が、エミッターに設定されているモジュール

紫の部分が、モジュールに設定していく中身

 

エミッターは、放出するもの、という意味

つまりマテリアル(パーティクル)を放出しているものです

 

このエミッターは、エミッターが並んでいる部分の

黒い部分を右クリックで、新しくエミッターを追加することができます。

f:id:tktknkyo:20171213215104p:plain

 

モジュールは、いわゆるエミッターに入れる効果などのもので

色を変えたり、発生数を変えたり大きさや角度などを変えたりするものです。

 

このモジュールはモジュールの上で右クリックから削除したり

f:id:tktknkyo:20171213193705p:plain

モジュールが並んでいる下の灰色部分の右クリックで新しく追加したりできます

f:id:tktknkyo:20171213193754p:plain

結構数が多いです、またこれらは更に展開して、色々種類があるので

全体のモジュール数はかなりの数になります

 

各モジュールの説明などは、公式のリファレンスを見るといいと思います。自分も全部は覚えきれてないです...

docs.unrealengine.com

 

あとは、幾つかモジュールの解説を。

 

初めから入っていて、消すことの出来ない

Required

 ・Material

そのまんま、使用するマテリアルを設定します。

ドラッグ&ドロップや、右の▼から探すこともできます

f:id:tktknkyo:20171213214913p:plain

・スクリーン整列

初期設定ではPSA Squareとなっています

この状態では、パーティクルの大きさはXのみ影響します

また、常にビルボード表示(カメラの方に向いてしまう)ので

これを変更したい場合はここを変えるといいです

f:id:tktknkyo:20171213194841p:plain

その下の三つのチェック

「Ues Local Space」

これにチェックを入れると、レベルなどに配置し、大きさを変えた時に位置も連動してくれます

これにチェックがいれていないと、拡大しときに表示が変になりやすいので注意

パーティクル単体の大きさは変化するが、位置がそのままになるので

大きさを調整した場合にかなりの破綻になります

「Kill on Deactivate」「Kill on Completrd」

この二つは、エミッタ自体の消去をします

無限ループするようなエフェクトではチェックは無しで

それ以外であればチェックを

大体の場合は全部チェック入れればいいかなと

 

f:id:tktknkyo:20171213195341p:plain

次に、DurationにあるEmitter loops

この数値はループ回数を設定します

初期値が0、0は延々とループします

基本的には1がいいかなと

 

こちらも最初からあって消せない

Spawn

 

f:id:tktknkyo:20171213200021p:plain

上の方にあるのを、開いていくと、こんなのが出てきます

この二つは、増やすほど放出していく量が増えていきます

どっちを増やしても増えるので、放出量を増やしたい場合は数値を増やしていけばいいのかなと

ただ、これは放出し続ける場合に使います

「HITエフェクトに、粒子を100個一気に散らしたい!」

という場合には向きません

 

こういう場合に使うのが「Burst

f:id:tktknkyo:20171213200445p:plain

という項目にあるここです。

+マークをクリックしてエレメントを追加すると、このような表示が出てきます

f:id:tktknkyo:20171213200647p:plain

Count

この数値分だけ、発生します

Count Low

0以上の数値を入れると、Countとの数値のランダムになります(つまり最小値、-1で無効)

「Time」

実際にどのタイミングから発生させるか?というもの

ただ1などの数値にすると、発生してくれない?発生しなくなる理由は不明です...

 

必須はこの二つのモジュールです

後は、個人的に使用頻度が高そうなモジュールをいくつか

 

Color Over Life

Colorの中にあります

色を変える為のモジュールです

ただし、このモジュールで色を変える場合、マテリアル内でparticleColorをつないでおく必要があります

 

f:id:tktknkyo:20171213204538p:plain

モジュールの詳細ではこの用になっていて、数値設定する部分は、折りたたまれています

このモジュールに限らず、数値を設定する部分が折りたたまれていることが多いです。

 

ColorOverLifeは、RGBを変化させる

AlphaOverLifeあ、αを変化させます

f:id:tktknkyo:20171213204918p:plain

数値を設定する項目は、5パターンありますが、まずは線を引いた3つ覚えればとりあえずは問題ないです

赤線は、数値を固定で設定

黄色線は、数値を変動させる

緑は、数値の最小最大を設定

f:id:tktknkyo:20171213205306p:plain

配列のエレメント、とある右の+をクリックするとエレメントを追加します

InValは、どの時間の数値を設定するか

OutValは、実際に設定する数値

ArriveTangent,LeaveTangent

この二つは、カーブの微調整するものです、細かい調整をしたいときに使いますが

数値で指定するより、カーブエディタで動かすのが主だと思います

Interpは、この数値の中間の間をどのようなカーブをさせるかを設定

とりあえずは「CurveAuto」が一番安定かなと

 

 

上で名前だけだしたカーブエディタ初期位置では右下にあるグラフのようなものです

ここで、これらの数値を動かすことができますが、初期状態では、そもそも何も出ていないです

f:id:tktknkyo:20171213205828p:plain

モジュールの、この部分をクリックすることで、カーブエディタに追加されます

f:id:tktknkyo:20171213210017p:plain

左の青の丸の部分に、モジュール名が追加されます

ただ、モジュールが増えてくると複雑になるので、右の方にある小さな□をクリックすると

カーブエディタ上での、表示、非表示が切り替えできます。

 

赤丸の部分は、カーブエディタにあるピンをクリックすると出現します

これをドラッグする事で、このカーブの湾曲を変えることができます

 

上にある紫の部分は、このカーブの曲線をどうやって表示するか、の設定です

基本的に自動でOKです

こりたい場合だけ変えて色々弄ると良いかなと

 

RGBの設定は、数値の挿入にカラーピッカー使えたりしますが、そこまで大差はないです。

数値の設定は、他のモジュールも基本的に同じです。

詳しくしりたい方が、上にはった公式のドキュメント参照するといいと思います。

【InitialLocation】

f:id:tktknkyo:20171213210622p:plain

いわゆる座標を設定します

ある程度ランダムな範囲に発生する系などに

【InitialSize】【SizeByLife】

f:id:tktknkyo:20171213210856p:plain

f:id:tktknkyo:20171213210954p:plain

初期のサイズと、時間で変化するサイズ

 

【InitialVeloctiy】

f:id:tktknkyo:20171213211048p:plain

移動させる為のモジュールです

ただ、単純に移動というより、重力で引っ張るようなイメージ...?

【Drag】

f:id:tktknkyo:20171213211238p:plain

減速、IntialVeloctiyと合わせて使う事が多いかなと

割とお手軽に動きの緩急つけやすいので便利です

ただ、あくまで減速するだけなので逆方向に進んでくれたりはしません

ただ、このおかげで手軽に使いやすいと思います。

 

【LifeTime】

f:id:tktknkyo:20171213211619p:plain

パーティクル毎の寿命を設定します

 

【InitialRotation】

f:id:tktknkyo:20171213211738p:plain

発生時の角度を設定します、回転はできません

 

【InitialRotationRate】

f:id:tktknkyo:20171213211921p:plain

回転させるモジュールです。

 

 

今回はここまでです、Dynamicは、使う頻度多そうですが、マテリアル絡むので、個別でなにか記事書きます、出来ること多すぎますし。

【Effekseer】リング機能で立体を作る

Effekseerの機能、リングでちょっとした立体を作れます、というお話

 

f:id:tktknkyo:20171210113428p:plain

こんなの作れるよ!(Twitterサムネ用に静止画です)

f:id:tktknkyo:20171210101719p:plain

そもそもリングがどこにあるのか?というと、描画の所に、「リング」があります

初期の、テクスチャが入っていない状態でリングにすると

f:id:tktknkyo:20171210101840p:plain

こんな描画になります、輪っかは輪っかですが

カクカクで、あまりキレイな曲線じゃないです

 

ただ、これを見て「リング上のテクスチャ用意すればいいじゃないか」と、思わないで欲しいのです

なので、自分がこの「リング」機能を使う利点や理由などを解説していこうかなと

 

リングの描画には、スプライトなどより、多数の項目があります

この中でも、リング独自な部分の解説を。

f:id:tktknkyo:20171210102236p:plain

【頂点数】

頂点の数です頂点?って思う方居るかもしれませんが

早い話、3Dモデルの頂点数のようなものです。

【表示角度】

初期では、360なので、一周していますがこの角度を変えることができます

素の状態だですと、途切れてしまい何のためか解りにくいですが、使い方によってはかなり便利です

なお角度は固定のみではなく、ランダムやイージング指定が可能です。

f:id:tktknkyo:20171210102556p:plain

外輪・内輪】

これ非常に重要です、頂点数の説明で入れたように、3Dモデルのようなもので

イメージとしては

f:id:tktknkyo:20171210103151p:plain

青色の点が外輪、赤色が内輪、で実際の描画はこの緑ので繋がったリングの形をしています(絵が下手で申し訳ない)

 

でこの数値を変えるということは、リングを太くしたり細くしたり
内輪が0になると、中心まで塗りつぶされます

f:id:tktknkyo:20171210103442g:plain

外輪がX軸2固定、内輪をX軸0→2に変化させた例

実際に白で描画されている範囲は、外輪から内輪の間なので

この二つが同じになると、一切描画されなくなります

この手段を使うと、輪っかが細くなりつつ消える、といった表現が可能になります

X軸のみ弄っています、じゃあY軸は?と

Y軸を動かすと、立体になりますその解説は少し下にて。

 

【中心比率】

言葉そのままだと思いますが、これは中心の位置を何処に持ってくるか?を設定します。

f:id:tktknkyo:20171210104137g:plainf:id:tktknkyo:20171210104156g:plain

左が中心比率0、右が中心比率1になります

便利ではありますが、0や1だと極端になりやすいので

平面で使う場合、自分は0.1~0.9程度をオススメしておきます。

なお、この中心比率もランダムやイージング指定が可能です。

 

【外輪色・中心色・内輪色】

最初にリングをした時点で、グラデーションがかかっていますが

これがなんでかというと、初期設定で、この外輪と内輪のαが0(完全透明)

なのが理由です

また、リング機能のこれらの色は、設定するとグラデーションを自動で描いてくれます

なので、中心のみαが255に設定するだけで、ちゃんとグラデーションが掛かってくれます

なお細かい調整をしたい場合は、これらの色と、中心比率を弄ってみるのもいいと思います。

 

【外輪・内輪による立体】

f:id:tktknkyo:20171210105008g:plain

このような形状を、簡単に作ることができます

このGIFでは、立体であるこをを解りやすくするために回しているだけで

本来は勝手に回ったりしないので、ご安心を。

f:id:tktknkyo:20171210105159p:plain

設定した数値はこのようになっております

中心比率は1にすると、極端になりやすいのですが

Y軸を動かして立体にする場合は、この方が見栄えが良い事が多いです。

f:id:tktknkyo:20171210105339g:plain

中心比率を0.5に変えるとこのようになります。

f:id:tktknkyo:20171210105824g:plain

中心比率を1から0にイージングで動かすと、このような動きに

能力強化などの、バフ系のエフェクトに使えそうな動きになります。

 

【ちょっと実用的っぽい内容】

 これ、以前Twitterにあげたやつなのですが、構造は単純なのでちょっとした解説を

f:id:tktknkyo:20171210110450p:plain

まず、使用テクスチャはこちらです、SD製です

まず、この一つの動きを作ります

f:id:tktknkyo:20171210110730g:plain

まずは、寿命を「20~40」

フェードインを5の、フェードアウトが10

 この二つで、寿命がランダムで、透明状態から、フェードインして、フェードアウトしていくと思います

f:id:tktknkyo:20171210110914p:plain

また、この上に向かう動きを中心比率で作ります

中心比率も、イージングにて動かします

Y軸を動かして立体にすると、中心比率で上下に動くような動きを作ることが可能です。

 

 

外に広がるような動きにしたいので

内輪の、Xを5にしましょう

f:id:tktknkyo:20171210111343g:plain

こうすると、広がりながら、上に動く動きになります

内輪より外輪の方が大きくなっていますが、基本的に

どちらが大きくても問題ない場合が多いです。

ただ、Y軸はいいのですが、X軸は極力マイナスとプラス数値の混合は止めてください

描画がおかしくなりやすいです。

f:id:tktknkyo:20171210111722p:plain

ここで、このリングのノードに親ノードを追加します

リングのノードを右クリックして、ノードの挿入をします

ノードの追加をすると、子にノードが追加され

ノードの挿入をすると、親にノードが追加されます。

最初の頃は慣れないと思いますが、エフェクト作っていると次第になれると思います。

f:id:tktknkyo:20171210112054p:plain

こうして、新しく作った親のノードの寿命を20に

位置の、Y軸をこのように、10からマイナス10に動かします。

f:id:tktknkyo:20171210112224p:plain

そして、リングで描画しているノードを、発生数の無限にチェックを入れて

位置への影響を生成時のみにします。

f:id:tktknkyo:20171210112539g:plain

この時点で、だいぶそれっぽくなります。

中心の白い□が邪魔であれば、親ノードの描画のチェックを外してやってください

 

まだまだ違和感あると思います、ここからは微調整していく感じなので、細かい部分は省きますが(こういう部分は、自分の目で確かめながら是非調整してやってください)

 

リング部分の、Z軸を180°ランダムにして

f:id:tktknkyo:20171210113041p:plain

内輪の動きをこんな感じにすると

f:id:tktknkyo:20171210113113g:plain

こんな感じに、割と自然な感じになるのかなと。

またこれ、立体故に、アングルによっていろんな用途に使えますので

3Dゲームに使う場合でも中々重宝するかなと。

ただ、実用性を考えるなら、リングの頂点数には注意です

多いほど綺麗になりますが、描画負担が上がります(そこまで影響大きいわけではないそうです)

また、このような形の場合、頂点数を多少少なくしても、結構破綻が見えないので

どの程度まで頂点数を落とすかは、実際のゲームの描画負担と相談して決めてやってください。