moyasiエフェクト館

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


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

【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

 

 

 

 

【UE4】エフェクト版のMID(マテリアルインスタンスダイナミック)

f:id:tktknkyo:20180104215922p:plain

タイトル通り、エフェクト版のMIDについて(まだ不完全な部分もあります、ご了承ください)

【MIDについて】

そもそもMID(マテリアルインスタンスダイナミック)というのは

ゲーム中に動的に、マテリアル内のパラメータを変更する事が出来るというもの。

f:id:tktknkyo:20180104220237p:plain

考え方はDynamicParameterと一緒ですが

この変更をBPで行うというもの。

パラメータ数の制限などがなく、BPで数値を制御できるので、自由度が増します

ただし、設定が割と面倒です。

 

【マテリアル側の設定】

f:id:tktknkyo:20180104222023p:plain

まず、P_Fireを開き、そこに使われているマテリアルに変更を加えます

エミッタのRequiredをクリックしたあと、Materialに入っているマテリアルをダブルクリックして、マテリアルエディタを開きます。

f:id:tktknkyo:20180104221948p:plain

開いたら、オパシティに繋いである部分を、「Multply」に繋いで

Bには「Scalar parameter」(OPとなるノードです)

を接続して

f:id:tktknkyo:20180104222324p:plain

ParameterNameをOP(ここは、BPで数値いじる際に使うので、解りやすい名前を)

DefaultValueを1に

 

この変更を、ほかのエミッタでも行います

 

f:id:tktknkyo:20180104220438p:plain

今回は、スターターコンテンツにある、P_Fireを使い

条件を満たしたときに、色が透明になっていって消える処理を作ります。

 

f:id:tktknkyo:20180104220552p:plain

BPのイベントグラフではこのようになっています。

 

f:id:tktknkyo:20180104220656p:plain

また、今回はDistortionというエミッターは無効にしておいてください(マテリアルの作りが特殊だったので)

 

 

 

f:id:tktknkyo:20180104220828p:plain

まず、ActorクラスのBPを作り

その中に、P_Fireと、判定用のboxCollisionを追加します(BoxCollsionは、判定用のみなので、ほかの手段でも問題ないです)

 

【BPによる設定】

 

今回は、炎に当たった時に、炎が消えていく処理にしたいので

f:id:tktknkyo:20180104221044p:plain

炎より大きめのboxCollsionにします、そして、接触したら判定されるように

OnComponentBiginOverlapを追加します

 

f:id:tktknkyo:20180104221312p:plain

この判定用から、Create Dynamic Material Instance

のノードを順番に繋げます

今回のP_Fireは、エミッターを無効化したのを除けば、エレメントが5種類あるので

同じノードを複製して。

f:id:tktknkyo:20180104221525p:plain

Element Indexを0~4の順番に設定して、それらを5つ繋げます

ターゲットには、コンポーネントのP_Fire

SourceMaterialには、そのエレメントに登録してあるマテリアルを入れます。

f:id:tktknkyo:20180104221652p:plain

ドラッグ&ドロップしようとすると、このように表示されますが、きちんと登録されます。

 

f:id:tktknkyo:20180104222606p:plain

 

その後、タイムラインノードを追加し、トラックを追加します。

 

f:id:tktknkyo:20180104222854p:plain

F+という、左上のアイコンクリックしてトラックを追加

その後、黄色の部分で時間を指定して、カーブを作ります

このカーブの秒数は任意で構いませんが、今回は2秒かけて1→0になるようにしました。

 

これにより、タイムラインにfloat型の出力ピンが出てくるはずです。

 

f:id:tktknkyo:20180104223230p:plain

次に必要なのは、実際に数値をマテリアル側に渡すノードである、この「Set Scalar Parameter Value」というノード

アンダーラインを引いていますが、対象が「Material Instance Dynamic」(MID)です

そして、コンポーネントにMIDは入っていません

f:id:tktknkyo:20180104223735p:plain

 

この状態で、検索すると、ノードは確かに出てきますが

 

f:id:tktknkyo:20180104223825p:plain

違うノードが出てきます(これは、マテリアルコレクションに入れてある数値を変更するノード)

 

f:id:tktknkyo:20180104224013p:plain

なので、このノードを出す方法は

このように、MIDの情報が入っている場所から引っ張ってください。

 

f:id:tktknkyo:20180104224237p:plain

また、変数として、MIDを新たに作って、Getしてこれば同じノードを出すことも可能ですが。

今回の場合は、既にあるノードから作ったほうが楽です。

 

f:id:tktknkyo:20180104224650p:plain

この、新しく作ったノードに「Create Dynamic Material Instance」ノードのRetum Valueを全て引っ張ってきます

ParameterNameは、マテリアルに入れた、ScalarParameterの名前を入れます。

 

この状態で、BoxCollisionに触れると、だんだん透明になっていくのが分かると思います。

 

f:id:tktknkyo:20180104224959p:plain

このオレンジの部分が見えていますが、これはカスケードにある、lightの影響です

あくまで、マテリアル側の数値にしか変更を加えてないので、この様な例も残ってしまいます。

 

 

これで、できたとなりましたが、今のままでは出来てもやや、というかかなり問題が

エレメントの順番が変わると、設定し直さないといけない

あまり、効率的とは言えないと思われます。

f:id:tktknkyo:20180104230437p:plain

マテリアルを直接指定するのではなく

P_Fireから、直接マテリアルの情報を持ってくる方法、これであれば

順番が変わっても対処は必要無しに。

 

もっと効率化の方法ありそうなので、色々試したのですが、中々上手くは行ってくれませんでした。

自分はまだまだBPはそこまで詳しくないのもありますが...

 

 

 

 

 

 

 

 

 

 

 

【Effekseer】UV固定の利用

f:id:tktknkyo:20180104070413p:plain

今回は、Effekseerの機能である、UV関係を

Effekseerでは、「描画共通」にある、UVという項目から設定します

f:id:tktknkyo:20180104070922p:plain

UVには、「標準」「固定」「アニメーション」「スクロール」「Fカーブ」

この5種類があります。

今回、なぜタイトルに「UV"固定"」なのかといいますと、恐らく最も用途が解りにくいと思ったのが理由です。

【UV固定あれこれ】

UVは、画像の座標と考えたらいいと思います。

例えば、解像度が256*256の画像を読み込んだ場合、UV固定にして大きさを256*256にすると、そのまま表示されます。

f:id:tktknkyo:20180104071339p:plain

これは、256*256解像度の

●状の画像を、256*128に設定したもの

256*256の画像の中から、256*128の部分のみ描画されるので

下半分が切り抜かれた形になります。

f:id:tktknkyo:20180104071734g:plain

この機能を使うことで、元の画像を弄ることなく、この様なレーザーに使えそうな描画などが可能になります。

UV固定は、元の画像を多少加工する様な処理になるので、元の画像を加工する事で同じことは可能です。

 

f:id:tktknkyo:20180104072241p:plain

こちらは、外側という項目を、繰り返しに設定し

X1024Y256に設定した場合です

1024は、256の4倍で、外側が繰り返されるので、4つに表示されます、これがいわゆるタイリング処理です。

発生数を誤魔化したりにも使えます。

 

f:id:tktknkyo:20180104072515p:plain

また、外側をクランプに変更すると、座標がXYZ0でも、中心位置からずれます

これは、繰り返しから、一番左のみ表示される為です。

 

f:id:tktknkyo:20180104072713g:plain

中心位置からずれるので、この状態で、Z軸回転ビルボードにして、Z軸を回転させると

回るだけでなく、動くようになります。

処理としては、中心点を軸に回っているだけになりますが

f:id:tktknkyo:20180104072928p:plain

UV固定によって、画像の白い部分が端にいったので

中心で回転させているだけでも、このように動いているように見えます。

 

f:id:tktknkyo:20180104074155g:plain

こういうのを1つのノードだけで作りたいときには、便利になるのかなと。

ただ、基本的に画像を加工しているだけなので、画像自体を加工すれば同じことができるのと。

UV固定で空白を開ける場合は、親子階層でも基本的に同じことはできるので

固定を使わないと出来ないことは、まずないのかなと。

 

【UV固定のタイリング】

 

UV固定を使う場合は、恐らくタイリングさせる場合の方が多いと思います。

f:id:tktknkyo:20180104074725p:plain

例えば、この様な縦横シームレスなテクスチャがあると仮定いします

この画像は、元々の解像度が高めですが

画像の解像度が高いと、画像の容量もかなり大きくなってしまいます。

なので、解像度が低くても誤魔化す為に主に使われます。

f:id:tktknkyo:20180104074945p:plain

こちらが、縦横2つづつ並べたもの

元の画像は一緒ですが

模様が細かくなっているのが分かると思います。

こうする事で、元の画像の解像度が低くても、誤魔化すことができます

f:id:tktknkyo:20180104075119p:plain

ただし、タイリングをしすぎると、繰り返しというのが見えやすいので、そこには注意が必要です。

 

【UVスクロール】

 

UV関係では比較的に使われやすいと思われるUVスクロール

UVスクロールとは、簡単に言えば画像の座標を常にスクロール(動かす)します。

 

f:id:tktknkyo:20180104075533g:plain

シームレスな画像であれば、このUVスクロールをかなり有効に発揮できます

ただ、これをみても、エフェクトにどう活かすのか?というのは

使ったことが無い方には、解りにくいと思います。

 

f:id:tktknkyo:20180104075727g:plain

これは、上のただ下から上にスクロールしている描画を

描画から、リングに変更し、頂点数を255に変更したものです。

 

f:id:tktknkyo:20180104075907g:plain

これは更に、内輪を0に変更したものです。

単純にスクロールしている状態では、そのままでは使い道なさそうですが

このように、リングと併用すれば、そのままでも使えそうな描画になります。

UVスクロールは、基本的に3Dモデルと併用する事で、綺麗な描画にする事が可能です。

リング機能は、簡易的な3Dモデルを作るもの、と考えてもらえばOKです。

 

【UVアニメーション】

これは、専用の画像が必要で

f:id:tktknkyo:20180104080812p:plain

このブログで配布している素材の一つである、この画像を使った場合

f:id:tktknkyo:20180104080908g:plain

この様な表示になります。

設定項目が若干ややこしいです。

f:id:tktknkyo:20180104081002p:plain

始点は、開始を始める位置ですが、変わった作りでなければ基本は不要かと

大きさは、画像全体の大きさではなく、1セルの大きさです

今回の例では、横5マス縦4マスで、画像全体のお起きが960*768なので

960/5=192

768/4=192

となるので、XとYに192と入力

1枚辺の時間は、何Fで次のコマに移動するかを設定

無限という項目にチェックを入れると、同じコマで固定されます。

UVをアニメーションさせる用途には使えませんが。

各コマ毎に配置した画像をランダムに再生したい場合などに使えます。

横方向と、縦方向はそのままです。

ループは、1週再生終わったあとにどうするかを設定します。

最初のフレームと最後のフレームでループしている場合に使えます。

開始枚数は、最初の再生を、どのコマから発生させるかを設定するもので

少々使いにくいですが、最初のフレームと最後のフレームでループさせる場合などに。

 

UVの標準は、読み込んだ画像をそのまま表示

UVのFカーブは、UV座標版のFカーブです。

 

 

 

 

 

【SD】ユーザーパッケージで効率化

f:id:tktknkyo:20180103194935p:plain

※今回は具体的な作り方でもなく、初歩的な事だと思うのでご了承ください

【そもそもユーザーパッケージについて】

SD既に使ってる方は、大体知ってそうな内容かとは思いますが、自分は最近知ったことなので、知らない人も居るのかもしれない、と思ったのでちょっと纏めます

 

f:id:tktknkyo:20180103195423p:plain

SDで新規でsbsファイルを作ったりすると、最初に左側のユーザーパッケージが作られます。

(厳密には、新規で作ったときで、sbsファイルで保存する前に作られます)

 

f:id:tktknkyo:20180103195736p:plain

そして、この▼をクリックすると、その下の(今の状態ではtestというファイル)が出たり隠れたりします。

この段階では何も意味をなしません。

 

f:id:tktknkyo:20180103195913p:plain

 

ここで、出力というノードを、繋げると

ユーザーパッケージの部分に、outputという名前のが出てきます。

f:id:tktknkyo:20180103200137p:plain

デフォルトではoutputという名前ですが、このノードには名前を入力する項目があり

ここに名前を入力すると、ノードに表示される名前と、ユーザーパッケージの部分に出てくる名前が連動します。

なので、ここには自分の解りやすい名前を入力しましょう。

 

【利用の仕方】

 

f:id:tktknkyo:20180103201340p:plain

この、testから、グラフ上にドラッグ&ドロップします。

 

f:id:tktknkyo:20180103201458p:plain

そうすると、outputで指定した名前の、ノードが出てきます。

ただし、ノードを配置する場合は、同じ場所では配置できないので注意。

 

ここで、outputに指定した名前がaaaaaなのに対して

ノードの名前がtestになっています。

f:id:tktknkyo:20180103201947p:plain

そしてaaaaaという名前は、出力ピン側に付いています。

 

この理由は出力ノードを複数配置すると解りやすいです。

f:id:tktknkyo:20180103202245p:plain

出力ノードを二つ配置すると

 

f:id:tktknkyo:20180103202343p:plain

出力のピンが二つになります、これは、ピンによって出力される情報が

それぞれの出力ノードの情報になります。

 

これはこれで需要ありますが、別々のノードで出したいという場合があると思います。

これのノードを別々にする為の機能というのも存在していて。

 

 

f:id:tktknkyo:20180103202750p:plain

 

出力ノードを含む、そのノードを構成しているノードを、すべて選択して(ドラッグで複数指定できます)右クリックをするとメニューが出てきます。

ここで赤枠で囲った部分をクリックします(左の()内は、選択されたノード数です)

f:id:tktknkyo:20180103203016p:plain

そうすると、この様な画面が出てきます、ここで設定した名前が

f:id:tktknkyo:20180103203144p:plainf:id:tktknkyo:20180103203212p:plain

この二箇所に表示されます(なお、ここで作られたものは別途sbsファイルにはならず、一つのsbsファイルの中に複数存在できるので、sbsファイル数が増えるという心配はないです)

 

こうすることで、出力ノード毎、別々のノードにしつつ、sbsファイル数も抑えることが可能です。

 

これによって作ったデータを出力ノードに繋げておくだけで、簡単に再利用が可能。

一手間加えることで、ノードを別々にする事も可能です。

 

 

f:id:tktknkyo:20180103203902p:plain

これにより、作ったsbsファイルを同時に開いておくことで

すぐに再利用する事が可能になります。

 

【パラメータ化】

正式名でないかもしれませんが、このパラメータ化というのは

普段使うようなノードにある、数値を弄れたりする部分です、一部のノードは、設定できないものもありますが

大体数のノードは、数値などを弄れる事ができますが。

この手段で出したノードは、数値を調整することができません、なので、数値を調整する為の手段を。

 

f:id:tktknkyo:20180103205112p:plain

まず、パラメータを調整したいノードを選択した後に

パラメータのエクスポーズ」を選択します。

f:id:tktknkyo:20180103205244p:plain

そうすると、この様な画面が出てくるので

パラメータしたい項目の左にチェックを入れると

右側に名前が出てきます。

この名前が、調整する際に表示される名前になるので、変更をしたい場合には、名前の上でダブルクリックして名前を変えることができます。

また、ここの名前が同じには出来ないので、被らないように、名前を設定する必要があります。

f:id:tktknkyo:20180103205608p:plain

こうすることで、設定したパラメータを他のsbsファイルに入れた時にも、設定出来るようになります。

 

ただし、このパラメータ化する際には注意が必要です。

f:id:tktknkyo:20180103205815p:plain

理由としては、パラメータ化をしてしまうと、このように編集ができなくなる為です。

これを解除する方法は

f:id:tktknkyo:20180103210313p:plain

パラメータのエクスポーズから、ここのチェックを外してOKを押すと、編集できるようにはなります。

f:id:tktknkyo:20180103210459p:plain

OKを押すと、この様な画面が出てきて、OKを押すと解除されますが

設定したパラメータがデフォルトに戻ります

f:id:tktknkyo:20180103210730p:plain

ここの、デフォルト値にリセットでも、パラメータ化は解除されますが

名前の通り、デフォルトに戻ります。

 

なので、パラメータ化する場合は

 

 

 

f:id:tktknkyo:20180103202750p:plain

この設定で、一旦分けてからやると便利です。

 

 

【SD】斬撃に使えるテクスチャを作ろう

f:id:tktknkyo:20180101173147p:plain

今回は、SubstanceDesignerを使ったテクスチャ制作を

具体例は、斬撃ブラーと呼ばれる元になるような、この様なテクスチャですね

 

f:id:tktknkyo:20180101173351p:plain

エフェクト部分の構成自体は省きますが

この様なエフェクトの元となります

ただ、テクスチャ1枚だけ作るのではなく、今回はUE4に入れる前提として

大まかな形となるマスク用テクスチャ

鋭い筋の形になるノイズ用テクスチャ

先端の一部を光らせる発光用テクスチャ

複数の色を与えるノイズテクスチャ

この4種類となります

 

f:id:tktknkyo:20180101175811p:plain

最終的な構造としては、こんな感じ、色が可笑しいと思われると思いますが

これは、強度を自由に調整出来るように組んでおくことで

斬撃のメインの色の中に、ひっそりとカラフルな色を入れる事で、見栄えを良くするためです。

どの位混ぜるかは、エフェクトを作る方のお好みで。

 

 

f:id:tktknkyo:20180101180137p:plain

まずは基本となるOP(オパシティ)の部分

この部分で、斬撃の大まかな形が決まります

 

f:id:tktknkyo:20180101180401p:plain

まずはリング部分を作ります

 

f:id:tktknkyo:20180101180453p:plain

パターンのこのノードでのCurveを1にすると完全な丸になるので

その後、Gradientを調整して、丸を二つ作ります

今回は、0.05と0.4

その後、この二つをブレンドノードで繋いで、減算します

中心がくり抜かれてリングになります。

 

f:id:tktknkyo:20180101180721p:plain

 

 

f:id:tktknkyo:20180101180749p:plain

パターンのこのノードでグラデーションを作ります
Rotationの項目があるので、90°と180°にして、向きの違うグラデーションを作り

ブレンドノードの乗算で合成します。

 

f:id:tktknkyo:20180101180945p:plain

トランスフォームにあるこのノードにて、丸同士のブレンドで作ったリングを加工することで、グラデーションになります。

そこでできた二つのグラデーションをブレンドノードの乗算で合成します。

 

f:id:tktknkyo:20180101181308p:plain

 

赤い部分は最初に作ったリングと同じ容量で、先程より細いリングを作り

リングを加工してグラデーションにします。

 

黄色部分は、先ほどの加工したグラデーションをトランスフォーム2Dで

幅を半分にして、タイリングを切る、その後オフセットで左側に寄せます

 

青の部分は、両方ブレンドノードで、左上の方は乗算

右下の方は加算にしています。

 

f:id:tktknkyo:20180101181614p:plain

先ほどできた形では、クッキリしすぎなので

ここでブラーノードを繋いで、ぼかします、ブラーの強度は10です

 

f:id:tktknkyo:20180101181713p:plain

トランスフォームのこのノードでブラーの後に加工します

この時点で、かなり形が出来上がります。

ただ、斬撃なので鋭さが欲しいので、後ろの方を少し尖らせます。

 

それが黄色の部分

 

f:id:tktknkyo:20180101181939p:plain

左上のノードは、自作したものでしたが、中身はこんな感じになってます

f:id:tktknkyo:20180101180453p:plain

このノードで丸の形を作ったあと、ブレンドノードで二つとも繋いで、乗算しています。

 

これで作った丸い部分を、トランスフォーム2Dのオフセットで位置を調整します。

 

青の部分は、作った二つを減算しています

丸の部分を、減算で削ることで、後ろ側になる部分が、細くなって鋭さを増します。

 

 

f:id:tktknkyo:20180101182811p:plain

 

次は、ノイズの部分になります

これがあることで、斬撃部分に、細い筋のような模様が入り、きめ細かく鋭く強そな描画になります

 

f:id:tktknkyo:20180101182747p:plain

 

f:id:tktknkyo:20180101182525p:plain

ノイズのこのノードを出し、Distanceを2の低めな数値にしてから

複製します

ランダムシードや、Disorderは、最後のブレンドノードまでやってからやったほうがいいと思います。

f:id:tktknkyo:20180101182835p:plain

調整のこのノードで白黒を反転させます

その後、作った二つのノイズを

ブレンドノードで加算

その後、同じのをブレンドノードにつないで、更に加算します。

 

この時点で、最初のノイズのノードを弄って、比較的に、不規則な形になるようにランダムシードなどを調整しておきます。

 

f:id:tktknkyo:20180101183040p:plain

 

ここは単純に基本的なノードが並んでいるだけです

最初のトランスフォーム2Dでは、幅を20%にしているだけです

こうする事で細長くなり、デフォルトでタイリング処理になっているので

5つ並ぶようになります。

その後の指方向ブラーは、角度を90にして、強度を20

こうすることで、上下方向にぼかします。

その後のブレンドノードでは乗算をすることで、全体的に暗くなります。

その後のトランスフォーム2Dでは、角度を90°動かして横にします。

 

f:id:tktknkyo:20180101183535p:plain

 

赤の部分は

f:id:tktknkyo:20180101183624p:plain

トランスフォームのこのノードを使うことで、斜めにすることで、タイリングを誤魔化します。

 

黄色の部分は

f:id:tktknkyo:20180101183713p:plain

ノイズのこのノードでノイズを追加して

f:id:tktknkyo:20180101183745p:plain

このノードで90°傾けます

それを、ブレンドノードで乗算します。

 

青の部分は、出来上がった二つのノードをブレンドで加算しますが

そのままでは強すぎたので、不透明度を0.7にして、若干薄めに合成します。

 

f:id:tktknkyo:20180101183919p:plain

その後トランスフォームのこのノードで加工したあと

ブレンドノードで加算します

今度もそのままでは強かったので、不透明度を0.75程度にしています。

 

f:id:tktknkyo:20180101184135p:plain

次に、エミッシブで光らせるこのパーツ

ノイズと、OP用のテクスチャでは、結構スカスカになるので

それを補いつつ、鋭い発光感もプラスするためのパーツです。

 

 

f:id:tktknkyo:20180101184243p:plain

ノード構成は左から一直線

一番左のは、OP用のをそのまま持ってきています。

 

1、ブレンドノードで乗算。

f:id:tktknkyo:20180101184356p:plain

2、このノードで極座標を解除

3、指方向ブラーで90°の強度20でブラーを掛ける

f:id:tktknkyo:20180101183919p:plain

4、このノードで再び極座標に戻す

5、ブレンドノードでScreen

f:id:tktknkyo:20180101184557p:plain

第一入力と第二入力は違うので注意。

これで完成。

 

f:id:tktknkyo:20180101184727p:plain

最後は、カラフルを与えるためのパーツですが

ノイズをそのまま繋いだだけになります。

ここの部分は、エフェクト上で調整するのか、テクスチャ自体で調整するのかは、人による部分はあると思いますが

そこまで前面に出てくる部分ではないので、そこまでこって作るものでもないかな?と個人的には思います。

前面に出てきたらそれこそマズイですし...

 

f:id:tktknkyo:20180101184923p:plain

ノイズのこのノードを3つ配置して、ランダムシードをそれぞれ変えます。

α用の均一カラーは、グレースケールの真っ白にします

f:id:tktknkyo:20180101184958p:plain

チャンネルのこのノードでそれぞれを合成してカラフルにします。

 

 

f:id:tktknkyo:20180101185122p:plain

これで、全てのパーツができあたので、それを合成すれば完成するかなと

ただ、この部分は、UE4側でするのを想定しています。