【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カーブで色々試して作ったのを貼っておきます。
youtubeに作ったエフェクト時々投稿していこうかな？と
youtubeでは作業配信は既にやってたりしてますが
作ったエフェクトの投稿も合わせてやっていこうかな？と
この動画はニコニコ動画に以前上げていたものでしたが
検索してみた所、作ったエフェクトの動画を上げるのは
ニコニコ動画より、youtubeの方が圧倒的に良さそうなので
今後、エフェクトの動画を上げる場合はyoutube確定になりそうですね
この理由としては
自作エフェクト系を調べようとして
の二つで検索してみたところ
youtubeは約300件と約1000件程ヒットしましたが
ニコニコ動画では、0件と、約10件のヒット数と
非常に差があるのが解ったので
RPGツクールという面からすると、アツマールなどもあるニコニコ動画の方が良いかな？というのは思ったのですが
ツクールはツクールですが、エフェクト自体はほぼEffekseerで作っているものなので
ただ、ゲーム自体の動画は、引き続きニコニコ動画の方が良いのかな？とは思ったりはしていますね
その辺をどうするかは、色々考えていきたいところです
最近ブログ放置しかけてる部分は確かにありますが
ちょっとした理由というのが、最近Houdiniの勉強を一番のメインでやっているのですよね
で、Houdiniの事で記事に書けるような事もまだ対して覚えてないので、記事書けることあるのかな？と
面白い発見したら、Houdiniの情報もボチボチ載せていこうかなとは思っています。
個人的にはHoudiniの次点だと、SubstanceDesignerの関数やFXMAP辺りの勉強もしたいのですよね。
youtube始めました
【SD】氷片のテクスチャを作る
今回は、この様な氷片のようなテクスチャを作っていきます
基本的な用途は、氷属性魔法のようなもので、無数に飛び散らせるイメージです。
かなり簡易的なので、かなりリアリティのある氷ではないので、ご了承ください。
大まかな構造としては、この様な形になっています。
では内部の構成を
【氷模様の制作】
模様部分のノード構成はこのようになっています
雲模様のノイズを色を変更した後に、ワープノードにて加工して氷の表面のような模様に仕上げます。
赤の部分
ノイズのこのノードで雲模様のノイズを作り
HSLで色を変化させます。
氷のメインの色となるので、青～水色くらいになるように
今回はこの様な設定にしました。
黄色の部分
HSLで色を変えたのをワープノードで加工します
加工するためのノイズは
このノードを使います
Distanceの数値で、模様の細かさが変わります
ここでは31に設定しています。
このあとに、更に形の加工はするので、ここでは細かい位がキレイに映りやすいと思います、個人的にこの部分は、後から結果みながら調整するのがベストなのかな？と思います。
次はこの部分です
ここもワープノードによる加工をしています
加工に使うグラデーションは
このノードを使用しています
これに、ブラーをかけてからワープノードによる加工をしています
ここで、なぜブラーを入れるのか？といいますと
これが比較画像で、左側がブラーなし
右側がブラー有り
角張っている模様ごとの、間が若干なめらかになります
また、ブラーがないと、模様の間の認知性が下がってしまうので
氷のような模様が見えなくなりやすいので、そのための処置です。
ちなみに、強度を５にすると、このようになり
節目が非常にわかりにくくなるので、強くしすぎず、強度は１程度がいいと思います。
これで、氷の模様部分は終了です。
【氷の形部分】
ノードはこのようになっています。結構強引な作り方ではあります、ご了承ください。
まずは一直線なこの部分から。
ノイズのこのノードにて、ノイズを作ります
そして、Distanceは極力低く、2～4程度に
その後、調整のこのノードを接続します、現段階では繋ぐだけでOKです。
その後、調整のこのノードを繋ぎます
Quantizeは２に設定します、これは、減色するノードで
２に設定すると、２色、つまり白or黒になり、中間の色が全て消えます。
ひとつ前のノードは、色の階層を動かすノードで、バーを動かせば、色が変わっていくのが解ると思います。
この状態で、最初のノイズの数値を弄ることで、形を作ります。
この場合、白黒が反転であったり、上下左右、突き出た感じになっていてもOKです
SDでのノイズは、基本的にシームレスなので、こうなっても一切問題がないので、そこは安心して大丈夫です。
その後、トランスフォーム2Dにて、中心に持ってきて、大きさも調整します。
赤の部分
調整のこのノードで白黒反転しています...が
黒背景に白の形を造る必要があるので
トランスフォーム2Dで作った時点で黒背景であれば必要ないです。
大まかな、形部分はこれで完成ですが、枠縁の部分は、これを加工して作っていきます。
黄色の部分
強度を１０程度でブラーをかけてぼかします
その後、ブレンドノードで減算します（接続部分はノードツリー参考にしてください）
こうする事で、元の形をした枠が作られます
このノードは、氷の模様と合成させます
青の部分
氷の模様がカラースケールなので、これもカラースケールに変更するために、グラデーションマップに接続し、カラースケールに変更します。
これにより、３つのパーツが完成したので、最後にそれらをかけ合わせて完了です。
【SD】水滴のテクスチャを作る
今回は、この水滴のようなテクスチャの作り方を
今回のノードはこのようになっています、そこまで複雑ではないです
【赤い部分】
ノイズのこのノードを元に使います
今回はランダムシードは７にしています
その後、ブレンドノードで乗算にします、不透明度が今回は0.62に
その後、トランスフォームのこのノードを繋げで極座標を掛けます
【黄色の部分】
ノイズこのノードを二つ作ります
細かさを別にするのでDistanceをそれぞれ別に設定します
今回はDustabceを10と14に設定し
それらをブレンドノードで最小（暗）します
【青の部分】
この二つをワープノードに繋げます
強度は今回0.59程度にしておきます
左から順に
まず左の二つは
パターンのこのノードを使います
Curveは両方とも1
上はScaleが0.81、Gradientが0.18
下はScaleが0.8、Gradientが0.03
それらを、ブレンドノードで減算します
そうすると、リング状になります
その後更にブレンドノードで、今度はオーバーレイします
これによりリングを少し加工します
外側がクッキリとすると思います
その後、GradientMapを繋げます
このGradientMapは、カラースケールに変換するのみなので
そのままでOKです
次はこの部分、ここで実際に最後の合成をしていきます
【赤の部分】
ワープノードで加工したものを
HSLに繋ぎます
HSLのパラメータはこんな感じに
ここで水滴の色の全体を決めます、基本的に水色～青色に
HSLに繋いだ時に、このようなものが出たと思いますが
これは、基本的に気にしなくても大丈夫です
原理としては、このHSLは、カラースケールしか読めないノードです
ですが、今回はグレースケールを直接繋いでいます
それでも繋げる理由は、この小さい緑のものが理由で
これは、GradientMapのノードが、小さく表示されている状態です
このノードにより、一回グレースケールを、カラースケールに変換する処理が間に挟まります（Dキーを押すことで、拡大したり、縮小したりする事ができます）
原理などは気にしなくてもいいですが、グレースケールとカラースケールで互換がなくても、基本的に自動で変換してくれるので、そこまで気にしなくても大丈夫です。
（ただし、ブレンドノードはやや例外）
そのごチャンネルのこのノードで、先ほど色を付けたのをRGBに
アルファは、画像の左下の紫で囲ってあるノードを選択します
【黄色の部分】
リングと、先程作った模様をブレンドノードで加算して終了です。
HSLの所の説明で、ブレンドノードは例外、と最後にある部分がありますが
あれの理由を
フォアグラウンドと、バックグラウンド
この二つは黄色とグレーの二つの色のピンになっています。
この二色は、グレースケールでも、カラースケールでも読み込める事を表します...が
グレースケールと、カラースケール
この二つを同時につなごうとすると、エラーを表す赤い破線が出てきます。
ブレンドノードは、カラースケール同士や、グレースケール同士であれば合成できますが
グレースケールとカラースケールを組み合わせる事は出来ません。
また、グレースケールをHSLに繋げたときに、カラースケールに自動変換してくれるような事もないので注意が必要です
そのような場合は、一度GradientMapで、カラースケールに変換してからつなげましょう。
リングの部分で、カラースケールにいちいち変換したのも、これが理由です。
