【SD】FX-MAPの反復ノードで不規則に複製する
今回はFX-MAPの反復ノードを
本来なら、クワドラントだけで模様作っていくのが基本かなとは思うのですが、ちょっと調べてみたところ、反復ノードが便利だなと思ったので。
まず、複製する元になるものを用意します（これは基本なんでもいいです、ノイズ系は解りにくいですが...）
それにFX-Mapに繋ぎます。
また、複製したいものを繋ぐ場合、下の方に接続してください、上の接続は、中央に出てしまいます。
FX-Mapノードを右クリックすると、FX-MAPを編集というのがあるので、これからFX-Mapの中に入っていきます。
最初に、クワドラントというのが出ています。
ここに、反復ノードというのを出して、繋げます（右側の入力に繋いでください）、また反復ノードを右クリックからルートとして設定を選択してください。（出力ノードのようなものです）
また、FX-Map内では、ノードは下から上に流れます
まず、クワドラントの方の設定で、パターンをInputImageに、これでFX-Mapに接続しているノードの情報を取ってきます
パターンオフセット、パターンサイズ、パターンを回転
この三つは、空の関数から、関数を作ります。
次に、反復ノードの、反復回数のバーを動かすと、同じ位置に複製されているのがわかると思います（グラデーションがかかってるものだと、白くなっていくと思います）
この反復ノードは接続している情報を、複製する様なノードです、この段階だと全く同じサイズ、位置、角度で複製をしています。
ただこの状態だと複製はしていても余り使い道が薄いので（グラデーションの調整には使えるといえば使えますが）
位置などにランダム性を追加します。
ただ、反復ノードではなく、クワドラントの方でランダム性は作っていきます。
先ほど空の関数で用意した、クワドラントのパターンオフセット、パターンサイズ、パターンを回転、の関数を作っていきます。
パターンオフセット
まず、Floatで1の定数に設定し、それをRandomノードに繋げて
最後にVectorFloat2に接続、VectorFloat2を出力ノードに設定します。
Randomノードは、0～入力した数値までのランダムな数値を返します（もし間違ってたらすみません...）なのでこの場合、入力が１の定数なので、0～1の数値が出力されます
Randomノードが二つあるのは、ノード毎に出力される乱数が変わるのでRandomノードが一つになると、XとYが同じ数値になってしまいます。
これにより、斜めの線のような形になります。
最後に、パターンオフセットは、XとY軸の情報、つまり二つの数値なのでVectorFloat2でXとYにそれぞれ数値を入れて、出力ノードに設定します。
パターンサイズ
パターンオフセットと殆ど一緒です、Randomに接続しているのが0.1なので、0～0.1のランダムな数値を、XとYに出力しています。
パターンを回転
角度は、１つの数字なので、VectorFloat2は必要ありません。
後は、反復ノードの反復回数を増やせば、ここの数値の数だけ大きさと、位置と角度がランダムに複製する事が出来たかと思います。
システム変数とかを使った作り方などは、色々良さそうなのが見つかったら記事書きたいと思います。
【Effekseer】簡単な風エフェクト
今回は、ちょっとした風エフェクトの作り方を
このようなテクスチャを使います。
テクスチャの作り方はここに
ノードツリーはこのようになっています
発生のノードで、ランダムな角度に発生させ
風のノードで回転させています。
角度は、XYZそれぞれ180の振幅で、完全なランダムにして、大きさも、発生ごとにサイズが変わるようにします。
発生数や、生成時間も、このノードで制御します。
風のノードはこのようになています。
寿命は、25～55の間に
回転は、Z軸のみの回転に、これと、親ノードの角度のランダムと合わさることで、ランダムな角度で出現してくるくる回ります。
拡大率は、風なので、段々大きくなるような処理に
色は、緑にちょっと青足したくらいの色に設定、配置は"固定"で、ビルボードだと回転してくれません。
あとは、画像読み込みに、加算合成にしてフェードインとフェードアウトします。
これで、ちょっとした風のようなエフェクトに出来上がると思います。
他のパーツと組み合わせたり、回転の速度などを変えたりして、色々試してみてください。
使用例としては、こんな感じです
風系の他、余韻や爆風などなど、この部分をメインに見せる他に、ちょっとした要素として付け加えたりする使い方も、中々便利かなと。
【Effekseer】擬似的な重力と反射
若干久しぶりな記事ですが、今回は、擬似的な重力や反射を
ノードの構成はこのようになっています。
全て親子構造となっています。
一番親の、重力のノードは単純に下向き（Y軸をマイナス）方向に動かしているだけです。
次に、拡散のノードは、ランダムに上方向に飛び散るようになっています
このノードのみは、このような動きになります。
具体的な数値的には、このようになっています。
生成方法を、球にして、角度を調整する事で、上方向へのランダムな方向に移動するようになります。
重力の処理としては、上方向に動かす力より、下方向に動かす力の方が強ければ、重力で落下するような動きになります。
ただし、ただ上方向と、下方向のみのばあい、単純な下方向にしか動かなくなります。
また、今回の場合、単純に下に向かうだけでなく
最初上に上がってから下に向いて動くようにします。
イメージとしては、破片が飛び散った後に重力で落下するようなものです。
なので、始めのフレームでは、上方向への力を強くして、段々下方向への力を増やすことで、進行方向が上向きから、下向きに変化するようになります。
これは、重力のノードの位置の詳細ですが。
始点速度が低速3、終点速度が高速3になっています。（拡散のノードは、両方とも等速です）
これにより、重力の方のみ、再生開始時は数値が低く、段々大きくなります。
そして、途中のフレームから、下方向への動きの方が強くなることで、途中から下方向へ落下するような動きになります。
続いて反射です
途中で、上方向に急に方向転換しているやつです。
原理的には、重力と似たようなものです、まず重力部分のみの場合、フレームの途中から下方向へ切り替わります。
適当に書いてしまった図だと、こんな感じです。
紫で囲ってある矢印がありますが、反射処理をする場合は、この矢印をなくして処理を作っています。
なくす方法としては、寿命のフレーム数でなくしてやります。
今回作った例の場合
上方向に動く動きは、45～75フレーム
一方、下方向に動く動きは15～35フレーム
よって、36～75フレームは、下方向への動きがなくなり、上方向のみの動きになります。
なので、下方向への動きが急になくなるので、進行方向が上向きに急に切り替えることで、反射のような表現を作っています。
反射処理は、そこまで具体的に使った例は無いので、使ってみた方がいたら、こっそり教えてもらえるとモチベが上がります！
重力処理は、結構使ったので、その例として一つ上げておきます。
公式さんにサンプルとして上げているものなので、興味があれば是非。
【SD】PixelProcessorノードで粒子を作る
SDには、PixelProcessorノードという、かなり細かい処理をしやすいノードがあるのですが
ややこしそうで触っていなかったのですが
色々調べて、自分なりに作ってみたので、一回記事として残しておきます。
今回は粒子ですが、単純な粒子だけであれば、polygon2のノードで作れるのですが、このノードでの作り方を知るためには良いのかなと。
今回のこのノード、単純に粒子を作るだけでなく、調整する機能も付けてあります。
動かせるようにするとこんな感じ
— moyasi@エフェクト垢 (@torisutamoyasi) 2018年3月31日
始めてのPPノードでここまでいった感じ
下のパラメータは0～1の数値は必要あるのか疑問なものの入れてあります pic.twitter.com/AT1JKjkRMH
どのような調整ができるかは、このツイートをご覧下さい。
今回の記事を書くのにあたって、この方の記事を参考にしています。
また、各関数の説明なども詳しくされているので。
この方の記事も見るのをオススメします。
まず、このノードには、＄POSという、座標の割合を出力する変数があります。
X軸とY軸それぞれ、座標の位置によって0～1の数値がそれぞれ割り振られます。
X軸のみ取り出すと、こんな感じのグラデーションになります。
Y軸であれば、上下でのグラデーションになります、またXとY軸のそれぞれの座標なので、Floatが二つ入っているFloat2となります。
上の坐像で、$POSから0.5を引き算していますが、引き算することで
-0.5～0.5の数値に変換します、こうすることでXとYが0の位置が、画像の中心に来るようになります。
引き算するのに、-0.5をAddの関数で足し算していますが、思考中に色々試してたのが理由なだけで、引き算のSubtracionでも問題ないはずです。
$posのほかに、$sizeという変数も使っています。
この変数は、X,Y軸の解像度を取得します
今回は2Kの解像度で作ったので、X,Y共に2048の定数が入っている状態です
$posで0～1の数値を出力し、0.5を引き算すると-0.5～0.5の範囲になり
解像度(今回は2048)を乗算する事で、-1024～1024の数値となります。
この処理は、後で必要になってきます。
解像度で乗算した後に、三平方の定理により、中心からの距離を取得します
これにより、各ピクセル毎に中心からの距離が入ります。
sizeで取得した解像度のX軸のみ取ります（X軸とY軸が同じなの前提ですが、Y軸でも問題ないです）
また、ここの数値は粒子の半径を取得します。
半径が解像度の半分の場合、端まで色が出てしまいます
エフェクトで使う場合、反対側に写ったりする仕様が多いので、上下左右１ピクセルは黒になるようにするので
半径は、（解像度の半分-1）とする事で、上下左右がそれぞれ黒になります。
最後に上下左右の部分を黒にする手段もありますが、円の端っこを切るので形が少し変形してしまいます。
青の部分の割り算は、解像度をそのまま割る事で、中心からの距離を-0.5～0.5の数値に戻しています（四隅は0.5超えていますが、そこは気にしないでください）
ここの割り算の部分で、中心からの距離が取得できているので、中心が黒く、外になるほど白くなっています。
このままでは可笑しいので、１から、割り算で距離を取得した数値を減算します。
これにより0～1の範囲の部分は反転しましたが、１を超えている部分があるので。その部分を切り取ります。
それが、下にある処理で"≧"の関数で、数値の大小を比較しています
第１と第２の入力の数値の比較をしています
第二に接続している情報は、解像度の半分から１を引いた数値なので、それと比較する事で
半径が解像度から１引いた数値の円が描かれます、端に１ピクセルの空きが自然とできています。
ここから、中心の真っ白な部分の領域を調整できる部分を作っていきます
まず、下にある緑で囲ってある数値は、調整用パラメータで
0～1の数値によって、白い部分の領域を調整出来るように作ります。
まず、白い領域というのは、１以上の数値の部分です
つまり、全体に数値を加算すれば、白い部分が増えることになります。
今回の粒子は、中心からの距離の数値から描画しているので
例えば0.5を入力すれば、0.5以上の部分（中心からの距離が0.5以下）が全て１以上になり真っ白になります。（左上の加算）
ただし、全体に加算してしまうのは問題なので
先ほどの、周囲を抜いた粒子の形の部分と乗算する事で、0になる部分には、加算されないように調整。（左上の乗算）
ただし、この時点でもまだ問題が残り
粒子の範囲全てに同じ数値を加算するので、境界線がかなり目立ち過ぎでしまいます。
なので、加算する数値を、中心からの距離に応じて、小さい数値にする必要があります。
上にある減算は、最初の加算と同じ数値を、減算しているので
基本となる粒子が出力されます。
右上の除算は、その減算した数値から
調整用の入力した数値をから、１引いた数値を割ります。
この時、調整用の数値が0.4なら0.6で割り
0.5なら0.5、0.6なら0.4で除算します。
0.5で割る場合、単純に２倍の数値となります
全体を倍にする＝0.5以上は1を超えるが
0.5の加算と違い、元の数値が0.1の部分は0.2までしか加算されないので
境界線がそこまで目立たなくなります
0.9の極端な数値の場合、反転した0.1で割るので、つまり10倍することになります
そうすると、中心から0.9までの距離＝0.1以上の数値は全て1を超えますが
0.01などの小さい部分は10倍しても0.1になるので、境界線が目立たなくなります。
これにより、入力した数値までは１以上の数値で、尚且つ境界線が目立たなくなります。
先ほどの計算で問題が出てしまうのは、除算で作ったので、数値が極端になっている事です。
ただし、１を超えてしまう部分は、後々面倒になったりするので、0～1の間に調整します。
とはいえ、処理的には単純に
不等式を使い0以下の数値は0に、１以上は1の定数を適用しているのみです。
最後に、グラデーションの調整用の部分です、結構見にくいです...
まず、どのように調整出来るようにするのか？という部分で
グラデーションの調整は、累乗で調整するようにします。
ただし、累乗の綺麗なやり方が解らなかったので、乗算で作っています
数値は0～4を入れることを想定して
0～1と。1～4で別けます（１はこの部分で調整しないので、どちらでもいいです）
まず、0～1の数値で、0はシルエットのような塗りつぶしにするので
0の場合赤で１と囲った部分（最初の方に作った半径が解像度の半分-1の円を描いた部分です）
1の場合、赤で２と囲った部分（距離から描画した粒子）
この二つを、Lerpで直線補間させます
第３は、0～1までなら、入力した数値をそのまま取ってきます。
１を超えた場合は、最後のIFでの判定によって、このLerp自体をとってこないようにしてあります。
赤の部分で、入力した数値が1を超えるかどうかの判定
超えていなければ、上のLerpを、超えていれば下のLerpを取得します。
こちらが、１を超えた場合に使用されるLerpの内訳です。
Lerpの第３入力は、１を超える数値でも問題ないですが、今回は0～1の数値に収まるよにしています。
第１入力には、基本となる粒子を入れます。
第２入力に、基本となる粒子を、４乗した粒子を入れています（同じ部分の乗算を２回）
第３入力は
調整用のパラメータが1の時に0
4の時に1になるように調整する必要があるので
最初に１を引いて、0～3にした後に、3で割る事で0～1の数値に収めています。
（1より小さい場合は、こちらのLerpはそもそも使われないので、マイナスになっても問題ないです）
参考用に、sbsファイルも上げておきます。
【Effekseer】Glowについてあれこれ
今回はglowについてあれこれ
Glowは、擬似的に光っているように見せるための手段というか、パーツという感じです。
どうやって光らせて見せるのか？というのは
αを下げて、大きくしたパーティクルを、加算合成で重ねるのが非常にお手軽です。
１枚目が、粒子が飛び散るエフェクト
２枚目は、１枚目に追加すぐglow
３枚目は、１枚目と２枚目を重ねたもの
この例は、非常に単純な例なので、もっときれいにしたい場合は、もっと凝って作る必要はあります。
色に関しては、メインとなる部分と、glowになる部分で、色を変えておくと、より発光感が強くなります
また、このような無数飛び散るものの場合、中心に大きく一つだけglowを追加する方法もあります。
左は、追加したglow
右は、glowを適用したもの
中心に一つ大きいのを出す場合の利点として、この例の場合、全体に青っぽい色が追加されているので、全体的の色の変化が緩やかになるので、全体的に馴染んでみるようになります。
glowは、大きさや、αの数値によって、かなり見え方が変わってきます。
左は、αを下げて、Glowの部分を大きくしたもの
右は、αを下げずにGlow部分を大きくしたもの
左はより光って見えてると思いますが、右側は少々白飛びしてしまっています。
Glowは基本的に薄く、大きくしたほうが綺麗に光って見えやすいです。
ただし、半透明部分が非常に重なるので、直接ゲームエンジンなどにに持っていく場合は、処理負担も掛かりやすいです。
このような、連番画像として出力して使うのもありなのでは？と。
また、Glowを掛ける場合、元の色よりも、RGBは基本的に低めにしたほうが、綺麗に見えることが比較的に多いです。
今回の例では
R：116～140
G：168～216
B：255
に対して
R：16～48
G：32～96
B：255
でGlowを掛けています
今回の例では、青や水色の配色なので
Bをメインに、次点でGも入れています
また、白い部分が多少はないと、光って見えにくいので、Rも入れています
R要素を抜くと
この様になります、これはこれで綺麗ですが、どうしても発光感は薄くなってしまいます。
メインとなる部分は、RGBを全部入れて白い部分を作ると、発光感は増しますが
Glowの部分は、RGB全てなくても綺麗に光って見える事も比較的に多いです。
左は、Glowの部分のRを0に
右は、Glowの部分のRとGを0にした例です
アニメーションGIFで貼った都合上なのか、そこまで綺麗には見えてないですが
表現したいものによっては、かなり綺麗に写ったりするので、Glowの部分のRGBは色々変化させてみて試してみるのが良いのかなと。
テクスチャ自体にGlowっぽいのを追加したい場合は
よく使われるやり方では、ブラーを掛けてからスクリーンで重ねてあげるといいです
別々のパーティクルとして重ねると、どうしても描画負担が掛かってしまうので。
【Houdini】Houdiniで作ったモデルをUE4に持って行くまでの流れ
最近、3Dモデルを作る手段の一つとして、Houdini勉強中なので
記事も書いていこうかな、という事で書いていきます
サムネイルの剣は、お試しで作ってみたものです。
マテリアルは、SubstanceDesignerで作ってます。
【Houdiniでの作業】
そこまで複雑なものではないので、モデリング自体の部分は省きます（殆ど面の押し出しで作ってます）
Houdiniで作った形としては、こんな感じになっています。
ノードはこんな感じです、殆ど面の押し出しです
これをUV展開しますが、今回は前と後ろの形が一緒なので
反面を切り取ってから、UV展開します
最後に、ミラーリングで複製します
UVUnwrapを繋いで展開し
space+5キーを押して、展開した座標を表示します。
こうすることで、自動展開され、座標が表示されます
Tキーを押して選択モードにすれば、面毎に座標を動かすこともできるので
少し座標を動かします
展開したUVをある程度弄ってこうなりました
空白部分多くて勿体無い部分はありますが
細かい調整とかは、慣れてからやればいいのかなと
とりあえず、大きく４箇所に分けてます。（色が変わっているのは、ミラーリングして重なっているからです）
ここまで出来たら、FileからEXportでFBXで書き出します。
Houdiniでの作業は一旦ここまでです。
【SubstanceDesignerでの作業】
まずは、書き出したFBXを読み込みます
３Dビューに、ドラッグ＆ドロップすれば読み込めます。
２DビューにUVの座標が表示されていなければ、シーンから、UVを2Dビューで表示、にチェックを入れます。
３Ｄビューで作ったマテリアルを表示させる場合
ノードを右クリックすると「３Dビューで表示」
があります、これでも表示させることは勿論できます。
毎回このように、どこに適用するかの表示が出てしまうのが面倒であれば
PBRUtilitiesの、このノードを使いましょう。
このノードの入力は、必要に応じて変更する必要があります
今回は、ベースカラー、法線、ラフネス、メタリックを使います、UE4に持っていく前提なので、定番かなと。
そして、このノードに各要素を入れることで完成
ただ、今回の例ですと、大きく分けて４つにUV座標が別れていて
ベースカラー、法線、ラフネス、メタリックで、それぞれ16種類必要という事になります
ノードツリーがごちゃごちゃになるのを防ぐために、整理しやすくします
ユーザーパッケージの部分で、このように大きく３種類に別けます
赤・最後に適用する場所
黄・各要素を作る場所
蒼・合成するためのノードを作る場所
赤の最後に適用する部分はこんな感じになっています
各要素の黄色を、蒼のノードを使った合成しています
黄色の部分の中身は大体こんな感じになっています
これは刃の部分で、刃の部分に該当する座標に、刃に適用する模様を入れています
ベースカラーだけでなく、法線、ラフネス、メタリックも適用して
最後に出力ノードを繋いでいます。
蒼の部分の中身はこんな感じで
入力ノードを、ブレンドノードで合成して、出力ノードに繋げています
ただ、この部分は、数が増えたりしても対応出来るように、ノードを新しく作ったほうがいいかな？とは思いますが...
ただ、細かいのをやろうとすると、SPを使えば良いのかな？とも思う部分はありますね...
少なくとも、このやり方自体はそこまで賢いものではないのかなとは。
そんな感じで、最終的に適用したのがこちらです。
マテリアルは一旦それぞれテクスチャで保存します。
テクスチャ保存までしたら、SubstanceDesignerでの作業は終了です。
【Unreal Engine4による作業】
UE4には、Houdiniで書き出したFBXと
SubstanceDesignerで書き出したテクスチャを持っていきます。
マテリアルには、そのままテクスチャを適用してるだけですが（ノーマルマップが可笑しいのは気のせいです）
最後のUE4への読み込みはおまけ程度になりましたが
UV展開から、読み込みまでは基本的にこんな感じになるのかな？と
SubstanceDesignerでのテクスチャ制作に関しては、もっと効率的にできそうなら
改めて記事上げてみてもいいかな？とは
UE4自体であれば、一部分だけ模様がスクロールで動く表現とか、そういうのもできそうなので、良さそうなのがあったらそっちもまた記事書いてみてもいいかもしれませんね。
【Effekseer】Fカーブあれこれ
今回は、Effekseerの機能であるFカーブについて色々と
【Fカーブとは】
グラフ上で、数値を自由に設定する事が出来る項目のようなものです。
サムネイルのような、複雑な動きを作ったりするのには重宝しますが
設定が若干面倒臭いという欠点もあります。
【イージングとの兼ね合い】
エフェクトには、動きの緩急をつけたほうが見栄えが良くなる
という事が非常に多いので
そのようなのを作る場合だと、Fカーブは非常に重要そうです...が
Effekseerの場合、イージングという機能がありまして
こちらが非常に手軽に緩急をつけやすいので
緩急をつけるだけであれば、基本的にイージングで済む場合が多いです。
イージングの設定の場合、始点と終点を設定します。
始点から終点までは、パーティクルの生存時間を掛けて移動します
なので、生存時間への影響力が非常に強いです
使い勝手が悪い部分もあるにはありますが、生存時間だけで制御出来る事でもありますので
調整が比較的にしやすい利点でもあります。
また、始点速度と終点速度により、動きの緩急を非常に簡単につける事が可能なので、基本的に緩急をつけたいだけであればイージングで問題ない場合がかなり多いかなと。
【Fカーブを使いやすい場面について】
では、イージングではなく、Fカーブが便利になってくる場面はどうなるのか？という部分が出てきます、自分の中で、ここはFカーブを使ったほうが良いのでは？と思った要素をいくつか挙げていきたいと思います。
（但し、イージングの機能が強化されれば、下記の例でもイージングのみで可能になる可能性はあります）
この例ですと、0Fから30Fまでは一切動かないです（50Fから100Fも動きがないです）
イージングで設定する場合、始まってから、常に動き続けるので
このような動きを付けることが現在できません。
生成開始時間を遅らせればいいのでは？
生存時間を短くすれば良いのでは？
こう思う方も当然居ると思いますが
ノードの親子階層を使う場合
や
このFカーブで位置を制御している場合、拡大自体は0F目から拡大していく要素の場合
発生を遅らせる事ではやりにくいと思われるので、この場合はFカーブを使うと便利なのでは？と。
例としては、このような動きです。
この例の場合、動く→止まる→動く
という動作を実装する場合です
このような動きは、あまり使う機会自体が、あまりなさそうに思われるかもしれませんが
使い方が分かると、面白い動きになるのかな？と個人的には思います
動きとしては、こんな感じになります。
このような、行って、戻ってくるような動きです
個人的には、非常によく使うパターンだったりします。
位置を動かすというよりも、色で使う場合が多いですが
フェードイン、フェードアウト専用の設定自体は確かにありますが
細かく作りたいという場合には、Fカーブでαを弄ることが多々あります。
動きはこんな感じになります
主に色で使う事が多そうなこのような動きなど
始めはRGBそれぞれ255で
終わりがRGBそれぞれ0ですが
RGBでそれぞれ変化の仕方を変えるなどができます。
また、色の場合、Fカーブの上部分にそのフレームでの色が表示されるのも中々便利だったりします。
このような作り方であれば、例えば炎を作る場合
最初は黄色～赤色の炎で、後半はずっと黒い煙が上がっている
という色の変化を作りやすいです。
色の変化はこんな感じになります。
【Fカーブの設定関係】
Fカーブは設定若干面倒な部分もあるので、自分が普段やってる方法を
まず、Fカーブの設定を入れる場合
グラフ上で、キーボードのX,Y,Z,R,G,B,Aを押す必要があります（それぞれ座標や色のキーを）
そしたら、ここでフレーム数と数値を直接入力します
ドラッグで動かすこともできますが、自分は基本的に数値は直接入力しています
Fカーブには、このような湾曲を作るための仕様もあり、こちらも直接入力などもできるのですが、自分自身は殆ど使う事はないです。
非常にややこしくなってしまいがちな事もありますので...
今回のFカーブの機能、設定がややこしい部分はありますが、細かい動きを作ったりしやすいので、使い方が分かると非常に便利だと思います。
折角なので、以前Fカーブで色々試して作ったのを貼っておきます。
