moyasiエフェクト館

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


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

【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などを併用してもっと細かいのを作る例を予定しています。