moyasiエフェクト館

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


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

このブログについて

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

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

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

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

 

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

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

 

 

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

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

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

 

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

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

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

discord.gg

 

【SD】PixelProcessorノードで粒子を作る

f:id:tktknkyo:20180401094606p:plain

SDには、PixelProcessorノードという、かなり細かい処理をしやすいノードがあるのですが

ややこしそうで触っていなかったのですが

色々調べて、自分なりに作ってみたので、一回記事として残しておきます。

 

今回は粒子ですが、単純な粒子だけであれば、polygon2のノードで作れるのですが、このノードでの作り方を知るためには良いのかなと。

 

 

今回のこのノード、単純に粒子を作るだけでなく、調整する機能も付けてあります。

 どのような調整ができるかは、このツイートをご覧下さい。

 

amd.click

今回の記事を書くのにあたって、この方の記事を参考にしています。

また、各関数の説明なども詳しくされているので。

この方の記事も見るのをオススメします。

 

 

まず、このノードには、$POSという、座標の割合を出力する変数があります。

f:id:tktknkyo:20180401095343p:plain

X軸とY軸それぞれ、座標の位置によって0~1の数値がそれぞれ割り振られます。

X軸のみ取り出すと、こんな感じのグラデーションになります。

f:id:tktknkyo:20180401095719p:plain

Y軸であれば、上下でのグラデーションになります、またXとY軸のそれぞれの座標なので、Floatが二つ入っているFloat2となります。

 

上の坐像で、$POSから0.5を引き算していますが、引き算することで

-0.5~0.5の数値に変換します、こうすることでXとYが0の位置が、画像の中心に来るようになります。

引き算するのに、-0.5をAddの関数で足し算していますが、思考中に色々試してたのが理由なだけで、引き算のSubtracionでも問題ないはずです。

 

f:id:tktknkyo:20180401100138p:plain

$posのほかに、$sizeという変数も使っています。

この変数は、X,Y軸の解像度を取得します

今回は2Kの解像度で作ったので、X,Y共に2048の定数が入っている状態です

$posで0~1の数値を出力し、0.5を引き算すると-0.5~0.5の範囲になり

解像度(今回は2048)を乗算する事で、-1024~1024の数値となります。

この処理は、後で必要になってきます。

 

f:id:tktknkyo:20180401101313p:plain

解像度で乗算した後に、三平方の定理により、中心からの距離を取得します

これにより、各ピクセル毎に中心からの距離が入ります。

 

f:id:tktknkyo:20180401101747p:plain

sizeで取得した解像度のX軸のみ取ります(X軸とY軸が同じなの前提ですが、Y軸でも問題ないです)

また、ここの数値は粒子の半径を取得します。

半径が解像度の半分の場合、端まで色が出てしまいます

エフェクトで使う場合、反対側に写ったりする仕様が多いので、上下左右1ピクセルは黒になるようにするので

半径は、(解像度の半分-1)とする事で、上下左右がそれぞれ黒になります。

最後に上下左右の部分を黒にする手段もありますが、円の端っこを切るので形が少し変形してしまいます。

 

青の部分の割り算は、解像度をそのまま割る事で、中心からの距離を-0.5~0.5の数値に戻しています(四隅は0.5超えていますが、そこは気にしないでください)

f:id:tktknkyo:20180401102337p:plain

ここの割り算の部分で、中心からの距離が取得できているので、中心が黒く、外になるほど白くなっています。

 

f:id:tktknkyo:20180401102610p:plain

 

このままでは可笑しいので、1から、割り算で距離を取得した数値を減算します。

これにより0~1の範囲の部分は反転しましたが、1を超えている部分があるので。その部分を切り取ります。

 

それが、下にある処理で"≧"の関数で、数値の大小を比較しています

第1と第2の入力の数値の比較をしています

f:id:tktknkyo:20180401103008p:plain

第二に接続している情報は、解像度の半分から1を引いた数値なので、それと比較する事で

半径が解像度から1引いた数値の円が描かれます、端に1ピクセルの空きが自然とできています。

 

f:id:tktknkyo:20180401103617p:plain

ここから、中心の真っ白な部分の領域を調整できる部分を作っていきます

まず、下にある緑で囲ってある数値は、調整用パラメータで

0~1の数値によって、白い部分の領域を調整出来るように作ります。

 

まず、白い領域というのは、1以上の数値の部分です

つまり、全体に数値を加算すれば、白い部分が増えることになります。

今回の粒子は、中心からの距離の数値から描画しているので

例えば0.5を入力すれば、0.5以上の部分(中心からの距離が0.5以下)が全て1以上になり真っ白になります。(左上の加算)

ただし、全体に加算してしまうのは問題なので

先ほどの、周囲を抜いた粒子の形の部分と乗算する事で、0になる部分には、加算されないように調整。(左上の乗算)

 

f:id:tktknkyo:20180401104919p:plain

ただし、この時点でもまだ問題が残り

粒子の範囲全てに同じ数値を加算するので、境界線がかなり目立ち過ぎでしまいます。

なので、加算する数値を、中心からの距離に応じて、小さい数値にする必要があります。

 

上にある減算は、最初の加算と同じ数値を、減算しているので

基本となる粒子が出力されます。

 

右上の除算は、その減算した数値から

調整用の入力した数値をから、1引いた数値を割ります。

f:id:tktknkyo:20180401105559p:plain

 

この時、調整用の数値が0.4なら0.6で割り

0.5なら0.5、0.6なら0.4で除算します。

 

0.5で割る場合、単純に2倍の数値となります

全体を倍にする=0.5以上は1を超えるが

0.5の加算と違い、元の数値が0.1の部分は0.2までしか加算されないので

境界線がそこまで目立たなくなります

0.9の極端な数値の場合、反転した0.1で割るので、つまり10倍することになります

そうすると、中心から0.9までの距離=0.1以上の数値は全て1を超えますが

0.01などの小さい部分は10倍しても0.1になるので、境界線が目立たなくなります。

 

これにより、入力した数値までは1以上の数値で、尚且つ境界線が目立たなくなります。

 

f:id:tktknkyo:20180401110448p:plain

先ほどの計算で問題が出てしまうのは、除算で作ったので、数値が極端になっている事です。

ただし、1を超えてしまう部分は、後々面倒になったりするので、0~1の間に調整します。

とはいえ、処理的には単純に

不等式を使い0以下の数値は0に、1以上は1の定数を適用しているのみです。

 

f:id:tktknkyo:20180401111137p:plain

 

最後に、グラデーションの調整用の部分です、結構見にくいです...

まず、どのように調整出来るようにするのか?という部分で

グラデーションの調整は、累乗で調整するようにします。

ただし、累乗の綺麗なやり方が解らなかったので、乗算で作っています

数値は0~4を入れることを想定して

0~1と。1~4で別けます(1はこの部分で調整しないので、どちらでもいいです)

まず、0~1の数値で、0はシルエットのような塗りつぶしにするので

0の場合赤で1と囲った部分(最初の方に作った半径が解像度の半分-1の円を描いた部分です)

1の場合、赤で2と囲った部分(距離から描画した粒子)

この二つを、Lerpで直線補間させます

第3は、0~1までなら、入力した数値をそのまま取ってきます。

f:id:tktknkyo:20180401112019p:plain

1を超えた場合は、最後のIFでの判定によって、このLerp自体をとってこないようにしてあります。

赤の部分で、入力した数値が1を超えるかどうかの判定

超えていなければ、上のLerpを、超えていれば下のLerpを取得します。

 

f:id:tktknkyo:20180401112410p:plain

こちらが、1を超えた場合に使用されるLerpの内訳です。

Lerpの第3入力は、1を超える数値でも問題ないですが、今回は0~1の数値に収まるよにしています。

 

第1入力には、基本となる粒子を入れます。

第2入力に、基本となる粒子を、4乗した粒子を入れています(同じ部分の乗算を2回)

第3入力は

調整用のパラメータが1の時に0

4の時に1になるように調整する必要があるので

最初に1を引いて、0~3にした後に、3で割る事で0~1の数値に収めています。

(1より小さい場合は、こちらのLerpはそもそも使われないので、マイナスになっても問題ないです)

 

 

www.dropbox.com

 

参考用に、sbsファイルも上げておきます。

【Effekseer】Glowについてあれこれ

f:id:tktknkyo:20180316083322p:plain

今回はglowについてあれこれ

 

Glowは、擬似的に光っているように見せるための手段というか、パーツという感じです。

 

どうやって光らせて見せるのか?というのは

αを下げて、大きくしたパーティクルを、加算合成で重ねるのが非常にお手軽です。

 

f:id:tktknkyo:20180316083758g:plainf:id:tktknkyo:20180316083821g:plainf:id:tktknkyo:20180316083854g:plain

 

1枚目が、粒子が飛び散るエフェクト

2枚目は、1枚目に追加すぐglow

3枚目は、1枚目と2枚目を重ねたもの

 

この例は、非常に単純な例なので、もっときれいにしたい場合は、もっと凝って作る必要はあります。

色に関しては、メインとなる部分と、glowになる部分で、色を変えておくと、より発光感が強くなります

 

 

また、このような無数飛び散るものの場合、中心に大きく一つだけglowを追加する方法もあります。

f:id:tktknkyo:20180316084354g:plainf:id:tktknkyo:20180316084408g:plain

左は、追加したglow

右は、glowを適用したもの

中心に一つ大きいのを出す場合の利点として、この例の場合、全体に青っぽい色が追加されているので、全体的の色の変化が緩やかになるので、全体的に馴染んでみるようになります。

 

glowは、大きさや、αの数値によって、かなり見え方が変わってきます。

 

f:id:tktknkyo:20180316152338g:plainf:id:tktknkyo:20180316152253g:plain

 

左は、αを下げて、Glowの部分を大きくしたもの

右は、αを下げずにGlow部分を大きくしたもの

 

左はより光って見えてると思いますが、右側は少々白飛びしてしまっています。

 

Glowは基本的に薄く、大きくしたほうが綺麗に光って見えやすいです。

ただし、半透明部分が非常に重なるので、直接ゲームエンジンなどにに持っていく場合は、処理負担も掛かりやすいです。

f:id:tktknkyo:20180316153951p:plain

このような、連番画像として出力して使うのもありなのでは?と。

 

また、Glowを掛ける場合、元の色よりも、RGBは基本的に低めにしたほうが、綺麗に見えることが比較的に多いです。

今回の例では

R:116~140

G:168~216

B:255

に対して

R:16~48

G:32~96

B:255

でGlowを掛けています

今回の例では、青や水色の配色なので

Bをメインに、次点でGも入れています

また、白い部分が多少はないと、光って見えにくいので、Rも入れています

R要素を抜くと

f:id:tktknkyo:20180316154732g:plain

この様になります、これはこれで綺麗ですが、どうしても発光感は薄くなってしまいます。

 

メインとなる部分は、RGBを全部入れて白い部分を作ると、発光感は増しますが

Glowの部分は、RGB全てなくても綺麗に光って見える事も比較的に多いです。

f:id:tktknkyo:20180316155008g:plainf:id:tktknkyo:20180316155042g:plain

左は、Glowの部分のRを0に

右は、Glowの部分のRとGを0にした例です

アニメーションGIFで貼った都合上なのか、そこまで綺麗には見えてないですが

表現したいものによっては、かなり綺麗に写ったりするので、Glowの部分のRGBは色々変化させてみて試してみるのが良いのかなと。

 

 

テクスチャ自体にGlowっぽいのを追加したい場合は

よく使われるやり方では、ブラーを掛けてからスクリーンで重ねてあげるといいです

別々のパーティクルとして重ねると、どうしても描画負担が掛かってしまうので。

 

 

【Houdini】Houdiniで作ったモデルをUE4に持って行くまでの流れ

f:id:tktknkyo:20180308044058p:plain

最近、3Dモデルを作る手段の一つとして、Houdini勉強中なので

記事も書いていこうかな、という事で書いていきます

サムネイルの剣は、お試しで作ってみたものです。

マテリアルは、SubstanceDesignerで作ってます。

 

 

【Houdiniでの作業】

そこまで複雑なものではないので、モデリング自体の部分は省きます(殆ど面の押し出しで作ってます)

f:id:tktknkyo:20180308045148p:plain

Houdiniで作った形としては、こんな感じになっています。

 

f:id:tktknkyo:20180308060126p:plain

ノードはこんな感じです、殆ど面の押し出しです

 

これをUV展開しますが、今回は前と後ろの形が一緒なので

反面を切り取ってから、UV展開します

最後に、ミラーリングで複製します

f:id:tktknkyo:20180308060344p:plain

 

UVUnwrapを繋いで展開し

space+5キーを押して、展開した座標を表示します。

 

f:id:tktknkyo:20180308060615p:plain

こうすることで、自動展開され、座標が表示されます

Tキーを押して選択モードにすれば、面毎に座標を動かすこともできるので

少し座標を動かします

 

f:id:tktknkyo:20180308061556p:plain

展開したUVをある程度弄ってこうなりました

空白部分多くて勿体無い部分はありますが

細かい調整とかは、慣れてからやればいいのかなと

とりあえず、大きく4箇所に分けてます。(色が変わっているのは、ミラーリングして重なっているからです)

 

ここまで出来たら、FileからEXportでFBXで書き出します。

Houdiniでの作業は一旦ここまでです。

 

【SubstanceDesignerでの作業】

 

まずは、書き出したFBXを読み込みます

3Dビューに、ドラッグ&ドロップすれば読み込めます。

 

f:id:tktknkyo:20180308193011p:plain

 

2DビューにUVの座標が表示されていなければ、シーンから、UVを2Dビューで表示、にチェックを入れます。

 

f:id:tktknkyo:20180308193757p:plain

3Dビューで作ったマテリアルを表示させる場合

ノードを右クリックすると「3Dビューで表示」

があります、これでも表示させることは勿論できます。

f:id:tktknkyo:20180308194322p:plain

毎回このように、どこに適用するかの表示が出てしまうのが面倒であれば

 

f:id:tktknkyo:20180308195233p:plain

PBRUtilitiesの、このノードを使いましょう。

 

f:id:tktknkyo:20180308195345p:plain

このノードの入力は、必要に応じて変更する必要があります

今回は、ベースカラー、法線、ラフネス、メタリックを使います、UE4に持っていく前提なので、定番かなと。

 

そして、このノードに各要素を入れることで完成

ただ、今回の例ですと、大きく分けて4つにUV座標が別れていて

ベースカラー、法線、ラフネス、メタリックで、それぞれ16種類必要という事になります

ノードツリーがごちゃごちゃになるのを防ぐために、整理しやすくします

 

f:id:tktknkyo:20180308201042p:plain

ユーザーパッケージの部分で、このように大きく3種類に別けます

赤・最後に適用する場所

黄・各要素を作る場所

蒼・合成するためのノードを作る場所

 

f:id:tktknkyo:20180308201413p:plain

 

赤の最後に適用する部分はこんな感じになっています

各要素の黄色を、蒼のノードを使った合成しています

 

f:id:tktknkyo:20180308201730p:plain

黄色の部分の中身は大体こんな感じになっています

これは刃の部分で、刃の部分に該当する座標に、刃に適用する模様を入れています

ベースカラーだけでなく、法線、ラフネス、メタリックも適用して

最後に出力ノードを繋いでいます。

 

f:id:tktknkyo:20180308202013p:plain

蒼の部分の中身はこんな感じで

入力ノードを、ブレンドノードで合成して、出力ノードに繋げています

ただ、この部分は、数が増えたりしても対応出来るように、ノードを新しく作ったほうがいいかな?とは思いますが...

ただ、細かいのをやろうとすると、SPを使えば良いのかな?とも思う部分はありますね...

少なくとも、このやり方自体はそこまで賢いものではないのかなとは。

 

f:id:tktknkyo:20180308203643p:plain

そんな感じで、最終的に適用したのがこちらです。

マテリアルは一旦それぞれテクスチャで保存します。

テクスチャ保存までしたら、SubstanceDesignerでの作業は終了です。

 

【Unreal Engine4による作業】

 

UE4には、Houdiniで書き出したFBXと

SubstanceDesignerで書き出したテクスチャを持っていきます。

 

f:id:tktknkyo:20180308205553p:plain

マテリアルには、そのままテクスチャを適用してるだけですが(ノーマルマップが可笑しいのは気のせいです)

 

f:id:tktknkyo:20180308211024p:plain

 

最後のUE4への読み込みはおまけ程度になりましたが

UV展開から、読み込みまでは基本的にこんな感じになるのかな?と

 

SubstanceDesignerでのテクスチャ制作に関しては、もっと効率的にできそうなら

改めて記事上げてみてもいいかな?とは

 

UE4自体であれば、一部分だけ模様がスクロールで動く表現とか、そういうのもできそうなので、良さそうなのがあったらそっちもまた記事書いてみてもいいかもしれませんね。

 

 

 

 

【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に移行し始めました~

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

 

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

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

 

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

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

 

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