moyasiエフェクト館

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


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

このブログについて

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

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

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

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

 

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

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

 

 

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

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

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

 

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

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

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

discord.gg

 

【GameSynth】Modularモデルで音を鳴らしてみる

f:id:tktknkyo:20190217092523p:plain

GameSynthという、効果音作る為のツールがありまして
エフェクトには効果音も欠かせないので、効果音も少しづつ作っていこうかなと思ったので、少しづつ記事を書いていこうと思います。

 

f:id:tktknkyo:20190217092644p:plain

このソフト、効果音を作る為にいくつかタイプがあります
その中でも、ノードベースでもある、Modularモデル(左から3番目)

でいろいろ作ったりしていこうかなと思っています。

 

f:id:tktknkyo:20190217092903p:plain

これはどのモデルでもそうなのですが、結構最初から沢山のプリセットが用意されています。

 

f:id:tktknkyo:20190217093122p:plain

最初からあるプリセットでも、特に複雑そうなのがこちら

ノードの色分けがある分かなり解りやすいと思います。

 

f:id:tktknkyo:20190217093333p:plain

簡単に音を鳴らす場合だけれあれば、緑色のノードから黄色のOutputに繋げましょう

 

f:id:tktknkyo:20190217093949p:plain

ノードは右クリックから出すことができます、一番上にある【Audio Generation】は一番基本となる音源です。

 

いろいろプリセットを見ているとよくあるのが、この音源の上にある水色のノードは緑色の音源そのものを加工するイメージでしょうか。

 

f:id:tktknkyo:20190217094319p:plain

例えばこの、Noiseの音源のみ再生した場合
Noiseのノード自体で調整出来るパラメータこそありますが、全体の音量や、音の長さなどしかありません。

 

f:id:tktknkyo:20190217094514p:plain

そこで、調整するノードである【Envelope】を繋げます、これは音量のカーブを作る様なノードになっています。

デフォルトでカーブが入っているので、繋ぐだけで、一定音量のみだったNoiseの音量に、フェードイン、フェードアウトを追加する事ができます。

 

f:id:tktknkyo:20190217094747p:plain

ノードベースを普段から使っている方なら、大体想定出来るとは思いますが、当然ながら、この一つの音量のフェードイン、フェードアウトの情報を、他のノードと共有する事ができます。

赤色のノードは、受け取った音源を後から加工するイメージで大丈夫と思います。

 

f:id:tktknkyo:20190217095321p:plain

例えばこのようにすれば、同じフェードイン、アウトのカーブを共有した二つのノイズを混ぜた音、となります。

 

今回は短いですがこの辺で。

またいろいろわかってきたら記事を書いていきたいと思います。

【SD】歪み機能を作ろう

f:id:tktknkyo:20190103110045p:plain

今回はSubstanceDesignerで歪み機能を

Verは2018.2.0です

 

【どういう処理を作るか】

ワープ系での歪ませるものだと、若干イメージが湧きにくいので

エフェクトを作るツールでよく見る、RとGの情報をそれぞれX,Yに置き換えて動かす処理を作ります。

 

 

f:id:tktknkyo:20190103111146p:plain

ノードの全体図はこんな感じになります。

 

f:id:tktknkyo:20190103111258p:plain

パラメータはFloat型のこの一つのみになります。

移動量の量を調整する用のパラメータです。

 

f:id:tktknkyo:20190103111454p:plain

インプットノードは、グレースケールとカラースケールを一つづつ。

グレースケールは、歪ませる元の情報で、カラースケールは、歪ませるのに使用する情報です。

 

f:id:tktknkyo:20190103111618p:plain

チャンネルのこのノードを使い、RGBAを分離させます、今回はRとGしか使いません。

 

f:id:tktknkyo:20190103114529p:plain

まずは、Rチャンネルの0.5を越える数値を持ってきます。
今回はpixel Processorで処理します。

 

f:id:tktknkyo:20190103122035p:plain

Pixel Processorの中身はこうなっています。

非常に単純な計算です、まず0.5を引き算する事で、移動量として使わない部分が全て0以下になります。(-0.5~0.5)

その後、2倍にすることで、-1~1になります。
Pixel Processorの外に出ると、0~1に切り取られるので、これをそのまま、右方向への移動にします。

 

f:id:tktknkyo:20190103123339p:plain



あとは、Directional Warpで、角度を180に設定して右方向にしてから

※処理が分かりやすいように、ベースと、歪みに使うノイズを表示しています。

※処理がわかりやすいように、Levelの強さを50に設定しています。

 

f:id:tktknkyo:20190103123042p:plain

Intensityには、このノード自体に作ったLevelを入れておきます。
これで右方向は完了です。

 

 

あとは、これを各方向にしていくだけです、次は左方向

f:id:tktknkyo:20190103124323p:plain

Pixel Processorの中身はこうなりました。
赤枠が追加したノードです。

これにより、0~1の数値が反転した状態になりました。

 

f:id:tktknkyo:20190103124458p:plain

後は、角度を変更して終了です。

 

次は上にずらす処理です。

f:id:tktknkyo:20190103124635p:plain

右にずらした処理を複製して、RではなくGチャンネルから情報をとってきた後に。

DirectionalWarpで上方向に設定します。

 

 

f:id:tktknkyo:20190103124813p:plain

上方向を作ったのと同じ容量で、左に移動している処理を複製して、
下方向へ移動させるようにします。

 

 

f:id:tktknkyo:20190103124943p:plain

最後に、この移動を全て繋げれば完成です。

 

今回はここまでです。

今回はちょっとした小ネタみたいになりましたが、エフェクトを作っている方には馴染み深い処理かなと思いますので、使っていただけたら幸いです。

 

 

 

 

 

サイト作りました!!!

f:id:tktknkyo:20190101084812p:plain

 

 

 

明けましておめでとう御座います。

2019年元旦にて、報告があります。

 

Material Forward(マテリアル フォワード)という名前のサイトを作りました!

以前からエフェクトの販売もそろそろ始めたいな、と思っておりまして。

ただ、具体的にどうすればいいのか?という所もありましたので

その活動をしやすくする為のサイトを作り、今後活動しやすくしたいと思っております。

 

当面の目標としては、このブログで配布していまして、多くの方に使ってもらっています、「RPGツクールVXAce」「RPGツクールMV」仕様のスプライトシート形式の素材の有料販売から始めたいと思っております。

 

f:id:tktknkyo:20190101085309p:plain

 

今まで配布していた無料素材は、サイトの方に移動しましたが、以前と同じように使っていただけます、無料素材自体をなくす予定は御座いません。

 

今までの無料素材は、自分が使うようとして作ったものをそのまま出していたのみでしたが、有料素材で出すからには、今までよりもしっかりしたものを出していきたいと思っております。

 

このブログではUnreal Engine4でエフェクト制作をメインにしていましたので、マーケットプレイスにもアセットとして販売もしたいと考えております。

 

2018年は、作品を上げることよりも、自身の勉強で手一杯でしたが、2019年は作品投稿や、作品販売をしていける年にしていきたいと思っております。

 

Materialforward

↑リンクはこちらから

【SD】スプライトシートを作る②(ちぎれ表現用

f:id:tktknkyo:20181223132654p:plain

tktknkyo.hatenadiary.jp

今回は、以前のこの記事の改良版となります
以前作ったものを改良していきます

今回の記事は、この以前の記事を見ている前提の部分もありますのでご了承ください。

今回も、基本的に4*4のマス目で進めていきます。

 

Verは2018.2.0です

 

 

【改良内容】

以前には対応していなかった、ノイズ自体を並べる処理も追加したりして

使いやすいように改善していきます。

根本的な作り方自体を変えています。

 

【パラメータ一覧】

f:id:tktknkyo:20181223134007p:plain

パラメータはこのようになっています。

Tiling

XとYでそれぞれいくつ並べるかを選択

出力選択

読み込んだノイズだけを出力するのか

パターンだけを出力するのか

合わせたものを出力するのかの選択

正規化

1コマめの時点でちぎれが出るようにするのか、出ないようにするのかの選択

Patter_Pow

パターンの色に対して敵用するべき乗の指数

Noise_Pow

ノイズの色に対して敵用するべき乗の指数

 

【ノードの全体図】

f:id:tktknkyo:20181223134821p:plain


ノードの全体図としてはこんな感じです
今回は、調整しやすくする為の、正規化やPow系のパラメータなどの敵用の為に増えているノードなどもあります。

 

【マス目の制作】

まずは、ベースとなるここから

以前の作り方から改良して、1つのFX-MAPで作っています

f:id:tktknkyo:20181223135525p:plain

f:id:tktknkyo:20181223135619p:plain

中身は非常にシンプルな構造です。

以前のように、TilingのInt2の変数から持ってきます。

 

IterateノードのIterationsを編集します(所謂反復回数です)

f:id:tktknkyo:20181223135944p:plain

今回は、一つのFX-MAPで作るので、XとYのタイリング数を乗算したものが、そのまま反復回数となります。

 

 

f:id:tktknkyo:20181223140315p:plain

Quadrantで設定しているパラメータはこの3箇所になります(青くなっている部分)

Pattern Offsetは、BranchOffsetに内容は結合しているので、以前の記事と、編集している部分は実質変わりません。

Patternは前回同様Squareに設定しておきましょう。

 

Color/Luminosity

ここでは色を設定します

f:id:tktknkyo:20181223141141p:plain

ノードツリーとしてはこんな感じになりました。

ここは複雑なことはやってはいません、タイリングのXとYを乗算して、反復回数を取得してきて

現在の反復回数から、全体の反復回数を割る事で0/16~15/16に変換します

 

Pattern Size

BranchOffetよりも、構造が単純なこちらから

こちらは単純に一つ一つの大きさを制御します

f:id:tktknkyo:20181223142906p:plain

ノードツリーはこのようになっています。

こちらは、各サイズを、タイリング数で割った大きさにしています。

 

Branch Offset

こちらは、色と大きさを設定したものを、実際に並べる処理を作ります。

f:id:tktknkyo:20181223143559p:plain

フレームでのコメントを見てもらえれば解ると思いますが

基本的に原点が中心になるものを、左上にするのと、順番に並べる機能を作っています。

 

まずは、上半分の並べる処理を作ります。

f:id:tktknkyo:20181223144626p:plain

具体的にはこのような模様になります

中心からになっていますが、ここの座標を変えるのは、後でやるので一旦、この順番に並べる処理を作りましょう。

f:id:tktknkyo:20181223145033p:plain

並べる処理の部分の全体図はこうなっています。

まず、何マス毎に並べる必要があるのかを調べる為に

Tilingの変数の要素を分解します

今回の例では4*4なので、4マスづつ並べます

f:id:tktknkyo:20181223145453p:plain

まずは横に並べる処理から

横のタイリング数である、Xを使います

反復回数を取得してから、そこからタイリング数で割ります

反復回数は0~15が出力されて、4で割るので

0/4~15/4になります

f:id:tktknkyo:20181223150356p:plain

1を超えると画面外に出かねない、1を超えないように小刻みに並べても
ちゃんと並んでくれないので、この処理を入れます

これは1で割った余りを出力します。

1で割った余りは、小数点以下を切り出すのと同じになるので

これにより、4/4の時点で小数点以下のみ切り出すと0になり

その次の5/4は、1/4と同等になります。

これにより、左から右に並べて、右端まで行ったら左に戻る

というループして並べる事が出来ます。

 

次は縦に並べます。

f:id:tktknkyo:20181223150843p:plain

こちらは、縦と横のタイリング数が両方必要になってきます。

まずは、反復回数から、横のタイリング数で割ります

こちらは縦でやったものと同様です。

 

今回は、ここから小数点を切り捨てます。

これにより、1~16の反復が0~3に変換されます
その変換されたものを、縦のタイリング数で割ります、そうすれば0~3に変換されていたものが0/4、1/4、2/4,3/4に変換され、これで敷き詰めることが出来ます。

最後に、それぞれXとYとしてFloat2に変換しておきましょう。

 

次に、原点を左上に持っていく処理を作ります、こちらは比較的単純です。

f:id:tktknkyo:20181223151931p:plain

 

f:id:tktknkyo:20181223152003p:plain

このように、左上に座標が来るようになります。

 

f:id:tktknkyo:20181223152429p:plain

まずは左に寄せる処理

タイリング数のXをとってきて、1から割ります、今回だと0.25になります

中心が基準位置なので、0.25を足して0.75の位置に来ます

そこから、0.5を乗算して半分にします

数値としては0.25から割るので0.125に中心が0.5の位置なので0.625の位置に

その後、-0.5から足します(0.5を引いてます)

0.625の位置になっていたので、0.5を引いて0.125の位置に来ます

この0.125というのは、一つのコマサイズの半分の大きさです、

f:id:tktknkyo:20181223153631p:plain

ソフトの都合上、0の位置にすると、このようにタイリングの処理が入ってしまいます。

 

f:id:tktknkyo:20181223153737p:plain

次は上に持っていく処理...ですが

グラフノードツリー見てもらえば解ると思いますが、左に持っていく処理とほぼ変わりません、タイリング数のXをとってくるか、Yをとってくるかが変わるのみです。

 

f:id:tktknkyo:20181223153900p:plain

最後に、作った要素をそれぞれ合成して完成です。

 

f:id:tktknkyo:20181229083002p:plain

この様になっていればOKです 

 

【タイリング処理の制作】

f:id:tktknkyo:20181229083715p:plain

次に、先ほどの設定を流用して、読み込んだデータをタイリングさせます。

先ほどマス目用とパラメータを流用しているので、常に同じタイリングとなります。

 

まずは、一旦何でもいいのでノイズなどを、2番目の入力に繋げてから

マス目を作ったFX-Mapをコピーして、FX-Mapの編集をします。

 

Quadrantノードの、Colorの関数を編集し、Floatで1の定数を指定して、出力ノードに設定します。

f:id:tktknkyo:20181229084225p:plain

下は、マス目を作った際のデータなので、消しても構いません。

この時点で真っ白になっています。

 

f:id:tktknkyo:20181229084326p:plain

Patternを、Input Imageに変更します、これで読み込んだデータを使用出来ます

 

f:id:tktknkyo:20181229084706p:plain

Input Image IndexでInput Image 0に設定する事で、第二入力のデータを読み込むことが出来ます。

 

順番に並べる処理は、マス目を作った時に作ってありますので、この時点で綺麗にタイリングしてくれます。

 

f:id:tktknkyo:20181229091509p:plain

この時点で、BlendでAddした後に、PixelProcessor(中身は前の記事参照)で加工すればとりあえずは完成です。

 

ここからは、これを更に使いやすい改善をしていきます。

 

【出力選択】

f:id:tktknkyo:20181229092130p:plain

機能追加の一つ目はこちら、この三つのうち、どれを出力するのかを選択出来るようにします。

 

 

f:id:tktknkyo:20181229093938p:plain

パラメータはInteger1の、ドロップダウンリストにすると、リストを作れるので、それぞれ入れましょう。

 

ブレンディングにある

f:id:tktknkyo:20181229094300p:plain

このノードを使って、どれを出力するのかの選択をします。

 

f:id:tktknkyo:20181229094343p:plain

パラメータはこうなっています

Input Numberは、入力する数なので、今回は3

Input Selectionは、実際に出力する部分になるので、先ほど作った「出力選択」のパラメータを設定しておきましょう。

 

f:id:tktknkyo:20181229094746p:plain

 

 あとは、それぞれ選択するだけで大丈夫です。

 

【正規化】

良い名前がい思いつかなかったのでこの名前になっています。

f:id:tktknkyo:20181229100055p:plain

見やすくするために2*2にしています。

ノイズ+パターンにのみ有効で

補正の有りor無しの選択で、有りにすると、1コマ目が無地になります。

UVアニメで再生した際に、1フレーム目から契れて描画が見にくいんを防ぎます。

また、以降のフレームも、破綻しないように少しだけ補正が掛かります。

 

 

f:id:tktknkyo:20181229102929p:plain

まずはパラメータを作りましょう

Boolean型で作ればOKです。

 

f:id:tktknkyo:20181229101121p:plain

この調整はPixel Processorにて行います、ノードの位置としてはここになります
読み込んだノードの直後です、並べたりする処理の前のノイズに補正をかけておく形となります。

 

f:id:tktknkyo:20181229101425p:plain

ざっくりとノードの中身はこんな感じです。

簡単に中身の説明をすると、4*4の場合15/16を掛けています2*2なら3/43*3なら8/9になります。

これでうまくいく理由としての解説を挟みますと

ちぎれ表現での契れている部分は、ノイズから、定数を加算して1の部分を千切れる部分にしています。

f:id:tktknkyo:20181229101851p:plain

実際に処理しているのは、この赤枠の部分です。

 

SubstanceDesignerでは、関数などの一部以外では基本的に数値は0~1として扱いますので、1が上限です。

ちぎれ表現自体は、定数を加算して1(超えた分は1になる)の部分のみ取得しています、1コマめは加算している定数が無いので
1未満であればちぎれる部分が一切無くなりますので、ノイズから15/16で掛けると、全て1未満になるので、ちぎれる部分が全て無くなります。

 

f:id:tktknkyo:20181229102350p:plain

関数側の計算に戻ります。

赤枠では、タイリングのXとYを掛け算して全体のコマ数を出します

黄枠では、読み込んだノイズをコマ数で割ります

緑枠では、読み込んだコマ数から1を引きます

紫枠では、緑枠を掛けます

コマ数で割った後に、コマ数から1を引いた数値を加算する事で4*4なら16で割ってから15で掛けるので、実質15/16で掛けています。

 

最後に、ノードツリーに差し込みましょう

ブレンディングの

f:id:tktknkyo:20181229103131p:plain

このノードを使います、単純なスイッチです

f:id:tktknkyo:20181229103216p:plain

switchの変数に、作った正規化を入れます

 

f:id:tktknkyo:20181229103258p:plain

その後、Pixel Processorを通るのと、通らないのをそれぞれ接続して、この補正を有効にするかどうかを設定できます。

 

【Patter_Pow&Noise_pow】

これはべき乗計算です、コントラストを調整したりしやすいように、あると結構便利です

f:id:tktknkyo:20181229103644p:plain

ちぎれ表現の動き方が簡易的ですが、結構制御できるようになります。

 

f:id:tktknkyo:20181229103746p:plainf:id:tktknkyo:20181229103758p:plain

Float1型で両方パラメータを作ります。

 

 調整からこのノードを使います

f:id:tktknkyo:20181229112303p:plain

このノードだけでほぼほぼ機能完結します

 

f:id:tktknkyo:20181229112506p:plain

ノイズ側は、ノイズの直後に入れ込みます、補正処理したPixel Processorよりも前です。

f:id:tktknkyo:20181229112607p:plain

一つしかないパラメータに、Noise_Powを設定して終了です。

 

f:id:tktknkyo:20181229112917p:plain

パターン側にも同じ要領でパターンの直後に入れ込み、今度はPatter_Powの関数を設定すれば終了です。

 

f:id:tktknkyo:20181229113334p:plain

最後に、最初に接続していたノイズをInputに
最後のMulti Switch Grayscaleの後にOutputを繋げて、完成です。

 

f:id:tktknkyo:20181223134821p:plain

最初に上げたグラフと少々違いますが、配置が違うだけですので、この部分は自分の見やすいように調整してあげてください。

 

 

今回は長めになりましたが、少しでも参考にしていただけでば幸いです。

 

SubstanceDesignerでのスプライトシートの記事

次はSubstancePlayerなどを併用してもっと細かいのを作る例を予定しています。

 

【Niagara】Niagaraでの具体的な作例&NPCやNPCIによる、データ一括管理

f:id:tktknkyo:20181209011901p:plain

この記事は、AdventCalendar2018の9日目の内容となります。

 

qiita.com

 

今回は、Niagaraで汎用性っぽいデータを作って使いまわしやすそうな例を。

このブログでは似たような事は少しはやった事があったので、今回は。

ちゃんと具体的な例で記事を書いていこうと思います。

マテリアル製作から、ナイアガラで完成させるまで書いていく予定です。

UE4のVerは4.21.0です。

 

今回、私の知識的な理由もあり、動きをVelocityを多様して作っています、ご了承ください。

 

【作成するもの】

今回は、エフェクトそのものが汎用的で使いやすいものとして、定番ですがHitエフェクトをつくろうと思います。

また、データを使いまわしやすいように作っておき、属性差分を作っていく所まで。

使い回し関係の所は、結構下の方からとなります。

 

 

 

【マテリアル制作】

今回は、汎用的に使いまわしたいので、いくつかの用途に使いやすそうな、マスターマテリアルを作り、そこからマテリアルインスタンスを複製するだけで、数を増やしやすいようなデータを目指します。

 

f:id:tktknkyo:20181202112022p:plain

三つのマスターマテリアル

左から

・MM_DistortionNoTilingBase

歪みで加工する前提のマスターマテリアルです。

歪みに使う画像は、タイリングしていないものを前提としています。

・MM_DistrtionTilingBase

歪みで加工する前提なのは、上と同じです。

ただしこちらは、歪みで使う画像はタイリングしているものを前提としています。

(この二つは、無理に纏める事もできますが、複雑になりそうなので分けています)

・MM_particleBase

所謂、単純にテクスチャを入れたマスターマテリアル。

 

MM_particleBase

 

最も単純なこちらから

 

f:id:tktknkyo:20181202134726p:plain

使用テクスチャは、この様な単純な粒子状のものを

 

f:id:tktknkyo:20181202112725p:plain

非常にシンプル、左下のテクスチャは、インスタンスで制御できるように、パラメータ化されている方のノードを使っています。(TextureSampleをパラメータ変換すると出てきます)

 

f:id:tktknkyo:20181202112854p:plain

右の方にあるこのノードは、不透明な物質との刺さり具合を軽減してくれるノードです。

簡単に言えば、違和感を少なくする為のノードです。

 

 

f:id:tktknkyo:20181202113034p:plain

詳細の方はこうなっています、ライトの影響を受けない加算合成です。

今回作成するマテリアルは、全てこの設定になっています。

 

 

MM_DistortionNoTilingBase

f:id:tktknkyo:20181202134726p:plainf:id:tktknkyo:20181202134908p:plainf:id:tktknkyo:20181202135048p:plain

使用テクスチャはこの三つです。

 

 

f:id:tktknkyo:20181209005708p:plain

 

マテリアルの全体図はこうなっています。

 

ある程度はコメントなどは残していますが、全体の機能としては、ベースのテクスチャを歪み用のテクスチャで歪ませる機能を持っているだけ、と認識してもらえばOKです。

歪みだけでなく、屈折の機能を入れてみたり、インスタンス上で確認しやすいようには作ってあります。

 

f:id:tktknkyo:20181202114605p:plain

まずはこの、歪みの処理をしている部分。

歪み用のテクスチャは、必要に応じて変えるのが多いと思いますので、パラメータ化しています。

歪みに使うために、RとGのみ取り出して、Multiplyで強度を調整し

最後にTexCoodとAddで、歪みを適用させています。

 

MultiplyのBの入力に繋がっている3つのノード

実際にエフェクトを作るだけであれば

f:id:tktknkyo:20181202115439p:plain

これで問題ありません。

 

f:id:tktknkyo:20181202115603p:plain

上はScalarParameter

右はStaticSwitchParameter

両方とも、インスタンスで確認しやすくする為に追加しています。

DynamicParameterはエフェクト上で数値操作できるのですが、インタンス上での確認がやや面倒なので、インスタンスで確認しやすくする為に配置しています。

 

f:id:tktknkyo:20181202135825p:plain

 

後は後半部分です。

歪みを適用したテクスチャ、これもパラメータ化したTextureSampleです

これを、マスク用の下にあるテクスチャとMultpleで乗算します。

その後は、ParticleColerとの乗算で色をNiagara上で設定できるようにして

Depthfadeで刺さり具合を軽減しています。

 

下の屈折部分は、ここでαにでた数値を利用します。

歪みの強度と同じ方式で、屈折も操作しやすいようにしておきます。

ここをMultplyで乗算したあと、Minで1を超えた分を1に抑えたあとに

OneMinusで反転させて、リフラクションに繋げます。

 

f:id:tktknkyo:20181202122907p:plain

 

 

この時点で歪んではいますが、実際に組み込んだ際に、ちゃんと背景歪みが上手く適応されてなかったので、ノーマルも追加します。

f:id:tktknkyo:20181209010008p:plain

基本的なノーマルの強度調整と特に変わりません

RとGを抜き取って、屈折の強度をとってきているものと、Multplyで乗算してから、Bチャンネルと混ぜてVectorに合成してます。

黄色枠は、そのままノーマルに接続してます。

 

MM_DistortionTilingBase

f:id:tktknkyo:20181202135202p:plainf:id:tktknkyo:20181202134948p:plainf:id:tktknkyo:20181202134726p:plain

使用テクスチャはこの三つです

f:id:tktknkyo:20181209011220p:plain



 

マテリアルの全体図はこんな感じになっています

先ほどのMM_DistortionNoTilingBaseからの流用で少しだけ違います。

 

f:id:tktknkyo:20181202123305p:plain

歪みに関するこの部分です。

こちらは、シームレスなテクスチャを歪みに使う前提の構造なので。

歪みのテクスチャをタイリングする処理を作っています。

ScalarParameterとTexCoodをMultiplyで乗算しておけば、インスタンス上でタイリング数を変化させることが可能です。

また、上の歪みに対するマスクとも乗算しています。

これは、移動量が大きくなりすぎて、移動しすぎるのを制御する為です。

f:id:tktknkyo:20181202123635p:plainf:id:tktknkyo:20181202123655p:plain

左が、歪みのマスクを使わない場合

右が、歪みのマスクを使った場合

 

NoTilingのマテリアルのように、歪みを加えたあとに、マスクと乗算する場合に、殆ど写らなくなりやすくなってしまうので、その為に歪み自体を制御しています。

f:id:tktknkyo:20181202135940p:plain



歪み適用部分後は、NoTilingから流用しています。

ノーマルへの適応も、ノイズに使ったテクスチャのRとGチャンネルを調整して使っています。

 

 【マテリアルインスタンス

f:id:tktknkyo:20181202134053p:plain

マテリアルインスタンス

作成したマテリアルインスタンスはこの四つ。

・MIA_Aura

親はMM_DistortionNoTilingBase

加算合成のオーラっぽいマテリアル

 

・MIA_Fog

親はMM_DistortionTilingBase

加算合成の煙用マテリアル

 

・MIA_Particle

親はMM_ParticleBase

加算合成の粒子マテリアル

 

・MIA_Ring

親はMM_ParticleBase

加算合成のリング状のマテリアル

 

今回はインスタンス自体でいじる必要があるのはMIA_Ringのみです

f:id:tktknkyo:20181202135336p:plain

インスタンスで、この様なテクスチャを適用すればOKです。

 

機能的にはこれだけでいいのですが、今回はインスタンスで確認しやすい仕様にしてあるので、少しだけそこにも触れておこうかと思います。

 

f:id:tktknkyo:20181202140152p:plain

MIA_Auraの方であれば、赤の部分のチェックをいれると、緑のチェックを入れれるようになります

緑のチェックをいれると、青の項目が出てくるので、ここにもチェックを入れると、右側の数値を調整できるようになります。

 

 

f:id:tktknkyo:20181202140524p:plainf:id:tktknkyo:20181202140716p:plain

数値を変えていくと、こんな感じに変わっていっていると思います。

 

ただ、今回のは確認しやすくするためなので、確認が終わったら、チェックを外しておきましょう。

チェックを入れていると、これからする、この部分をNiagaraで動かせなくなります。

 

【エミッターの作成】

エミッターを作る工程で、いくつかモジュールなど途中で作っていくので、ご了承を。

 

エミッターはエミッターでも、具体的にはNiagaraEmitterの事なので。

パーティクルを放出するもの、ではありますが。

最終的にエフェクトにそのまま使うエミッターとは少々違います。

そのまま最終的に使うエミッターの、元となるデータ、と考えてもらうと良いかもしれません。

マテリアルと、マテリアルインスタンスとの関係に近いと思います。

f:id:tktknkyo:20181202202148p:plain

NiagaraEmitterのアセット

 

まず、必要なものを考えましょう。

・飛び散る粒子

様々なエフェクトでの定番とも言えるエミッターです

当たった衝撃で、粒子が中心から外側に飛び出ます

 

・細長いライン

所謂レンズフレアのような、トゲトゲした描画です

エフェクト全体のメリハリをつけて、認識されやすくする大きなポイントです

 

・広がるリング

衝撃は、基本的には全ての方向に一定に広がるので、それをリングで表現します。

 

・オーラっぽいもの

これはやや言葉で表現しにくいのですが、上記の要素だけだと、物足りなさが出てくるので、それを補う為の表現...でしょうか

 

・グロウ

エフェクトを作っている方には定番だと思いますが、グロウです

用途的には、グロウとは外れているかもしれませんが、全体の色味を調整する重要なパーツとなります。

 

そこまで変わってる要素はなく、全体的にシンプルな構成になると思います。

 

 

f:id:tktknkyo:20181203114434p:plain

エミッター

今回は、エミッターのアセットは二つだけ作りました。

・NE_RadialVelocity

 外に向けて四方八方に飛び散るエミッターです。

 

・NE_SimpleSpawn

シンプルに中心に一つ発生させるエミッターです。

 

今回は少ないエミッターで作っていこうかと思います。

エミッターとしてのアセットを増やすのは、メリットもデメリットもあります。

 

NE_SimpleSpawn

 

f:id:tktknkyo:20181203151838p:plain

エミッターを作ろうとすると、4.21からはテンプレートを選べるようになっています。

とりあえずは、以前のVerで標準だったこのテンプレートから作りましょう。

 

初めに書いておきますが、このエミッターで何をしたいのかによって、どの様な設定にするのかは変わってきます、ご注意ください。

 

f:id:tktknkyo:20181203152619p:plain

エミッターの名前のとおり、シンプルにしたいので

赤線を引いている部分のモジュールを削除しましょう。

削除は、右側のゴミ箱のアイコンをクリックすればOKです。

 

f:id:tktknkyo:20181203152822p:plain

続きまして、次はモジュールを追加しましょう

EmitterUpdateにこのモジュールを追加します。

SpawnCountは、汎用性を考えて1に設定しています。

 

f:id:tktknkyo:20181203170245p:plain

その上にある、EmitterLifeCycleも調整しておきましょう。

MaxLoopCountを1に

これは、ループ回数で0の場合は無限ループになるので注意です。

 

NextLoopDuration

これはエミッターで発生を続ける時間のようなもので

SpaenRateで発生させ続ける場合は、この数値の時間だけ発生を続けます。

今回は、エミッターの発生時に一回だけ発生させるので、低めの数値を入れましょう。

 

f:id:tktknkyo:20181203154539p:plain

また、ParticleSpawnにある、ここも削除しておきましょう。

右の矢印から、Removeをクリックすれば消去できます。

 

f:id:tktknkyo:20181203155053p:plain

また、位置情報を消してしまったので、こちらで追加しておきましょう。

SetVariablesから、Particles.Positionを追加します。 

 

 

f:id:tktknkyo:20181203155217p:plain

この様な紫のが追加されていれば大丈夫です、自動で着くようになっています。

簡単に言えば、レベルに配置した場合の位置情報を持ってくれます。 

 

f:id:tktknkyo:20181203162835p:plain

ParticleUpdateにて、このモジュールを追加しておきましょう

これは、大きさを徐々に変化させるモジュールです。

 

右の矢印から

f:id:tktknkyo:20181203162952p:plain

Vector 2DFrom Float

を追加して、Floatで制御できるようにします。

 

f:id:tktknkyo:20181203163114p:plain

その後、下の方の矢印から

Float From Curve

を追加して、カーブで編集できるようにします。

 

f:id:tktknkyo:20181203163249p:plain

後で編集しやすいように、キーを右クリックして、両方ともAutoに設定しておきましょう。

 

f:id:tktknkyo:20181205055806p:plain

続いて、Colorの設定も少しだけしておきましょう。

編集をしやすくする為に、赤丸の部分をクリックしましょう、そうすると、カーブエディタで編集できるようになります。

 

f:id:tktknkyo:20181205060220p:plain

カーブエディタはTimeLineの横にあると思います、出ていなければ、ウインドウから開きましょう。

 

RGBは目のアイコンをクリックして、閉じた状態にしておきましょう。

個人的にですが、エミッターではRGBは全て1で設定しておくのがいいと思います。

今回はAのみ変えましょう、

 

f:id:tktknkyo:20181205060740p:plain

カーブのキーは、カーブエディタ上で、右クリックから出るメニューで出すことができます、

これを使い、Aを0から1になり、最後にまた0になる、という数値に設定しておきましょう。

 

f:id:tktknkyo:20181205061229p:plain

カーブを編集する際は、キーの補完をこの下線を引いてある部分で制御することが可能です。

黄丸は、個人的によく使う部分です

一番左・・・オート設定、とりあえずでカクついた動きにしたくないならこれ

真ん中・・・自身で設定、緩急を意図的に付けたい場合

3番目・・・直線、今回のように、途中は1で続けたい場合など

 

これで完了...と言いたいですが、少しだけ落とし穴があります

f:id:tktknkyo:20181205062057p:plain

これはBチャンネルです、RGBを消してキーを打っても、RGBA全てにキーを打たれますので、忘れずに消しておきましょう、選択してからDeleteで削除できます。

 

これでこのエミッター側の設定は終了です。

 

 

 

NE_RadialVelocity

 

f:id:tktknkyo:20181203151838p:plain

今回も、こちらのエミッターをベースに作ります。

このエミッターは、中心から外に無数のパーティクルを飛ばすものとなります。

 

f:id:tktknkyo:20181205153431p:plain

赤線を引いた部分のモジュールは削除しておきましょう。

 

このエミッターの基本的な動きになる、外側に放出する動き、をどう作るのか?が少々困ったので、自分なりの作り方で作っています。

もっとやりやすい作り方はありそうです...

 

f:id:tktknkyo:20181205153524p:plain

パーティクルの発生は、今回もSpawnBurstInstantaneousを使いましょう

発生数はとりあえず1000に

 

f:id:tktknkyo:20181205153715p:plain

こちらはNE_SimpleSpawnと同じように設定しておきましょう。

 

デフォルトにある、SphereLocationのモジュールが

球状に発生させるモジュールなので、これを使います。

 

この球状に発生させる位置を、Velocityに変換して、外側へ放出する動きにします。

その為に、今回はNiagara Module Scriptを作ります。

f:id:tktknkyo:20181203171201p:plain

 

 

f:id:tktknkyo:20181203171321p:plain

名前はNM_LocationVelocityと付けました

 

f:id:tktknkyo:20181203171443p:plain

こちらがモジュールの中身です。

早い話、位置を速度に変換する為です。

 

入力するModuleのパラメータはVector型とFloat型で

Vectorは、基準となる発生位置

Floatは、速度です(方向を正規化した後に乗算します)

 

間の三つのノードは

Subtractは、ベクトル減算により、中心からのベクトルを求めています

Normalizeは、正規化して、減算して求めたベクトルから、角度の情報のみ取得します

Multiplyは、角度にから速度を乗算して、それを最終的にVelocityに出力しています。

 

f:id:tktknkyo:20181203172124p:plain

先ほどのNM_LocationVelocityのモジュールを追加したら、WoldVectorに、Engine.Owner.Positionをドラッグ&ドロップで敵用しましょう。

その後、Sppedに数値を入れると、その速度で外に向けて動くはずです。

 

ちなみにですが、Engine.Owner.Positionは使わず0,0,0でも、プレビュー上では動きますが、レベルに配置した時におかしくなったりしますので、後で困ります...

 

このままで動き自体は良いのですが、発生位置の制御がしにくいと思いましたので、そこの制御もできるように組んでいきましょう。

 

f:id:tktknkyo:20181203172934p:plain

Particle.Spawnに、Particle.Positionを追加します。

 

f:id:tktknkyo:20181203172832p:plain

いま追加したものが、順番的に最後になるようにします。

上から順番に処理されますので、順番が違うとうまく動いてくれなくなります。

 

いま追加したものは、発生位置を、中心から特定の距離に配置する為のものです。

 

f:id:tktknkyo:20181203173309p:plain

最終的な構成はこうなるように目指します。

速度のVelocityから角度をを取ったあとに、その角度に対して、どの程度の距離に配置するのか?を設定できるようにします。

 

赤線を引いてありますが、ここはNiagara Dynamic Input Script(ND)を新しく作ったものを使っています。

 

f:id:tktknkyo:20181204172742p:plain

内容としては、VelocityをVector型のパラメータに変換するような内容です。

Velocityの情報をNormalizeで正規化して、方向のみの情報にしてから、Scaleとの名前にしてあるFloat型のパラメータを乗算して、中心からの距離とします。

正規化してから、そのVectorにFloatで乗算すると、中心からの距離となるのは、非常に便利なので、覚えておくと様々な場面で使えると思います。

 

NDでは、基本的に出力する情報に、Position等の、固定の数値にはしない方やりやすいです。

 

 

内容的には、Particle.Velocityも、Vector型のModuleのパラメータでも問題ないです。

f:id:tktknkyo:20181204173242p:plain

具体的にはこの様な感じです、この場合、エミッター側で、このVectorにVelocityをセットしてあげましょう。

 

 

f:id:tktknkyo:20181203173309p:plain

では、このNDの内容を説明したので、もう一度ここの部分に戻りましょう。

一番上のAddVector 、名前のとおり、Vector同士の足し算です。

Engine.Owner.Position + ND Velocity Vector

Engine.Owner.Position

は、上の方でも説明しましたが、このエミッターがレベル上などで配置されている位置を取得します。

よって、これを加算するのには、レベル上で配置した位置にキチンと配置させる為ですので、これ単体では、エディタ上では特に変化はありません。

 

ND Velocity Vector

こちらわ先ほどの説明のとおり、中心から一定距離に配置される仕組みとなっています

f:id:tktknkyo:20181205063807p:plain

こちらはデフォルトで入っているNDアセット、UniformとありMinとMaxの間のランダムとなります、ここはカスケード触っていた方なら解りやすいと思います。

 

これにより、配置した位置を中心に、10~20の距離にランダムに発生させる、という処理となります。

 

続いて、ParticleUpdateに、Particle.Velocityを追加しましょう

f:id:tktknkyo:20181205152541p:plain

これは、パーティクルの外へ向かう速度に減速処理を掛けます。

 

f:id:tktknkyo:20181205152754p:plain

ここの数値はこの様になっています。

最初のMultply.Vectorにて、現在の速度である、Particle.Velocityと、Float型のカーブを乗算して、速度をカーブで制御します。

 

このカーブでの制御部分は、Vectorのままでは制御しにくいので

VectorFlomFloatでFloat型に変換してから

FloatFromCurveでカーブを描いていきます。

 

これで、このカーブ沿って動きが変わります。

 

後は、NE_SimpleSpawnと同じように

PartixleUpdateと同じように、大きさが小さくなっていく処理と、Aが0→1→0となる処理を追加しておきましょう。

 

これでエミッターの設定は一旦終了です。

 

【システムの作成】

f:id:tktknkyo:20181205154107p:plain

漸く完成が見えてきました、作ったエミッターなどをシステムに登録して、エフェクトとして完成させます。

 

エミッター毎に数値の設定をしていっていますが、実際作るときは、全てのエミッターに仮として数値を入れておいてから。

最終的に全て表示している状態で、違和感が無いように数値を微調整していきます。

 

f:id:tktknkyo:20181205154438p:plain

実際にエミッターを登録していきます。

赤線は、 NE_RadialVelocity

黄線は、NE_SimpleSpawn

を使っています

 

 NE_RadialVelocity

f:id:tktknkyo:20181205155524p:plain

外側へ放出される粒子です。

エミッター自体で殆ど設定していますので、システム側で設定する項目はあまりありません。

f:id:tktknkyo:20181205155705p:plain

Colorのモジュールから、色の変更をしておきましょう。

エミッシブにて、Rに高い数値を入れて上げればOKです。

 

f:id:tktknkyo:20181205155932p:plain

LifeTImeや、SpriteSizeは動きを見ながらいい感じになるように設定しておきましょう。

 

f:id:tktknkyo:20181205160139p:plain

最後に、作ったマテリアルであるMIA_Particleを設定しておきましょう。

デフォルトのマテリアルとそこまで大きく変わりはありませんが。

 

 NE_Ring

f:id:tktknkyo:20181208184629p:plain

名前の通りリングです、それ以上でも以下でもありません。

 

これ移行は全てNE_SimpleSpawnから作ります。

 

まずは、見た目がそもそも違いすぎて確認しにくいので、マテリアルの設定をしましょう。

f:id:tktknkyo:20181208185114p:plain

適用するのはこの、MIA_Ringとなります。

基本は、マテリアル側から設定すると、設定途中で確認しやすいのでおすすめです。

 

 

SpriteSizeScale

次に大きさを変えましょう、こちらのモジュールを弄り、段々と大きくなるように設定しましょう。

f:id:tktknkyo:20181208185650p:plain

キーをクリックすると、上で時間と数値を直接入力できるので

時間0で値1

時間1で値1に設定して、徐々に拡大する動きに変化させます。

ただ、このままだと動きが地味すぎるので、カーブを弄りましょう

f:id:tktknkyo:20181208185840p:plain

カーブの左右の◆はドラッグ&ドロップで動かすことが出来ます。

また、この時カーブの設定がオートになっている場合でも、ユーザーに書き換えられます。

なので、エミッターのアセット自体では、オートにしておくと、何かと便利です。

カーブの設定は、感覚で所謂いい感じに設定しておきましょう。

 

 

SpawnBurstInstantaneous

f:id:tktknkyo:20181208190443p:plain

ここはパーティクルの発生数です、とりあえず6にしておきましょう。

 

SetVariables

f:id:tktknkyo:20181208190537p:plain

f:id:tktknkyo:20181208190817p:plain

ここで大きさを、生存時間をランダムにしておきましょう。

 

Color

f:id:tktknkyo:20181208190934p:plain

色の設定もしておきましょう、赤丸の所をクリックして、カーブエディタで編集すると楽です、黄色から赤になるような色合いに設定しました。

 

NE_Ringの設定は以上で終了です。

 

 

NE_Line

f:id:tktknkyo:20181208191458p:plain

細長いラインです、レンズフレアのような表現でもあります。

こちらもエミッターはNE_SimpleSpawnから

 

マテリアルは、MIA_Particleを使います

発生数は今回は10個程に設定しています

 

SetVariables

f:id:tktknkyo:20181208192529p:plain

寿命と、大きさを設定します

大きさは、細長くするのでXとYに別々の数値を入れておきます

 

 

SpriteSizeScale

f:id:tktknkyo:20181208192858p:plain

こちらでは、細長くなっていく動作にします。

このモジュールに初期で入っている数値は、黄色の矢印でリセットできるので

リセットしてから、Vector2でのカーブを再度入れて設定します。

 

 

Color

f:id:tktknkyo:20181208193232p:plain

色はリングと大体似たような設定で、黄色から赤になるように設定しつつ、エミッシブカラーで発光させましょう。

エフェクト全体で見た場合、結構印象に残りやすい部分ですので、発光は基本的に強めに設定しておきましょう。

 

 

NE_Glow

f:id:tktknkyo:20181208193814p:plain

グロウです、設定が最もシンプルなエミッターとなります。

 

NE_SimpleSpawnのエミッターを登録し

MIA_Particleを適用してください。

発生数は1です

 

 

SetVariables

f:id:tktknkyo:20181208194450p:plain

このエミッターでは、基本的にランダム性は必要ありません、設定はこの様になりました。

 

SpriteSizeScale

f:id:tktknkyo:20181208194052p:plain

構成としては、NE_Ringと基本的に変わりません、徐々に大きくなるようにしています。

 

 

Color

f:id:tktknkyo:20181208194322p:plain

このモジュールで色を設定していきますが、このエミッターではエミッシブで発光はさせません。

Rを1GBを0にして、後はAで色の調整をしています。

 

 

NE_Aura

f:id:tktknkyo:20181208195814p:plain

オーラっぽい何かです、今回はマテリアルの解説もこみこみゆえに、簡易的な作りであるので、その点はご了承ください。

 

マテリアルはMIA_Aura

エミッターはNE_SimpkeSpawn

発生数は2です。

 

 

SetVariables

f:id:tktknkyo:20181208200752p:plain

ここでの設定は、大きさや寿命辺を設定しておきます。

 

 

SpriteSize

f:id:tktknkyo:20181208201155p:plain

他のエミッターでもよくやってるパターンです

 

 

Color

f:id:tktknkyo:20181208201429p:plain

色は、カーブエディタで、黄色から赤への変化させつつ、エミッシブでの発光を入れておきましょう。

 

 

SetVariables(DynamicParameter)

f:id:tktknkyo:20181208202025p:plain

ここから、DynamicParameterの設定をしていきます。

カスケードでも同じような機能はあるので、UE4で作っている方にとっては、馴染み深いのでは?と思います。

初めて聞く方は、こちらの記事も参考にしてください。

【UE4】Dynamic Parameterを使ったフェードアウト - moyasiエフェクト館
tktknkyo.hatenadiary.j

【UE4】DynamicParameterにて、ノイズテクスチャを使ったフェードアウト - moyasiエフェクト館

 

f:id:tktknkyo:20181208202735p:plain

設定したカーブだとこんな感じになっています、BとAは使っていないので表示していません。

 

ここでの設定はとりあえずこのようになります。

 

 

f:id:tktknkyo:20181208203032p:plainf:id:tktknkyo:20181208203218p:plain

りフラクションを入れてあるので、エミッターや背景が歪んで表示されるようになります。

 

 これで漸く完成です。

 

 

そしてここから、データ管理、NPCやNPCIに関する内容に入っていきたいと思います。

一応ここからが、元々メインで書こうとしていた部分です。

 

【NiagaraParameterCollection】

簡単に言ってしまうと、Niagaraのパラメータを一括で制御できたりする機能です。

tktknkyo.hatenadiary.jp

 

基本的な使い方は、この記事でも紹介しています。

 

f:id:tktknkyo:20181208225829p:plain

まずは、NPCファイルを作ります、名前はNPC_Testと名づけます

今回は、生存時間の長さを調整するようにします。

 

f:id:tktknkyo:20181208230536p:plain

Float型のパラメータを作り、名前をLifeScaleに設定し、数値を1に設定します。

 

次に、エミッター側に適用します

NE_SimpleSpawnを開きます

f:id:tktknkyo:20181208231359p:plain

パラメータの部分から、先程作ったデータをここに入れます。

 

f:id:tktknkyo:20181208231807p:plain

LifeTImeの所に、先ほどのパラメータを追加しておきます

内容としては、元ある数値と、NPCのファイルをMultplyで乗算します。

この時点では特に何も変わりません、変わったらまずいです...

NE_RadialVelocityにも、同じように登録しておきます。

 

f:id:tktknkyo:20181208232656p:plain

この状態で、システムを開くとこうなっています。

先程登録したものが出ていません、右の緑の矢印をクリックすると、出てくるようになります。

 

ただし、この手法で、全てやっていると、手間が掛かります。

本来であれば、最初に登録しておくべきですが、この様な場合に便利な方法があります。

 

f:id:tktknkyo:20181208233314p:plain

処理が上から順番にされるというのを利用します。

下の赤枠が、新しく追加したLifetimeです。

処理としては、Lifetimeの数値を

既に設定されている数値と、NPCファイルを乗算した数値に設定する、という内容です。

NIagaraでは、既に設定されているパラメータも、このように引っ張ってくることが出来ます。

これも、NE_RadiusVelocityにも敵用しておきます。

 

再度システム側に戻ると、入れた情報が、ちゃんと入っているはずです。

この状態で、NPCファイルの数値を弄ると、システムの方のパーティクルの寿命が変わるようになっているはずです

f:id:tktknkyo:20181208234155p:plain

 

システムとエミッターは連動こそしていますが、既に入っているパラメータを変えた場合は、システム側でいじっている場合は、エミッター弄っただけでは更新されないので注意です。



【属性差分】

f:id:tktknkyo:20181209003807p:plain

 次は、火属性の属性差分を、簡易的にですが作ります

f:id:tktknkyo:20181209001757p:plain

 まずは、NS_HitNormalを複製して、名前をNS_HitFireに変えます。

 

煙なので、粒子程の発生数はないので、発生数は100程に設定します

大きさは、粒子より大きいので、50~75程に設定しておきます

f:id:tktknkyo:20181209003346p:plain

 

NE_RadialVelocityに、MIA_Fogのマテリアルを敵用します。

f:id:tktknkyo:20181209002140p:plain

 

Sprite Size Scale

f:id:tktknkyo:20181209002322p:plain

煙なので、拡大していく動きになるように設定します。

 

SetVariables

f:id:tktknkyo:20181209003118p:plain

NE_Auraと同じように、ここでDynamicParameterを設定していきます。

 

f:id:tktknkyo:20181209003027p:plain

カーブはこのように設定しました。

後は、違和感のないように、色味を調整すれば完成です。

 

【NiagaraParameterCollectionInstance】

最後に、こちらの敵用、運用も載せておきます。

 

f:id:tktknkyo:20181209004102p:plain

NiagaraParameterCollectionから作ることが出来ます。

 

f:id:tktknkyo:20181209004443p:plain

今回は、NormalとFireで二つ作ります。

このまま開いてもいいのですが、その前に敵用させましょう。

 

f:id:tktknkyo:20181209004653p:plain

システムを開き、SystemDetailsから、先程作ったNPCIアセットをドラッグ&ドロップなどで敵用させましょう。

 

NormalとFireの両方に適応させましょう。

 

f:id:tktknkyo:20181209005009p:plain

その後、NPCIアセットを開き、左のチェックボックスにチェックを入れて、数値を変更すると、NPCIアセットを敵用した方のみ数値が変動するようになります。

数値なら大体のものを変えることが出来るので、ここから歪みやパーティクル単体の大きさ、動く移動量などを制御することも可能です。

 

 

今回は比較的に長い記事となりました、ここまで読んでくださって有難うございます、間違え等ありましたら、拍手などでコッソリ教えていただけると幸いです。



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

【SD】スプライトシートを作る①(ちぎれ表現用

 

f:id:tktknkyo:20181120180608p:plain

今回は、SubstanceDesignerでちぎれ表現の連番テクスチャの作り方を

タイトルに①とあるように、似たような案があるので、ある程度小分けにしたりして記事書いていこうと思います。

連番テクスチャに該当するものは、纏めておこうかなと。

Verは2018.2.0です

 

【具体的な用途】

f:id:tktknkyo:20181120183634p:plain

この様なテクスチャを作れます、これを単純に連番で再生すると

f:id:tktknkyo:20181120183700g:plain

この様になります。

 

但し、今回は若干簡易的な方法ではあるので、そこはご了承下さい。

 

【実際の構造】

例としてなので、4*4マスで進めます。

 

f:id:tktknkyo:20181120184255p:plain

重要なのは、黄色で囲ったこの二つのノード。

先にこの二つの機能がどうなっているのかを。

 

【マス目の部分を作る】

今回において、最も重要な部分になります。

FX-Tiling

デフォルトであるノードではなく、自分で定義して作っています、なので、この名前で検索してもありません。

内部の構造としてはこうなっています。

f:id:tktknkyo:20181120184643p:plain

 

パラメータはタイリング数のXとYをそれぞれ設定するパラメータのみ入れてあります。

f:id:tktknkyo:20181120184445p:plain

 

FX-Tilingの設定で、パラメータを追加しておきましょう。

今回はXとYのタイリング数なので、変数の型は「Integer2」に設定します。

f:id:tktknkyo:20181120195534p:plain

 

 

このデータで作っているものを解説を入れますと

f:id:tktknkyo:20181120191600p:plain

それぞれ数字降っていますが、この数値を16分の1にした数値と思ってください。

なぜ16なのか?は、マス目が合計して16マスだからです。

 

また、このマス目にするのに、BlendノードのAddで加算合成していますが

加算している二つのデータはこうなっています。

f:id:tktknkyo:20181120191821p:plainf:id:tktknkyo:20181120191845p:plain

こちらも、最終的に16マスになるので、全て16分の1にしてください。

この二つを加算すれば、16マスでそれぞれ連番になります。

 

Fx-Mapで作っていますが、FX-MAP自体の構成は至ってシンプルで

元となる「Quadrant」を「Iterate」で複数回処理しているのみです。

(ノードの流れは、下から上になるので注意)

 

f:id:tktknkyo:20181120192741p:plain

どちらの模様も、今回の例だと4回反復処理させます

つまり、タイリング数がそのまま反復回数となります。

 

FX-MAPにある、このRoughnessを0に設定しておきましょう

f:id:tktknkyo:20181120194957p:plain

 

Quadrantは大体関数が入っています、Pattrnには、Squareを設定しておきましょう。

f:id:tktknkyo:20181120195135p:plain

 

【横線の作成】

 

f:id:tktknkyo:20181120191845p:plain

まず、こちらから作ります。

 

反復処理の設定

まずは、反復処理をするIterateから

f:id:tktknkyo:20181120200029p:plain

ここから、関数を作ります

f:id:tktknkyo:20181120200137p:plain

こう繋ぐだけで終わりです。

左は、「Get Integer2」で、FX-Tilingに設定した変数を読み込みます。

f:id:tktknkyo:20181120200433p:plain

 

タブを見ると、Tilingとあるはずです。

f:id:tktknkyo:20181120200449p:plain

これを設定して、Tilingで設定した変数をここに読み込ます。

 

f:id:tktknkyo:20181120200637p:plain

次は、ここからYの数値のみが欲しいので、「Swizzel Integer1」で、Yの情報のみ拾ってきます。

これで反復回数の処理はできました。

 

では、ここで取ってきた

反復回数によって、上から詰めていきます。

 

全体の処理内容としては、上から順番に隙間なく詰めていくだけです。

ただし下に行くほど、色を明るくしています。

 

色の設定 

 

色の設定をしていきます、反復回数が多いほど、色の数値を上げていきます。

 

f:id:tktknkyo:20181120201353p:plain

ノードとしてはこんな感じになります。

左下は反復回数を設定したのと同じなので、今回だと単純に4となります

その右にあるのは、変数の型を整数から、小数点に変えます。

上にある$numberと書いてあるノードがあります、これは現在の反復回数を取得しています。

ノードとしては、GetFloatで、検索すると$numberとあるので、これを設定します。

 

f:id:tktknkyo:20181120201755p:plain

この数値は、現在の反復回数を取得する変数となります。

但し1からではなく、0から取得してきます。

今回の例では、反復回数が4なので、0,1,1,3とそれぞれ数値を取得してきます。

 

最後の右にあるのは、上の入力を、下の入力で割り算します。

下の入力は反復回数そのものになっているので、計算としては

0/4

1/4

2/4

3/4

...となります。

f:id:tktknkyo:20181120191845p:plain

この数値は、上から順番にこの色と完全に同一している事が、解るでしょうか。

この時点で色は完成したので、後は上から順番に詰めていくだけになります。

 

大きさの設定

 

では、次は大きさを変更しましょう。

 Pattern Sizeで関数を作り、中に入りましょう

f:id:tktknkyo:20181120205828p:plain

最終的な構成はこのようになります。

大きさなので、当然XとYがあります。黄色の出力ノードになっているノードは

Vector Float2という名前で、二つnFloatを纏めてくれるノードです。

上の入力がX、下の入力がYとなります。

X軸は1をそのまま入力し、Y軸は、1からタイリング数を割った数に設定します。

今回の例だと、1/4になります。

f:id:tktknkyo:20181120210006p:plain

大きさはこれだけで終了です。

 

f:id:tktknkyo:20181121005930p:plain

現段階で、真ん中に、1/4の太さのラインが出てると思います。

この段階では、位置がかぶってしまっているので、ここを調整していきましょう。

 

位置の設定

 

処理の内容的には、反復の処理が行われる事に、上から下になるように設定しましょう。

ノードグラフとしてはこのようになりました。

f:id:tktknkyo:20181121011354p:plain

フレームで囲いましたが、上と下で機能的には別々で

最後にそれをAddノードで加算している形となります。

 

先ずは上からです、必要な数値としては、反復処理毎に、座標をずらせば良いわけです。

そして、ずらす数値としては、タイリング数=反復回数なので、1から反復回数で割った数値となります、今回の場合ですと、4で割った数値なので、0.25だけずらします。

 

つまり欲しい数値は

0/4

1/4

2/4

3/4

となります。

気がついた方も居るかもしれませんが、これは色の設定と同じ数値となります。

f:id:tktknkyo:20181121012408p:plain

 

ただ、座標でXとYがあるので、少しだけ変わります、Xにはとりあえず0を入れておきましょう。

 

f:id:tktknkyo:20181121012539p:plain

この段階で、こうなっていると思います。

反復処理毎に下にずれていっています...が

中心から下にズレていっていますので、これを修正しましょう。

 

こちらの処理は、一つ一つのラインの太さに応じて上に動かせば良いのです

一番真ん中にあるラインが、太さが0.25で、中心に来ていますので

0.375~0.625の部分になっています

なので、Yの座標を-0.375だけ動かせば綺麗になります。

計算式的には、(中心-太さ/2~中心+太さ/2)となります、中心基準に拡大されるので、若干数値がややこしくなります。

f:id:tktknkyo:20181121012745p:plain

グラフとしては、このようになっています。若干ややこしそうですが、基本は四則演算です。

 

f:id:tktknkyo:20181121015703p:plain

このように区切って考えていきます。

まずは赤

 

左下の三つはタイリング数を出していて、それを1で割っています。

大きさの設定でしたものと同様、つまり大きさをそのまま取得します。

数値は0.25

 

次の紫

こちらは、大きさから0.5で乗算、つまり半分にします。

数値は0.125

 

最後に黄色

-0.5から、先ほどの太さの半分を加算します。

数値は-0.375

 

先ほどの並べる処理と加算すると、これで綺麗に上から並ぶようになります。

 

考え方の元としては、大きさを変えると、中心基準(座標0.5)に動くので、その分だけ上に動かそうというわけです。

但し、太さも中心基準なので、そのまま-0.5して、半分だけずらすと...

f:id:tktknkyo:20181121020545p:plain

このように、タイリング処理により、上下に出てしまいます。

これは、元々が中心から上に行っている部分、つまり太さの半分が下に行っていることになります。

なのでここの数値分だけ、移動量を下げてあげる必要がありました。

 

f:id:tktknkyo:20181121020745p:plain

この時点で、漸くこの横線部分は完成です!

 

【縦線の作成】

 

続いて縦線の製作ですが、横線のデータをほぼ流用で作成していきます。

まず、全ての関数内にある、TilingからYを取得している部分を、Xに差し替えます。

f:id:tktknkyo:20181121021230p:plain

 

更に、Vector Float2の部分の接続の、上下を差し替えましょう

f:id:tktknkyo:20181121021432p:plain

 

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 

 

f:id:tktknkyo:20181121021535p:plain

 

これにより、横線で上から下に並べていたものが

縦線で左から右に並ぶようになります。

f:id:tktknkyo:20181121021737p:plain

回転を弄らなくても、簡単にこの様できます、これでほぼほぼ完成ですが、色の数値が高すぎるので、ここだけ調整します。

 

f:id:tktknkyo:20181120191821p:plain

数値的には、こうしたいわけです。

 

 

f:id:tktknkyo:20181121022710p:plain

ノードのグラフとしてはこんな感じ。

横線では、Yのタイリング数のみで割っていた部分を

XとYのタイリング数で2回除算しています。

 

【仕上げ】

f:id:tktknkyo:20181121023055p:plain

作った二つのラインを、BlendでAddで合成し、使いやすいようにOutputも繋げておきましょう。

 

 

f:id:tktknkyo:20181121023311p:plainf:id:tktknkyo:20181121023352p:plain

ちゃんと作れていれば、タイリング数を自由に変えても問題なく動くと思います。

 

 

【ちぎれ部分を作成】

では、次はちぎれていく処理の部分を作りましょう。

f:id:tktknkyo:20181120184255p:plain

上にはったこのグラフの、右の黄色の枠の部分です。

「Pixel Processor」ノードを使います。

f:id:tktknkyo:20181121023736p:plain

タイプがGrayscaleにしましょう、そのまま下にある、編集をクリックして編集画面へ

 

まず、このノードでしたい事は、読み込んだ数値が1なら1を返し

それ以外は0を返す、という処理です。

f:id:tktknkyo:20181121023950p:plain

実際に組んだものがこちら

 

左上の$posは、GetFloat2で取得してきます。

これはXとYの位置を、割合で示してくれる変数です。

 

その右の「SampleGray」

f:id:tktknkyo:20181121024420p:plain

このノードは、読み込んだデータを加工する際に必要、と覚えておいてください。

基本的にGetFloat2で$posを取得したものをそのまま繋ぐのが、基本的な流れとなります。

この時点で、「Pixel Processor」ノードが読み込んだ情報をそのまま映してくれるはずです。

 

その右の==とあるノード「Equal」は、上の入力と、下の入力が、同じかどうかを判定します。

正しいかor正しくない、どちらかの情報となります。

f:id:tktknkyo:20181121024857p:plain

 

その後の?:とあるノードは「If...Else」

f:id:tktknkyo:20181121025201p:plain

このノードは、一番上の入力で正しいかor正しくないの情報をいれると

正しい場合は、真ん中の入力

正しくない場合は下の入力が出力されます。

 

f:id:tktknkyo:20181121023950p:plain

つまり、このグラフで言うと、読み込んだ情報が、1であるかどうかを判定し

1であれば、1を返し

そうでなければ、0を返します。

 

処理としてはこれで終了です。

 

【仕上げ】

 

f:id:tktknkyo:20181121025636p:plain

最後の組み込みを

 

左上は、好きなノイズを使いましょう。

その右のタイリング処理は、トランスフォームにある

f:id:tktknkyo:20181121025814p:plain

このノードでしています(ここの処理の自動化はまだされていません)

 

それを、Blendノードで加算します。

加算したものを先ほど作った「Pixel Processor」につなぐと、白or黒になるので、この情報を減算してあげると、ちぎれて消える表現となります。

 

 

今回は簡単な処理...のつもりが長くなってしまいました...

処理的には、まだまだ機能不足な所もありますが、既に長くなってしまったので一旦ここまでです。

色々可能性はあると思うので、詰めていきたいと思います。

中々エフェクトで使ってる人でないと需要はないかもしれませんが。