【UE4】バリアーっぽいマテリアル

今回は、こんな自分を守る防壁っぽいマテリアルのつくり方を

スクロールや、全体の光が強くなったり弱くなったりの明暗も付けていきます。

今回作るマテリアルの全体図はこちら

今回使用したテクスチャは、こんなシームレスなテクスチャ１枚です

そこまで複雑ではないかなと

この例では、一部パラメータ化してあるノードもありますが

必要そうな部分だけパラメータ化しておいてください。

まずは、左上のこの部分

この部分で何をしているかというと、テクスチャを使い、マテリアル全体の模様を作っています。

白や水色の部分です

また、上のColor1とColor2の部分は、殆ど一緒です

違う部分をあげるとすれば、この○で囲った３箇所です

具体的にどこを変える用なのかというと左から

・スクロール速度

・テクスチャのタイリング数

・色

この３つの要素です

また、「TextureSmple」をパラメータ化したノードがありますが

名前が同じであれば連動します

片方を変えると、もう片方も変わります

同様に、パラメータ化した定数ノードも

名前が同じであれば連動します

連動するのは、定数ノードではそこまで大きな意味にはなりませんが

テクスチャの場合は、同じテクスチャを使いつつ

UVsに違うデータを入れたい場合に重宝します。（インスタンス側でも連動します）

まずはこの部分

赤の部分は、スクロールする為の数値を入れています

内容は、定数の0と、パラメータ化した定数をそれぞれ「AppendVector」で、RとGの２チャンネルの情報に合成しています。

「AppendVector」このノードはAとBチャンネルの情報を合成します単純な足し算ではなく、チャンネル数を増やします

この場合0という１チャンネルと、0.3という１チャンネルを合成して

0と0.3という２チャンネルの情報にしています。

次に黄色の部分で、スクロールさせてます

「Panner」がスクロールさせるノードで、Speedに接続した情報でスクロールさせます

で、なぜ態々２チャンネルの情報に事前にした理由は

RとGでXY軸が其々別にスクロールし、１チャンネルの場合、必ず斜めにスクロールします（同じ数値になるので）

今回の場合、上にのみスクロールしたかったので、Rを0に固定し、Gには０.３といれることで、上方向にスクロールします。

青の部分は、タイリングの部分で

タイリングさせる「Texture Coordinate」と乗算させる「Multply」に繋いだ場合、乗算した数値分タイリングします。

つまり、ここの数値分タイリングします、当然定数ノードをつないでも大丈夫です

パラメータ化したノードであれば、インスタンス側でタイリング数を調整する事もできます

次は、後半のこの部分

まずは赤い部分UVsに繋ぐ要素は、基本的に「Add」（厳密な理由までは解らないです、申し訳ない）

それを、テクスチャのUVsに接続、この時点で、タイリングとUVのスクロールがしているはずです

その後の「Multply」は、全体が明るすぎた為の調整なので、なくても問題ないです。

黄色の部分は、このノード全体の色を決めます

一番左のAllColorは、パラメータ化した４チャンネルの定数ノードで、なくても構いません、今回はインスタンス側でも、全体の色を調整しやすくするために入れてあります

基本的な色は、真ん中の定数ノードで指定しています

それを「Multply」で接続します、これでAllColorの数値を変えると、全体の色が調整できます。

青の部分は、出来上がった模様と色の要素を「Multply」で乗算しているだけです。

あとは、上にあったようにこの部分を複製して、一部だけ変更します

次に、下の方にある、色の明暗とある部分。

殆ど似たノードですが、赤の部分の数字だけ変えてあります

この部分は、色が強くなったり弱くなったりする部分を制御しているのですが

１パターンのみだと短調になるので

ここで差分を付けています、ここの数値は、色の明暗の変わるタイミングを制御していて

数値が小さいほど、遅く、高いほど早くなります

この部分は、殆ど左から右に繋いでいるだけです

一番左にある「TIme」ノードこれは、時間を数値で返してくれるノードで、延々と数字が増え続けます

その次に、定数とこの「TIme」を「Multply」で乗算します。

こうすることで、数値の増える速度が変わります

それを「Sine」につなぎます、これは三角関数です

どんな用途なのかというと、UE4での説明ではこうなっています

「Time」と併用する事で、-1～1の数値を緩やかに行ったり来たりするようになります

三角関数がよくわからなくても「Time」とつなぐことで、こういう結果になる、とだけ覚えてもらえばいいかなと。

その後の「Abs」アアブソリュート、絶対値を取るノードです、絶対値は簡単に言えば正の数ですマイナスをプラスにします。

これを合わせることで-1～1の波が、0～1の波になります

その後は「Multply」に接続、Bにはノードは接続せずに0.5と入力

こうすることで0～1の波が半分になり0～0.5になります

更にその後「Add」に接続、Bにはノードは接続せずに0.5と入力

これにより0～0.5の波が0.5～1の波になります

つまり、このノードのまとまりは、一定間隔で0.5～1を出力する為です

そして最初の数値により、その波の速度を調整できます。

真ん中辺りにある、スクロールと明暗合成

とある部分

ここでは、Colorで作った模様と、色の明暗の部分で作った波をそれぞれ「Multply」でで乗算します。

色の明暗の部分で、最後に0.5を足した理由は、数値が0になってしまうと完全に真っ黒になり、明暗が激しくなりすぎたためです。

防御系のバフ的な物をイメージしたマテリアルなので、明暗によって完全に消えるタイミングがあるのは、不自然ではないか？との考えからです。

「Multply」で繋いだあとは、その二つを「Add」で足し算します、これでスクロール速度と明暗のランダム性が出たと思います

上の方にある、フレネル処理という部分

そもそも、ここが何のためかというと。

この、表面が白くなってるのが解るでしょうか、ここを作るための処理です

このように、たとえ角度を変えたとしても、周囲が白く見えます

これにより、輪郭がクッキリします

逆に、中心のみ薄くすることで、キャラクターと重なった時にキャラが見えにくくなるのを防いだりする事もできます

まず、メインとなる「Fresnel」というノード

主に上の二つのピンで、このノードを操作します、ただこのノードの影響は非常に解りにくい＆影響が非常に強く出る

事が多かったので、一度パラメータ化した定数ノードを繋げて、インスタンス側で調整するのをオススメします。

それらを、色を指定している定数ノードと「Multply」で乗算します。

次は右上辺のなんか寂しい部分

左にある「Add」で、フレネル処理の部分と、スクロールと明暗合成の部分を加算します

で、その後にある「Depth Fade」のノードの解説を

これは不透明な地形などに、刺さった時の刺さり具合を軽減するもので

上のピンに接続したものを、下のピンに接続した情報で刺さり具合を軽減します。

定数ノードの他、詳細の部分でも数値を指定できます

これが比較です、左が数値0（無効化）

右が数値100（デフォルト）

です、ちょっと効果が解りにくい部分もあるかもしれませんが、理由がなければ、入れておいたほうが不自然さが解決される部分も出てきます

ただ、効果がわかりにくいからといって、極端に大きい数値を入れると、全体が半透明になるということになりかねないので、ご注意を。

オパシティとある部分のパラメータ化した定数ノード、これは全体のα値をインスタンス側で変えるためだけです

最後に、リフラクションの部分

左の場外に出てるピンは、「TIme」ノードにつながってます。

上に上げたエディタ全体図を見てもらえばわかると思いますが

かなり遠い位置から引っ張ってきているので省略しました。

Sine、Absは明暗の部分でやったので省略

その後の「Multply」で、数値を調整する事で、リフラクションの強度を調整します。

その後の「componentMask」は、模様部分と、加算した情報を持ってきていてRGBチャンネルが入っているので、Rのみにして、１チャンネルにします（なくても問題はないです）

「Add」や「Multply」が至る所にあるので、数値が１を超えている場合もあるので、この時点で「Clamp」で0～1の範囲に収めます。

「Clamp」の後に「Multply」を入れてましたが、考えたらこれ必要ないので消します。

「Clamp」で0～1になったので、それをそのまま「OneMinus」にすると数値が反転します、これにより、リフラクションの効果も出ると思います。

今回のフレネルですが

インスタンス側でパラメータを変えると、こんな表現なんかも簡単に出来たりしますので、球状のものにはかなり相性良いかなと。