moyasiエフェクト館

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


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

【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黒になるので、この情報を減算してあげると、ちぎれて消える表現となります。

 

 

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

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

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

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