もんしょの巣穴blog

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

[SD] Speckleでお手軽クオリティアップ

今回はお手軽にクオリティアップを行うため、Speckle を加える方法を書いていきます。
ただし、今回紹介する方法は1つの手法でしかなく、別の方法でも同じ効果が得られるのであれば構いません。
むしろもっといい方法があるなら教えてほしいです。

Speckleというのは英語で小さな斑点、ぽつぽつなどの意味がある言葉です。
多くのチュートリアル動画ではすぺっこー、すぺっこーと言ってるのが聞けるはずです。
ここでいうSpeckleというのは、レンガやタイル、コンクリートなどに点在する小さな穴、凹みです。
ただ、タイルの場合はタイルの模様として入っているぽつぽつもSpeckleと呼びますが、今回は傷っぽい凹みです。

綺麗でシミひとつないタイルというのはそれはそれで綺麗ではありますが、やはり現実味はありません。
リアリティを上げるには汚れや、今回のSpeckleなどを入れてやるべきです。
まあ、Speckleを入れただけではリアリティは上がりませんが、汚れとかを入れたけどちょっと物足りないな、という場合にはSpeckleを入れてみるとクオリティが上がる印象です。

では、まずはその綺麗なタイルを作りましょう。
とりあえずベースカラーと法線はこんな感じで設定します。

sd065.jpg

ラフネスは適当に単色でも構いませんが、タイルと目地を別々にしても構いません。
ベースカラーに入力しているレベルノードは目地とタイルをきちんと分けるための処置です。目地が細くなるように調整しています。
これを行わないとタイル部分が黒くなっていまいちタイルっぽさが失われます。
法線の強度は 10 を指定していて、少し強めに出るようにしました。
この方がタイルっぽいから、というのが理由です。

このノードによって作成されるテクスチャはこんな感じです。

sd066.jpg

これはこれで綺麗ですが、近未来の超科学的な研究室みたいな無機質な感じを受けますね。
では、これにSpeckleを施していきましょう。

まずはノイズの選定です。
小さな斑点を付ける必要があるため、Perlinノイズのような滑らかなノイズや何らかの形状を示すようなノイズは向いていません。
この手の処理に向いているのはほんとにノイズっぽいノイズで、[Dirt] や [BnW Spots] などのノイズを用いることが自分は多いです。
大きめの穴などであれば [Gaussian Spots] も使えるでしょう。
今回は [Dirt 3] を使ってこんな感じにしてみました。

sd067.jpg

ノイズはそのまま使うのではなく、レベルノードを用いて白点を少なくします。

さて、Speckleは小さな穴として使用しますので、このまま法線化するのはよろしくありません。白点が凸形状として捕らえられてしまうからです。
なので、白黒を反転させてから法線にします。

sd068.jpg

法線の強度はお好みで。今回はデフォルトの1.0にしました。
ここで生成した法線を元の法線に結合させます。これには [Normal Combine] ノードを使用します。

sd069.jpg

このようにして法線の結合は完了です。

さて、今回はタイルの法線とSpeckleの法線をどちらも法線変換してから結合しています。
もちろん、高さ情報の段階で結合(タイルの高さからSpeckleの高さを減算)し、それを法線に変換することも別に悪いことではありません。
ここでそのような手法を採っていない理由としては、タイルの法線とSpeckleの法線の強度を一緒にまとめてしまうのがあまりよろしくないと感じたからです。
最終的には好みの問題ではあるのですが、タイルの法線を調整していたらSpeckleの法線が強くなりすぎてしまったので高さ結合の段階でSpeckleによる穴を浅くする、というのはあまり健全ではないような気がしました。
何度も言うようですが、最終的には好みの問題なので、実際に使用する人の意見を取り入れつつ決めると良いかと思います。

小さな穴は法線で表現が可能なのでこれでおしまいでもいいのですが、せっかくだからもうちょっと調整しましょう。
穴が開いている、ということは、その部分のベースカラーやラフネスに変化が加えられている可能性があるということです。

まずはベースカラーですが、AOというわけではないですが、少し暗くしておきます。

sd070.jpg

上のレベルノードは [Dirt 3] から接続されたノードです。2個上の画像にも載っているレベルノードと同じです。
ブレンドノードはモードを減算にしておき、不透明度はお好みで。

次にラフネスですが、目地は白(粗い状態)とし、タイルは少し滑らかに、Speckleはタイルより粗くする感じにします。

sd071.jpg

[Invert Grayscale] ノードの入力はタイル形状にレベルを掛けたもので、ベースカラーの生成に利用しているものです。
目地は白でいいのでタイル部分にそれなりのグレーを入れるために単一カラーを加算しているのが真ん中のブレンドノードです。
最後のブレンドノードでSpeckleを加算しています。これでSpeckle部分が粗くなります。
元からどの程度粗くなるかは不透明度で調整しましょう。

で、最終結果はこんな感じ。

sd072.jpg

画像の左側がSpeckleなし、右側がありです。
どちらがよりリアリティがあるか、と言われると割と難しいところな感じですね。
理由としてはSpeckle以外にこれといった粗がないので、Speckleが浮いてしまってるようにも見えるためではないかと思います。
普通、このような傷のあるタイルというのは経年劣化しているものがほとんどなので、それなりに劣化してるように見えないとよろしくないですね。

今回は小さな傷ということでちょっと凹ませてちょっと色を変えたくらいですが、もっと大きな傷になった場合はそれぞれのマテリアルに合わせた壊れ方をしてやる必要がある点に注意してください。
これを怠るとやはりリアリティが失われてしまうでしょう。

というわけでお手軽テクニックの1つを紹介したわけですが、お手軽だけにそこまで大きなクオリティアップは図れません。
しかし、この手のテクニックを色々と合わせていくことでマテリアルのクオリティを高くすることが出来ます。
小さなテクニックを1つ1つ自分のライブラリに加えていくことで、高クオリティなものを素早く作ることができるようになるのがプロシージャルの利点ではないかと考えています。
ですので、こういうテクニックがあるよ!というネタを持っている人は色々公開してくれると大変ありがたいですね。

スポンサーサイト
  1. 2015/10/22(木) 02:07:23|
  2. Substance Designer
  3. | トラックバック:0
  4. | コメント:0

[SD] FX-Mapの使い方

今回はSubstance Designerの謎ノード、FX-Mapについて得られた知見を書いていこうと思います。
いろいろと調べてみたのですが、まだまだわからないところがあるノードでもあります。

言葉で説明するより実際に使ってみましょう。
まずはパレットの中からFX-Mapノードを選択し、追加してみましょう。

sd046.jpg 

配置しただけでは何も表示されません。
入力ピンは [バックグラウンド] と [Input Image 0] です。
とりあえず、[バックグラウンド] には均一カラー(グレースケール)の黒を、[Input Image 0] にはShapeノードでディスクを入れてみましょう。

sd047.jpg

背景が黒くなっただけでやっぱり何も表示されません。
入力ピンは [Input Image 1] が新たに追加されました。
残念ながら、この増えたピンに何かを入力しても事態は改善されません。
プロパティペインを見てもそれっぽい何かは存在していません。

ではどうするか?
FX-Mapノードを右クリックすると、Ctrl+Eで [FX-Mapを編集] というコマンドが存在するのがわかります。

sd048.jpg

そうです。このノードは内部を編集する必要があるのです。
クリックすると以下のようにFX-Map内部のグラフを編集できるようになります。

sd049.jpg

最初にあるのはこのクワドラントというノードのみです。
とりあえず、スペースキーを押してどんなノードが配置可能か見てみましょう。

sd050.jpg

コメント関連はどこにでもあるので無視するとして、配置可能なノードは反復、クワドラント、切り替えの3つしかありません。
この3つのノードはどんなものかというと、それぞれ for, switch, if という、プログラミング言語ではお馴染みのフロー制御命令です。
つまり、FX-Mapというノードは、これらのフロー制御を用いて入力されたイメージなどを加工するノードなのです。

言葉で説明してもわかりにくいので、FX-Mapをイメージした簡単なフローチャートを書いてみました。

sd059.jpg 

FX-Map開始の次は100回ループです。ループ内と書かれた矢印以降の処理を100回行います。
その次にまた8回ループです。
800回ループすればいいだろって?まあ、そうなんですけどイメージのためです。
次は条件分岐で、チャートには書かれていませんがランダムに設定された位置が右半分か左半分かで処理を分けます。
右半分なら円を描画し、左半分なら四角を描画します。

このようなフローの入れ子構造で処理する機能はSDの通常のノードグラフには存在していません。
処理としてできることは簡単なものに限られますが、FX-Mapはこのような入れ子構造を実現することが出来る数少ないノードなのです。
ちなみに、このフローチャートをFX-Mapで再現するとこうなります。

sd060.jpg 

見ての通り、FX-Mapのノードグラフは上から下に進んでいきます。
これはフローチャートを意識しているようにも見えますね。

では各ノードを見ていきましょう。
前述のフローチャートの実際の処理部分は円を描画、四角を描画の部分です。
これに当たるのは [クワドラント] というノードになります。
このノードは2種類の意味を持っていて、個人的にはこれがFX-Mapをわかりにくくしている要因の1つじゃないかと思っています。

クワドラントノードで図形の描画をするためにはプロパティペインのパターンから何かを選びましょう。
とりあえず、FX-Mapの初期状態に戻し、パターンを [Input Image] に変更します。これはFX-Mapノードの入力 [Input Image 0] の画像を描画するための設定です。

sd051.jpg

どうでしょうか?FX-Mapノードにディスクが表示されたはずです。

クワドラントノードのもう1つの役割は画像を4分割する機能です。
出力ピンは4つあり、左から左上、右上、左下、右下の領域を示します。
それぞれの出力ピンの先の処理は分割された4つの空間での処理を意味することになります。

実際にこの挙動を確認してみましょう。
もう1つのクワドラントノードをグラフに追加し、以前のクワドラントノードの上に置いて4つの出力ピンすべてを最初のクワドラントノードにつなげましょう。

sd052.jpg

これだけでは何も変化がありませんが、上のクワドラントノードを選択、右クリックして [ルートとして設定] を選択します。

sd053.jpg

するとどうでしょう?ディスクが4分割の空間それぞれに表示されていませんか?
どうしてこうなるのでしょう?

FX-Mapではルートとして設定されたノードから下方向に処理が進みます。ルートノードはオレンジ色になり、1つのFX-Mapでは選択できるノードは1つだけです。
この図の例では、ルートとして設定されてクワドラントによって、画像の空間は4分割されました。
そして4分割されたそれぞれの空間に対して下のクワドラントの処理(ここでは [Input Image 0] を描画する)を実行します。
いわゆる switch 命令との違いは、switch 命令が基本1回しか処理を行わないのに対して、クワドラントノードは出力ピンにつながっているものをすべて実行します。
例えば、つながっている4つのピンの内の1つを外してみてください。4つのうちの外した部分が欠けるはずです。

もう少し別の例を見ていきましょう。
下図のように設定して、左下のクワドラントノードはパターンを [Input Image] に、右下のクワドラントノードは [波] にしましょう。

sd054.jpg 

結果はこうなります。

sd055.jpg

クワドラントノードは割り当てられた画像領域を4つに分割するので、クワドラント→クワドラント→クワドラントとすると今度は16分割もできます。
これを繰り返せばより細かく空間を分割することも出来ます。

いまだによくわからないクワドラントの挙動としては、クワドラントを1つ以上通過させてしまうと、何故か画像の色が暗くなる点です。
上の図ではディスクがグレーになってしまっていますが、元イメージは真っ白なはずなんですが…
この挙動には意味があるのかもしれませんが、今のところよくわかっていません。

次に反復ノードです。これは for 文による繰り返しを実現します。
例えば下図のようにすると、クワドラントノードの処理部分を反復によって複数回実行します。

sd056.jpg

反復ノードの右側出力ピンは各ループの処理です。
反復回数のプロパティで指定した回数だけこの右側出力ピンから処理が実行されます。

左側のピンは1回のみの処理を意味します。
例えば、左側のピンに"A"という処理を、右側のピンに"B"という処理を挿すと、Aが1回処理された後にBがループ回数分だけ処理されます。
まあ、ループ前の1回だけの処理を行う機能、と考えるといいでしょう。使う機会はそれほど多くないのではないでしょうか。

さて、クワドラントノードの処理は Input Image をそのまま描画するだけの処理です。
これを何度も繰り返しても何も変化はありません。上から何度も同じ画像が書き込まれるだけです。
そこで、クワドラントノードのプロパティを以下のように変更します。

パターンサイズ幅、及び高さ:0.2
ブランチオフセット:空の関数

ブランチオフセットの関数は以下のようにします。

sd057.jpg

0~1のランダム数値をオフセットとして使用します。
結果はこうなります。

sd058.jpg

ディスクの位置がランダムに変化し、反復処理されるたびにランダム値が変化しているのがわかるでしょう。
反復を使用する場合にはランダムも一緒に使わないと効果がわからなくなってしまうでしょう。

最後に切り替えです。これはそのまま if 文と考えると良いでしょう。
プロパティペインには [セレクタ] という項目がありますが、これは左か右を選択でき、それによって処理を変更することが出来ます。
もちろん関数も作成することが出来ますが、関数の出力は Boolean でなければなりません。

例として、以下のようなノード構成があったとします。

sd061.jpg

4分割した空間のそれぞれに [Input Image] か [波] を描画するようにしています。
ここでセレクタの関数は以下のようにします。

sd062.jpg

[$pos] は空間の中心座標がどこにあるかを示しています。このx値が 0.5 未満ならTrue、0.5 以上ならFalseとなります。
つまり、空間の左側はTrue、右側はFalseということです。
切り替えノードにおいてはTrueが右、Falseが左を指します。なので、結果は左側が [波]、右側が [Input Image] になるわけです。

さて、ここまでで3つのノードの解説を行いましたが、これでFX-Mapを使いこなせるかというとそういうものでもなく、やっぱりちょっと使いにくいことが否定できなかったりします。
使いにくいと感じた部分としては、例えば反復の現在のループ回数が取得できなかったり。
棒を綺麗な円状に並べたい、と思った場合は反復時の現在のループカウントが必要になりますが、これを取得する方法が今のところ見つかってません。

そもそもクワドラントノードで設定可能な画像処理の部分がやれることが意外と限られていて、あまりいい例が思いつきません。
とりあえず、Youtubeにあったチュートリアルから草地の地面を作成する場合の処理とか、

sd064.jpg

花びらっぽい形状を円状に配置することで簡単な花を作ったりすることは十分可能でしょう。

sd063.jpg

とにかくちょっとわかりにくいノードではありますが、ループや条件分岐を任意に行える機能がSDの通常ノードには存在しないので、こういうことをしたい場合は使わざるを得ないかな、と思います。
まあ、[Tile Generator] ノードや [Splatter] ノードで十分ならそちらを使っておいた方がいいです。
どうしても任意の形状を作成したい場合にのみFX-Mapを使う、という形のほうがいいんじゃないでしょうか?
  1. 2015/10/15(木) 01:25:51|
  2. Substance Designer
  3. | トラックバック:0
  4. | コメント:0

[SD] ワープと指向性ワープ

Substance Designerのワープと指向性ワープについて疑問に思ったので調べてみました。
ワープというとワープ航法とか思い浮かべるのが日本人の基本的な思考じゃないかという気がしますが、ワープとは歪めるという意味の単語です。
名前のとおり、画像を歪めるためのノードです。

指向性ワープは比較的わかりやすいノードです。
入力ピンには歪めたい画像を入力し、強度入力にはグレースケールの画像を入力します。
指向性ワープは歪める方向をパラメータで指定し、各ピクセルについてグレースケールの値を強度とします。
つまり、強度入力の黒の部分は歪まず、白の部分は大きく歪みます。

sd041.jpg

GradientLinear2を使うとこのように真ん中から歪ませることが可能です。
また、Shapeの放物面を利用すると、ワープ方向をグリグリ動かして球の表面の模様を見ているように歪めることも出来ます。

sd042.jpg

指向性ワープはこのように歪む方向がわかりやすいんですが、通常のワープはどうなのでしょう?
普通に考えるなら、カラー画像を強度入力とし、RチャンネルとGチャンネルでそれぞれUV方向に歪めることになるんじゃないかと思います。
しかし、ワープの2つ目の入力ピンはグラデーション入力となっており、グレースケールの画像を入力することになります。

色々と調べた結果、ワープは各ピクセルのグレーの勾配を歪める方向としているようです。
強度をプロパティで正の方向に大きくしていくと白から黒に流れるように画像が歪んでいきます。負の方向ならもちろん逆転します。
イメージとしては、グレースケール画像をハイトマップと考え、高いところから低いところに絵の具が流れていくようなもの、と考えるべきでしょう。

例えば、Shapeのガウスを使うと中心部分が盛り上がったような歪ませ方が可能です。

sd043.jpg

これらのノードの使用方法は、指向性ワープについては単純に特定方向に歪ませることです。
対してワープは様々な方向に歪ませるので、例えば上の画像のレンガなどを歪ませるような用途で使用できます。

現実のレンガはすべてのレンガが綺麗な四角形になっているわけではありません。
ワープを利用することでレンガの1つ1つをばらばらに歪ませ、それっぽい映像にすることが出来ます。
BnW Spots 1にブラーを掛け、これをグラデーション入力に入れるとこのように荒い感じのレンガにすることが出来ます。

sd044.jpg

ワープのグラデーション入力にノイズを入れる場合は注意してください。
適当なノイズを何も考えずに入力すると元画像がどんなものかさっぱりわからない程度の映像になってしまいます。
以下はBnW Spots 1をブラーを掛けずに入力した後の画像です。

sd045.jpg

ほんとに元画像が何なのかさっぱりわかりませんね。
基本的にノイズを使用する場合はブラーか Blur HQ Grayscaleを使用しましょう。
なお、Blur HQ Grayscaleを利用するとブラーより滑らかに歪みます。

また、ノイズの中でもPerlin Noiseはそのまま利用しても上記のような映像にはなりません。
ワープとノイズの使い方は色々やって自分なりの使い方を確立すると良いのではないでしょうか?
[[SD] ワープと指向性ワープ]の続きを読む
  1. 2015/10/12(月) 22:23:15|
  2. Substance Designer
  3. | トラックバック:0
  4. | コメント:0

[UE4] 第4回ぷちコンを終えて

第4回のUE4ぷちコンでは4作を応募させていただきました。
動画と実行ファイルはそれぞれこちらです。

Dodge Balls!!!
https://www.youtube.com/watch?v=h1t7uisGGJU
https://dl.dropboxusercontent.com/u/39588440/DodgeBalls.zip
アストロロボ・SSK
https://www.youtube.com/watch?v=C5wAsn7uMBk
https://dl.dropboxusercontent.com/u/39588440/AstroRoboSSK.zip
まもれ!アストロロボ・SSK
https://www.youtube.com/watch?v=g890GLmqmrY
https://dl.dropboxusercontent.com/u/39588440/MamoreSSK.zip
早撃ち アストロロボ・SSK
https://www.youtube.com/watch?v=Eg8GYHsgES4
https://dl.dropboxusercontent.com/u/39588440/HayauchiSSK.zip

応募順に並べていますが、実際に作成した順番は上から3, 1, 2, 4という順番です。
開発期間も作成順番が早いほど長くなっていて、アストロロボ・SSKが実質1週間くらい、まもれ!が3~4日、Dodgeが1日、早撃ちが半日くらいです。
早撃ちは6時間弱で作っているので半日もない計算ですが、とりあえずこの程度であれば短時間で作ることは可能なわけです。

今回のぷちコンでは前回と同様に自分なりの目標を立てました。
目標は3つ。

1. 完成品のみ応募する
2. Substance系のツールを使用する
3. 複数作品(2作品以上)を応募する

1はどの段階で完成品とするかという問題はありますが、ゲームの面白さとかバランスとかはある程度あればOKという感じで、タイトルからゲームを初めてゲームオーバーになってタイトルに戻る、という流れがちゃんと出来てればOKとしました。
ゲームの面白さは追求していませんが、最低限これはゲームです、といえるものを作りました。
バランスもゲームにならないバランスでは困るので、最低限のバランスは取ったつもりです。

2はSubstance DesignerとSubstance Painterを使用することを目標にしました。
実際、プレイヤーキャラのSSKや敵モデルのテクスチャにはSubstance Painterを使用していますし、ドッジボールのテクスチャやタイトルのSSKの文字などにSubstance Designerを使っています。
SDで作ったマテリアルをSPで使いたいとも思っていたのですが、そこまではまだアーティストらしい事ができないので断念。

3は4作出したのでOK。

というわけで、ちゃんと目的は達成しました。
これは素直に嬉しいことです。

しかしながら、やはり問題や反省点も多く、主な反省点は複数作品作るために1つの作品に時間をあまりかけられない→あまり新しいことはしないで知っていることを中心にやろう、となってしまった部分でしょう。
次回は出来れば、この機能使ったことないな、という物を使ってみたいな、と思います。

ここからは今回のぷちコンでの具体的な反省点、やったこと、疑問に思ったことなどを適当に列挙していきたいと思います。
順番とかもなく思いついた端から書いていきます。

[[UE4] 第4回ぷちコンを終えて]の続きを読む
  1. 2015/10/11(日) 11:41:59|
  2. UE4
  3. | トラックバック:0
  4. | コメント:0

[SD] ShapeとTransformと、時々自作ノード

久しぶりの更新ですが、今回は軽い内容です。
ぷちコンで Substance Desinger を使った、1例としてお読みいただければと思います。

さて、今回応募したぷちコン作品は4作あって、内3作はアストロロボ・SSKシリーズとして作成されています。
このシリーズ3作品はもちろん、プレイヤーキャラであるSSKのスケルタルメッシュは使いまわしています。
この3作品全てで使いまわしたアセットは、プレイヤーキャラであるSSKのスケルタルメッシュとタイトル画面の「アストロロボ SSK」のテクスチャだけです。
他のアセットは最大でも2作までしか使いまわしてません。
アセットの使い回しを裏の目標として掲げていたんですが、こちらはあまりうまくいかなかったと言わざるを得ない。
覇王翔吼拳を使わざるを得ない。

で、このタイトル画面で使用したテクスチャですが、実は"S"と"K"の文字はSDで作成しました。
何故使ったのか?…なんでだろう?Illustratorとか持ってないし、他にこういう図形の組み合わせがしやすいツールを思いつかなかったからかな…
SSKも文字だけは元ネタの『アストロロボ・ササ』のタイトル画面を真似たかったんですよ。
ただ、画像ソフトで普通に描いただけだとうまくいかない気がしたので、SDでSとKのテクスチャを生成、これを組み合わせてタイトルテクスチャを作成しようと考えた次第です。

実際に使ったのは [Shape]、[Transform2D]、[Blend]、[Level] の4つのノードのみです。たしか。

[Shape] はいくつかの基本形状を生成してくれるノードで、それらを組み合わせることである程度複雑な形状も作成できます。
例えば、こういう図形なら比較的簡単に作れます。

sd029.jpg  

だんご3兄弟。特に意味はない。

この [Shape] ノードには [レンガ] というパターン形状があり、これは普通だと [スクエア] と何ら変わらないのですが、[Pattern Specific] のパラメータをいじることで角丸の四角形を作ることが出来ます。

sd030.jpg 

元ネタのSの文字は角丸の四角形を組み合わせたような感じなのでこれを使いますが、このままだと端の部分が薄れてしまいそうなので、
これを [Level] ノードでくっきりさせて、あとは [Transform2D] ノードで移動や拡縮、[Blend] の加算と減算を組み合わせて作っていきました。
十分納得できるクオリティとはいえないものの、元ネタっぽさは出たと思います。

ここで [Transform2D] を使う際の注意点。
適当な [Shape] ノードを [Transform2D] ノードで縮小すると、この図のようにタイリングした結果が出てきます。

sd031.jpg 

タイリング設定に限った話ではないのですが、SDでは各ノードが共通して持っている情報(タイリングや解像度)は入力イメージの情報や親(通常はSubstanceマテリアル)の情報を引き継ぎます。
これを相対的ではなく絶対的に設定するには、プロパティペインのこの部分を変更します。

sd032.jpg

こうすると絶対的な情報として設定が可能になるので、ドロップダウンリストから [タイリングなし] を選択すればこのようにタイリングがなくなります。

sd033.jpg

大抵、SDのチュートリアル動画を見ていれば出てくる項目ではあるのですが、知らない人もいるかと思いますので念のため解説しました。

もう1つ、[Transform2D] を使用する際の注意点ですが、2Dビューを使って適当に平行移動、回転、拡縮を行えばOK、というのであれば問題はないのですが、
正確な数値を用いたい、特に拡縮+回転を正確に行いたい場合は少し面倒です。
というのも、[Transform2D] の回転、拡縮パラメータUIは相対的なものだからです。

例えば、ストレッチの幅を50%、つまり半分にしたとしましょう。

sd034.jpg

ちょっと細すぎる気がします。もうちょっと太くしたいので60%を設定してみましょう。

sd035.jpg

さっきより細くなった!
このように、[Transform2D] ノードの回転と拡縮は、現在の状態に対して適用されるので、元の状態に対して絶対的な形では指定できません。
指定する方法としては、トランスフォームマトリックスの項目の右下にある [行列] ボタンを押して直接行列を設定するしかありません。

sd036.jpg

しかしこれを直接設定するのは難しいです。行列の意味がわかっていても計算が面倒なのに、行列って何よ?高校の時習った気がするけど…という大半の人にとっては意味の分からない代物でしかありません。

というわけで、[Transform2D] のように2Dビューで編集はできないものの、比較的わかりやすいパラメータ群でトランスフォームを設定できるグラフを作ってみました。
はい、ドン!

sd037.jpg

入力となるイメージを [Transform2D] ノードにつなげて、その結果を出力ノードに出しているだけです。
とはいえ、もちろんこれだけではありません。

まず、グラフの入力パラメータはこんな感じ。

sd038.jpg
↑クリックで拡大

次に [Transform2D] のパラメータの設定ですが、オフセットは入力パラメータの offset がそのまま設定できます。
最後にトランスフォームマトリックスのパラメータは空の関数を作成し、内部をこんな感じで作成します。

sd039.jpg
↑クリックで拡大

あとは入力がカラーの場合とグレースケールの場合とで2つの、でも内部は同じグラフを作成すればOKです。
コピーして入力だけ変更するのが簡単ですね。

完成したグラフを別のグラフで使うとこんな感じ。

sd040.jpg

パラメータとしてはこちらの方がわかりやすいですね。
2Dビューで編集するだけでいいのであれば通常の [Transform2D] を使用し、正確な数値が欲しい場合はこちらを使う、という感じで使い分けてもいいかと思います。

AbsTransformグラフをファイルで公開。

https://dl.dropboxusercontent.com/u/39588440/Substance/AbsTransform.sbs

自由にお使いください。
  1. 2015/10/09(金) 02:15:33|
  2. Substance Designer
  3. | トラックバック:0
  4. | コメント:0

プロフィール

monsho

Author:monsho
ゲームプログラマ?

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

カテゴリー

ブロとも申請フォーム

この人とブロともになる

ブログ内検索

RSSフィード

リンク

このブログをリンクに追加する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。