【SD】スプライトシートを作る②(ちぎれ表現用
今回は、以前のこの記事の改良版となります
以前作ったものを改良していきます
今回の記事は、この以前の記事を見ている前提の部分もありますのでご了承ください。
今回も、基本的に4*4のマス目で進めていきます。
Verは2018.2.0です
【改良内容】
以前には対応していなかった、ノイズ自体を並べる処理も追加したりして
使いやすいように改善していきます。
根本的な作り方自体を変えています。
【パラメータ一覧】
パラメータはこのようになっています。
Tiling
XとYでそれぞれいくつ並べるかを選択
出力選択
読み込んだノイズだけを出力するのか
パターンだけを出力するのか
合わせたものを出力するのかの選択
正規化
1コマめの時点でちぎれが出るようにするのか、出ないようにするのかの選択
Patter_Pow
パターンの色に対して敵用するべき乗の指数
Noise_Pow
ノイズの色に対して敵用するべき乗の指数
【ノードの全体図】
ノードの全体図としてはこんな感じです
今回は、調整しやすくする為の、正規化やPow系のパラメータなどの敵用の為に増えているノードなどもあります。
【マス目の制作】
まずは、ベースとなるここから
以前の作り方から改良して、1つのFX-MAPで作っています
中身は非常にシンプルな構造です。
以前のように、TilingのInt2の変数から持ってきます。
IterateノードのIterationsを編集します(所謂反復回数です)
今回は、一つのFX-MAPで作るので、XとYのタイリング数を乗算したものが、そのまま反復回数となります。
Quadrantで設定しているパラメータはこの3箇所になります(青くなっている部分)
Pattern Offsetは、BranchOffsetに内容は結合しているので、以前の記事と、編集している部分は実質変わりません。
Patternは前回同様Squareに設定しておきましょう。
Color/Luminosity
ここでは色を設定します
ノードツリーとしてはこんな感じになりました。
ここは複雑なことはやってはいません、タイリングのXとYを乗算して、反復回数を取得してきて
現在の反復回数から、全体の反復回数を割る事で0/16~15/16に変換します
Pattern Size
BranchOffetよりも、構造が単純なこちらから
こちらは単純に一つ一つの大きさを制御します
ノードツリーはこのようになっています。
こちらは、各サイズを、タイリング数で割った大きさにしています。
Branch Offset
こちらは、色と大きさを設定したものを、実際に並べる処理を作ります。
フレームでのコメントを見てもらえれば解ると思いますが
基本的に原点が中心になるものを、左上にするのと、順番に並べる機能を作っています。
まずは、上半分の並べる処理を作ります。
具体的にはこのような模様になります
中心からになっていますが、ここの座標を変えるのは、後でやるので一旦、この順番に並べる処理を作りましょう。
並べる処理の部分の全体図はこうなっています。
まず、何マス毎に並べる必要があるのかを調べる為に
Tilingの変数の要素を分解します
今回の例では4*4なので、4マスづつ並べます
まずは横に並べる処理から
横のタイリング数である、Xを使います
反復回数を取得してから、そこからタイリング数で割ります
反復回数は0~15が出力されて、4で割るので
0/4~15/4になります
1を超えると画面外に出かねない、1を超えないように小刻みに並べても
ちゃんと並んでくれないので、この処理を入れます
これは1で割った余りを出力します。
1で割った余りは、小数点以下を切り出すのと同じになるので
これにより、4/4の時点で小数点以下のみ切り出すと0になり
その次の5/4は、1/4と同等になります。
これにより、左から右に並べて、右端まで行ったら左に戻る
というループして並べる事が出来ます。
次は縦に並べます。
こちらは、縦と横のタイリング数が両方必要になってきます。
まずは、反復回数から、横のタイリング数で割ります
こちらは縦でやったものと同様です。
今回は、ここから小数点を切り捨てます。
これにより、1~16の反復が0~3に変換されます
その変換されたものを、縦のタイリング数で割ります、そうすれば0~3に変換されていたものが0/4、1/4、2/4,3/4に変換され、これで敷き詰めることが出来ます。
最後に、それぞれXとYとしてFloat2に変換しておきましょう。
次に、原点を左上に持っていく処理を作ります、こちらは比較的単純です。
このように、左上に座標が来るようになります。
まずは左に寄せる処理
タイリング数の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というのは、一つのコマサイズの半分の大きさです、
ソフトの都合上、0の位置にすると、このようにタイリングの処理が入ってしまいます。
次は上に持っていく処理...ですが
グラフノードツリー見てもらえば解ると思いますが、左に持っていく処理とほぼ変わりません、タイリング数のXをとってくるか、Yをとってくるかが変わるのみです。
最後に、作った要素をそれぞれ合成して完成です。
この様になっていればOKです
【タイリング処理の制作】
次に、先ほどの設定を流用して、読み込んだデータをタイリングさせます。
先ほどマス目用とパラメータを流用しているので、常に同じタイリングとなります。
まずは、一旦何でもいいのでノイズなどを、2番目の入力に繋げてから
マス目を作ったFX-Mapをコピーして、FX-Mapの編集をします。
Quadrantノードの、Colorの関数を編集し、Floatで1の定数を指定して、出力ノードに設定します。
下は、マス目を作った際のデータなので、消しても構いません。
この時点で真っ白になっています。
Patternを、Input Imageに変更します、これで読み込んだデータを使用出来ます
Input Image IndexでInput Image 0に設定する事で、第二入力のデータを読み込むことが出来ます。
順番に並べる処理は、マス目を作った時に作ってありますので、この時点で綺麗にタイリングしてくれます。
この時点で、BlendでAddした後に、PixelProcessor(中身は前の記事参照)で加工すればとりあえずは完成です。
ここからは、これを更に使いやすい改善をしていきます。
【出力選択】
機能追加の一つ目はこちら、この三つのうち、どれを出力するのかを選択出来るようにします。
パラメータはInteger1の、ドロップダウンリストにすると、リストを作れるので、それぞれ入れましょう。
ブレンディングにある
このノードを使って、どれを出力するのかの選択をします。
パラメータはこうなっています
Input Numberは、入力する数なので、今回は3
Input Selectionは、実際に出力する部分になるので、先ほど作った「出力選択」のパラメータを設定しておきましょう。
あとは、それぞれ選択するだけで大丈夫です。
【正規化】
良い名前がい思いつかなかったのでこの名前になっています。
見やすくするために2*2にしています。
ノイズ+パターンにのみ有効で
補正の有りor無しの選択で、有りにすると、1コマ目が無地になります。
UVアニメで再生した際に、1フレーム目から契れて描画が見にくいんを防ぎます。
また、以降のフレームも、破綻しないように少しだけ補正が掛かります。
まずはパラメータを作りましょう
Boolean型で作ればOKです。
この調整はPixel Processorにて行います、ノードの位置としてはここになります
読み込んだノードの直後です、並べたりする処理の前のノイズに補正をかけておく形となります。
ざっくりとノードの中身はこんな感じです。
簡単に中身の説明をすると、4*4の場合15/16を掛けています2*2なら3/43*3なら8/9になります。
これでうまくいく理由としての解説を挟みますと
ちぎれ表現での契れている部分は、ノイズから、定数を加算して1の部分を千切れる部分にしています。
実際に処理しているのは、この赤枠の部分です。
SubstanceDesignerでは、関数などの一部以外では基本的に数値は0~1として扱いますので、1が上限です。
ちぎれ表現自体は、定数を加算して1(超えた分は1になる)の部分のみ取得しています、1コマめは加算している定数が無いので
1未満であればちぎれる部分が一切無くなりますので、ノイズから15/16で掛けると、全て1未満になるので、ちぎれる部分が全て無くなります。
関数側の計算に戻ります。
赤枠では、タイリングのXとYを掛け算して全体のコマ数を出します
黄枠では、読み込んだノイズをコマ数で割ります
緑枠では、読み込んだコマ数から1を引きます
紫枠では、緑枠を掛けます
コマ数で割った後に、コマ数から1を引いた数値を加算する事で4*4なら16で割ってから15で掛けるので、実質15/16で掛けています。
最後に、ノードツリーに差し込みましょう
ブレンディングの
このノードを使います、単純なスイッチです
switchの変数に、作った正規化を入れます
その後、Pixel Processorを通るのと、通らないのをそれぞれ接続して、この補正を有効にするかどうかを設定できます。
【Patter_Pow&Noise_pow】
これはべき乗計算です、コントラストを調整したりしやすいように、あると結構便利です
ちぎれ表現の動き方が簡易的ですが、結構制御できるようになります。
Float1型で両方パラメータを作ります。
調整からこのノードを使います
このノードだけでほぼほぼ機能完結します
ノイズ側は、ノイズの直後に入れ込みます、補正処理したPixel Processorよりも前です。
一つしかないパラメータに、Noise_Powを設定して終了です。
パターン側にも同じ要領でパターンの直後に入れ込み、今度はPatter_Powの関数を設定すれば終了です。
最後に、最初に接続していたノイズをInputに
最後のMulti Switch Grayscaleの後にOutputを繋げて、完成です。
最初に上げたグラフと少々違いますが、配置が違うだけですので、この部分は自分の見やすいように調整してあげてください。
今回は長めになりましたが、少しでも参考にしていただけでば幸いです。
SubstanceDesignerでのスプライトシートの記事
次はSubstancePlayerなどを併用してもっと細かいのを作る例を予定しています。