moyasiエフェクト館

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


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

このブログについて

ブログの名前の通り、エフェクトに関係することを上げていこうかと思います

自分がわかる範囲で、エフェクトに関係することであれば何でもいいかな?とは

エフェクト自体の作り方は勿論の事

エフェクトの再生手段や、エフェクトに使うテクスチャ等

 

エフェクト素材の配布も始めました

(http://tktknkyo.hatenadiary.jp/entry/2017/12/31/095520)

 

 

なお、情報はTwitter(moyasi@エフェクト垢 (@torisutamoyasi) | Twitter)

でも出していたりするので、興味のある方は是非

Twitterではmoyasiという名前になっていますので、tktkでもmoyasiでもどちらでも呼びやすい方で

 

また、Discordにて「エフェクト交流所」というサーバーというのも作りました

ここは、エフェクトを作ろうとしているor作っている人同士で

相談したり、情報の共有したりするのを目的としております。

discord.gg

 

【Effekseer】Fカーブあれこれ

f:id:tktknkyo:20180214021841p:plain

今回は、Effekseerの機能であるFカーブについて色々と

 

【Fカーブとは】

グラフ上で、数値を自由に設定する事が出来る項目のようなものです。

サムネイルのような、複雑な動きを作ったりするのには重宝しますが

設定が若干面倒臭いという欠点もあります。

 

【イージングとの兼ね合い】

エフェクトには、動きの緩急をつけたほうが見栄えが良くなる

という事が非常に多いので

そのようなのを作る場合だと、Fカーブは非常に重要そうです...が

Effekseerの場合、イージングという機能がありまして

こちらが非常に手軽に緩急をつけやすいので

緩急をつけるだけであれば、基本的にイージングで済む場合が多いです。

 

f:id:tktknkyo:20180214022516p:plain

イージングの設定の場合、始点と終点を設定します。

始点から終点までは、パーティクルの生存時間を掛けて移動します

なので、生存時間への影響力が非常に強いです

使い勝手が悪い部分もあるにはありますが、生存時間だけで制御出来る事でもありますので

調整が比較的にしやすい利点でもあります。

また、始点速度と終点速度により、動きの緩急を非常に簡単につける事が可能なので、基本的に緩急をつけたいだけであればイージングで問題ない場合がかなり多いかなと。

 

【Fカーブを使いやすい場面について】

 

では、イージングではなく、Fカーブが便利になってくる場面はどうなるのか?という部分が出てきます、自分の中で、ここはFカーブを使ったほうが良いのでは?と思った要素をいくつか挙げていきたいと思います。

(但し、イージングの機能が強化されれば、下記の例でもイージングのみで可能になる可能性はあります)

 

 

f:id:tktknkyo:20180214023403p:plain

この例ですと、0Fから30Fまでは一切動かないです(50Fから100Fも動きがないです)

イージングで設定する場合、始まってから、常に動き続けるので

このような動きを付けることが現在できません。

生成開始時間を遅らせればいいのでは?

生存時間を短くすれば良いのでは?

こう思う方も当然居ると思いますが

ノードの親子階層を使う場合

このFカーブで位置を制御している場合、拡大自体は0F目から拡大していく要素の場合

発生を遅らせる事ではやりにくいと思われるので、この場合はFカーブを使うと便利なのでは?と。

f:id:tktknkyo:20180214024110g:plain

例としては、このような動きです。

 

 

f:id:tktknkyo:20180214024333p:plain

この例の場合、動く→止まる→動く

という動作を実装する場合です

このような動きは、あまり使う機会自体が、あまりなさそうに思われるかもしれませんが

使い方が分かると、面白い動きになるのかな?と個人的には思います

f:id:tktknkyo:20180214024633g:plain

動きとしては、こんな感じになります。

 

 

f:id:tktknkyo:20180214024918p:plain

このような、行って、戻ってくるような動きです

個人的には、非常によく使うパターンだったりします。

位置を動かすというよりも、色で使う場合が多いですが

フェードイン、フェードアウト専用の設定自体は確かにありますが

細かく作りたいという場合には、Fカーブでαを弄ることが多々あります。

f:id:tktknkyo:20180214025147g:plain

動きはこんな感じになります

 

f:id:tktknkyo:20180214025543p:plain

主に色で使う事が多そうなこのような動きなど

始めはRGBそれぞれ255で

終わりがRGBそれぞれ0ですが

RGBでそれぞれ変化の仕方を変えるなどができます。

また、色の場合、Fカーブの上部分にそのフレームでの色が表示されるのも中々便利だったりします。

このような作り方であれば、例えば炎を作る場合

最初は黄色~赤色の炎で、後半はずっと黒い煙が上がっている

という色の変化を作りやすいです。

f:id:tktknkyo:20180214025841g:plain

色の変化はこんな感じになります。

 

【Fカーブの設定関係】

Fカーブは設定若干面倒な部分もあるので、自分が普段やってる方法を

まず、Fカーブの設定を入れる場合

グラフ上で、キーボードのX,Y,Z,R,G,B,Aを押す必要があります(それぞれ座標や色のキーを)

f:id:tktknkyo:20180214030608p:plain

そしたら、ここでフレーム数と数値を直接入力します

ドラッグで動かすこともできますが、自分は基本的に数値は直接入力しています

f:id:tktknkyo:20180214030735p:plain

Fカーブには、このような湾曲を作るための仕様もあり、こちらも直接入力などもできるのですが、自分自身は殆ど使う事はないです。

非常にややこしくなってしまいがちな事もありますので...

 

今回のFカーブの機能、設定がややこしい部分はありますが、細かい動きを作ったりしやすいので、使い方が分かると非常に便利だと思います。

 

f:id:tktknkyo:20180214031407g:plain

折角なので、以前Fカーブで色々試して作ったのを貼っておきます。

youtubeに作ったエフェクト時々投稿していこうかな?と

www.youtube.com

 

youtubeでは作業配信は既にやってたりしてますが

作ったエフェクトの投稿も合わせてやっていこうかな?と

 

この動画はニコニコ動画に以前上げていたものでしたが

検索してみた所、作ったエフェクトの動画を上げるのは

ニコニコ動画より、youtubeの方が圧倒的に良さそうなので

今後、エフェクトの動画を上げる場合はyoutube確定になりそうですね

 

この理由としては

自作エフェクト系を調べようとして

UE4 VEX」「UE4 エフェクト」

の二つで検索してみたところ

youtubeは約300件と約1000件程ヒットしましたが

ニコニコ動画では、0件と、約10件のヒット数と

非常に差があるのが解ったので

 

RPGツクールという面からすると、アツマールなどもあるニコニコ動画の方が良いかな?というのは思ったのですが

ツクールはツクールですが、エフェクト自体はほぼEffekseerで作っているものなので

 

ただ、ゲーム自体の動画は、引き続きニコニコ動画の方が良いのかな?とは思ったりはしていますね

その辺をどうするかは、色々考えていきたいところです

 

最近ブログ放置しかけてる部分は確かにありますが

ちょっとした理由というのが、最近Houdiniの勉強を一番のメインでやっているのですよね

で、Houdiniの事で記事に書けるような事もまだ対して覚えてないので、記事書けることあるのかな?と

 

面白い発見したら、Houdiniの情報もボチボチ載せていこうかなとは思っています。

個人的にはHoudiniの次点だと、SubstanceDesignerの関数やFXMAP辺りの勉強もしたいのですよね。

youtube始めました

www.youtube.com

 

一応以前はニコニコ生放送での配信はやっていたのですが

youtubeに移行し始めました~

という報告的なものですね

 

今のところは、作業配信やゲーム配信かな~と

作業配信メインな感じになればいいのですが

 

作ったエフェクトの動画は...未定ですが出してみたいかなとは

一応動画方向も、考え中ではあります。

 

こちらの方もよろしくお願いします。

【SD】氷片のテクスチャを作る

f:id:tktknkyo:20180120153105p:plain

今回は、この様な氷片のようなテクスチャを作っていきます

基本的な用途は、氷属性魔法のようなもので、無数に飛び散らせるイメージです。

かなり簡易的なので、かなりリアリティのある氷ではないので、ご了承ください。

 

f:id:tktknkyo:20180120153516p:plain

大まかな構造としては、この様な形になっています。

 

では内部の構成を

 

【氷模様の制作】

 

f:id:tktknkyo:20180120155221p:plain

 

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

雲模様のノイズを色を変更した後に、ワープノードにて加工して氷の表面のような模様に仕上げます。

 

f:id:tktknkyo:20180120160926p:plain

 

赤の部分

f:id:tktknkyo:20180120160951p:plain

ノイズのこのノードで雲模様のノイズを作り

HSLで色を変化させます。

f:id:tktknkyo:20180120161713p:plain

氷のメインの色となるので、青~水色くらいになるように

今回はこの様な設定にしました。

 

黄色の部分

HSLで色を変えたのをワープノードで加工します

加工するためのノイズは

f:id:tktknkyo:20180120162143p:plain

このノードを使います

Distanceの数値で、模様の細かさが変わります

ここでは31に設定しています。

このあとに、更に形の加工はするので、ここでは細かい位がキレイに映りやすいと思います、個人的にこの部分は、後から結果みながら調整するのがベストなのかな?と思います。

 

f:id:tktknkyo:20180120162852p:plain

次はこの部分です

ここもワープノードによる加工をしています

加工に使うグラデーションは

f:id:tktknkyo:20180120162948p:plain

このノードを使用しています

これに、ブラーをかけてからワープノードによる加工をしています

 

ここで、なぜブラーを入れるのか?といいますと

f:id:tktknkyo:20180120163500p:plainf:id:tktknkyo:20180120163518p:plain

これが比較画像で、左側がブラーなし

右側がブラー有り

角張っている模様ごとの、間が若干なめらかになります

また、ブラーがないと、模様の間の認知性が下がってしまうので

氷のような模様が見えなくなりやすいので、そのための処置です。

f:id:tktknkyo:20180120164423p:plain

ちなみに、強度を5にすると、このようになり

節目が非常にわかりにくくなるので、強くしすぎず、強度は1程度がいいと思います。

 

これで、氷の模様部分は終了です。

 

【氷の形部分】

f:id:tktknkyo:20180120164550p:plain

 

ノードはこのようになっています。結構強引な作り方ではあります、ご了承ください。

 

f:id:tktknkyo:20180120164736p:plain

まずは一直線なこの部分から。

 

f:id:tktknkyo:20180120164807p:plain

ノイズのこのノードにて、ノイズを作ります

そして、Distanceは極力低く、2~4程度に

 

f:id:tktknkyo:20180120164929p:plain

その後、調整のこのノードを接続します、現段階では繋ぐだけでOKです。

 

f:id:tktknkyo:20180120165032p:plain

その後、調整のこのノードを繋ぎます

Quantizeは2に設定します、これは、減色するノードで

2に設定すると、2色、つまり白or黒になり、中間の色が全て消えます。

 

ひとつ前のノードは、色の階層を動かすノードで、バーを動かせば、色が変わっていくのが解ると思います。

この状態で、最初のノイズの数値を弄ることで、形を作ります。

 

f:id:tktknkyo:20180120171200p:plain

 

この場合、白黒が反転であったり、上下左右、突き出た感じになっていてもOKです

SDでのノイズは、基本的にシームレスなので、こうなっても一切問題がないので、そこは安心して大丈夫です。

 

その後、トランスフォーム2Dにて、中心に持ってきて、大きさも調整します。

 

f:id:tktknkyo:20180120171932p:plain

 

赤の部分

f:id:tktknkyo:20180120172017p:plain

調整のこのノードで白黒反転しています...が

黒背景に白の形を造る必要があるので

トランスフォーム2Dで作った時点で黒背景であれば必要ないです。

 

大まかな、形部分はこれで完成ですが、枠縁の部分は、これを加工して作っていきます。

 

黄色の部分

強度を10程度でブラーをかけてぼかします

その後、ブレンドノードで減算します(接続部分はノードツリー参考にしてください)

 

こうする事で、元の形をした枠が作られます

このノードは、氷の模様と合成させます

 

青の部分

氷の模様がカラースケールなので、これもカラースケールに変更するために、グラデーションマップに接続し、カラースケールに変更します。

 

これにより、3つのパーツが完成したので、最後にそれらをかけ合わせて完了です。

 

f:id:tktknkyo:20180120173133p:plain

 

 

 

 

 

 

【SD】水滴のテクスチャを作る

f:id:tktknkyo:20180113003246p:plain

今回は、この水滴のようなテクスチャの作り方を

 

f:id:tktknkyo:20180113003415p:plain

今回のノードはこのようになっています、そこまで複雑ではないです

 

 

f:id:tktknkyo:20180113003920p:plain

 

【赤い部分】

f:id:tktknkyo:20180113004147p:plain

ノイズのこのノードを元に使います

今回はランダムシードは7にしています

 

その後、ブレンドノードで乗算にします、不透明度が今回は0.62に

 

f:id:tktknkyo:20180113004332p:plain

その後、トランスフォームのこのノードを繋げで極座標を掛けます

 

【黄色の部分】

f:id:tktknkyo:20180113004625p:plain

ノイズこのノードを二つ作ります

細かさを別にするのでDistanceをそれぞれ別に設定します

今回はDustabceを10と14に設定し

 

それらをブレンドノードで最小(暗)します

 

【青の部分】

この二つをワープノードに繋げます

強度は今回0.59程度にしておきます

 

 

f:id:tktknkyo:20180113010024p:plain

左から順に

まず左の二つは

パターンのこのノードを使います

f:id:tktknkyo:20180113010107p:plain

Curveは両方とも1

上はScaleが0.81、Gradientが0.18

下はScaleが0.8、Gradientが0.03

 

それらを、ブレンドノードで減算します

そうすると、リング状になります

その後更にブレンドノードで、今度はオーバーレイします

これによりリングを少し加工します

外側がクッキリとすると思います

その後、GradientMapを繋げます

このGradientMapは、カラースケールに変換するのみなので

そのままでOKです

 

 

f:id:tktknkyo:20180113012532p:plain

次はこの部分、ここで実際に最後の合成をしていきます

【赤の部分】

ワープノードで加工したものを

HSLに繋ぎます

f:id:tktknkyo:20180113012858p:plain

HSLのパラメータはこんな感じに

ここで水滴の色の全体を決めます、基本的に水色~青色に

 

f:id:tktknkyo:20180113013122p:plain

HSLに繋いだ時に、このようなものが出たと思いますが

これは、基本的に気にしなくても大丈夫です

原理としては、このHSLは、カラースケールしか読めないノードです

ですが、今回はグレースケールを直接繋いでいます

それでも繋げる理由は、この小さい緑のものが理由で

これは、GradientMapのノードが、小さく表示されている状態です

このノードにより、一回グレースケールを、カラースケールに変換する処理が間に挟まります(Dキーを押すことで、拡大したり、縮小したりする事ができます)

 

原理などは気にしなくてもいいですが、グレースケールとカラースケールで互換がなくても、基本的に自動で変換してくれるので、そこまで気にしなくても大丈夫です。

(ただし、ブレンドノードはやや例外)

 

f:id:tktknkyo:20180113014020p:plain

そのごチャンネルのこのノードで、先ほど色を付けたのをRGBに

アルファは、画像の左下の紫で囲ってあるノードを選択します

 

【黄色の部分】

 

リングと、先程作った模様をブレンドノードで加算して終了です。

 

 

HSLの所の説明で、ブレンドノードは例外、と最後にある部分がありますが

あれの理由を

 

 

f:id:tktknkyo:20180113014314p:plain

フォアグラウンドと、バックグラウンド

この二つは黄色とグレーの二つの色のピンになっています。

この二色は、グレースケールでも、カラースケールでも読み込める事を表します...が

 

f:id:tktknkyo:20180113014603p:plain

グレースケールと、カラースケール

この二つを同時につなごうとすると、エラーを表す赤い破線が出てきます。

 

ブレンドノードは、カラースケール同士や、グレースケール同士であれば合成できますが

グレースケールとカラースケールを組み合わせる事は出来ません。

また、グレースケールをHSLに繋げたときに、カラースケールに自動変換してくれるような事もないので注意が必要です

そのような場合は、一度GradientMapで、カラースケールに変換してからつなげましょう。

 

リングの部分で、カラースケールにいちいち変換したのも、これが理由です。

【UE4】エフェクトの色差分を、マテリアルインスタンスで作る

f:id:tktknkyo:20180106104053p:plain

今回は、UE4で作ったエフェクトの、色差分をマテリアルインスタンスで作る方法となります。

 

【マテリアルインスタンスでする理由】

【色の破綻を作りにくい?】

 

色の差分だけであれば、カスケードでの、Color系モジュールの数値を弄れば簡単に色

差分を作ることができます。

ただし、カスケードを一切使ったことの無い人が、エフェクトのデータをもらい、その色差分を作る場合に、困惑しやすいのではないか?という点や

エフェクト作った人が、エミッシブカラーで発光させていた場合

カスケード側で色を変える場合、その数値が解りにくいかな?というのや

色の調整で、カーブの曲線を手動で作っている場合は、その部分での破綻が置きやすいのでは?という点です。

 

【即座に色の変化が解りやすい】

f:id:tktknkyo:20180106104801p:plain

マテリアル側で、元となるマスターマテリアルに、VectorParameterにて色の変更が可能であれば

こちらのほうが直感的でなおかつ、バーを動かすだけで、ビューポートの色や、レベルに配置してあるものまで、自動的に変更されるので、変化が直ぐにわかりやすい利点もあるかなと。

 

【そのままBP上でも制御が可能】

またパラメータ化したパラメータで、色を変更するというのは言い換えれば

MIDを使いBP上で数値のみ変化させる事もできるので

particleのデータはもちろんのこと、マテリアルインスタンスのアセットを増やすことなく、色差分を作ることもできます。

マテリアルインスタンスで基本的に調整しつつ、BP上で条件によって微妙に色合いを変える、などの制御も可能になります。

 

【particleColorをDyanmicParameterのように使える】

マテリアルインスタンスイで色を変更するということは

色を変えるための基本的なparticleColorのRGBピンが空くということになります(αはおそらく使うと思いますが)

ということは、DyanamicParameterの変わりに使うことが出来るので。

DyanamicParametrを使用することのできないGPUparticleで、擬似的に使うことが可能であり

本来4つまでしか使えないのを、実質7つまで使える事にもなります。

 

【制御面の問題】

色差分毎に、マテリアルインスタンスのアセットが増えることになります

カスケードで制御する場合も、アセットが増えることに変わりはありませんが

問題は、マテリアルインスタンスは、メッシュに貼るものなど、非常に多数の用途で使われるので

ただでさえ増えやすい、インスタンスがかなり多数になってくるので、アセットの管理が大変になってしまいやすい問題もあります。

 

また、マテリアルインスタンスを使っている故に避けられないのが

元のマスターマテリアルを変更すると、その子のインスタンスが全て変わってしまう点です。

似たような新しく追加する程度ならいいのですが、変に弄ってしまうと、その子になっているマテリアルインスタンスが、全て変わってしまうので注意が必要です。

また、色の変化が、カスケードで制御する程の自由度を作りにくい点です。

汎用的なもので、単純に色を変えたい場合でも、カスケード側でのRGB変化を作りにくいので、色が若干短調になりやすいなどの欠点はあります。

 

【マスターマテリアルの構成】

【色を変えるだけの基本構造】

f:id:tktknkyo:20180106110103p:plain

particlecolorのRGBにつなげている部分を、VectorPaerameterにつなぎ直すだけで大丈夫です。

こうする事で、インスタンス側で色を変更する基本的な形になるのかなと。

 

ただ、流石にこれでは短調すぎます。

 

【色の変化を作る】

 

色が一つでは短調なので、発生してから、だんだん色が変化する仕様を追加します。

f:id:tktknkyo:20180106110548p:plain

VectorParameterを複製して、それぞれ「Linearinterpolate」に繋げます

このノードは、Lキーのショートカットキーで出すことができ

Alphaの数値が0ならA,1ならB、0.5ならAとBの平均を出すような処理になります

 

用途としては、ここに入力する数値が0→1に変化する場合

Aに接続している情報から、段々Bに接続している情報に移り変わります。

 

f:id:tktknkyo:20180106111101p:plain

実際に、再生中に色を変えたいので、「DynamicParameter」に接続します

ここはparticleColorでも可能です。

f:id:tktknkyo:20180106111331p:plain

カスケード上で、ここのカーブをこのように

寿命が0の時に数値は0

寿命が1の時に数値が1

というカーブを作ることで、エフェクトを再生した時に

AllColorINの情報の色から

AllColorOUTの情報の色に移り変わっていきます

ここのカーブ曲線はカスケード側で設定するのが基本になりますが。

f:id:tktknkyo:20180106111639p:plain

このように、パラメータ化した定数ノードとPowerと合わせることで

マテリアルインスタンス側で、このカーブ曲線を弄ることも可能になります。

「DyamicParametr」での変化が0~1に設定してあるのであれば

0より大きい数値であれば、はじめと終わりの数値は変わらず、途中の数字のみ変化するので、カーブ曲線を弄ることも可能になります。

 

エフェクト用のMIDについては、こちらの記事を参考にしてください。

tktknkyo.hatenadiary.jp

 

今回使用したテクスチャについては、こちらの記事を参考にしてください。

tktknkyo.hatenadiary.jp