[UE4] [UMG] UIデザイナーのマテリアル基礎。「＋－×÷についてその3 Saturate （もしくは Clamp）」

UIデザイナー向けの、UMGのデータの作り方を紹介しています。

今回の内容

マテリアルで形状を合成する際必要になるノード、 Saturate （もしくは Clamp） の使い方を覚えます。

使用するノード

Saturate　サチュレート　
Clamp　クランプ　

準備

前回は、加算、減算、乗算、除算のイメージの合成を確認しました。
今回は、 Add 加算と Subtract 減算を使用します。

前回のデータから Subtract, Multiply, Divide のノードを削除して、
以下のようにノードをつないでください。

イメージの不透明度を変えます。
以下の図のように、
AddノードとMain Material ノードのオパシティの間にMultiply乗算を入れConstantをつなぎます。

イメージを透過させる

Constantの値を0.5に変えて不透明度を50%にします。

期待したイメージは、下図左のように全体が均一に透過している状態ですが、
実際は中央部分が不透明になりました。

前回使用した図をもう一度見てみましょう。
左右の円の値は 1 、重なった部分の値は 2 です。

こちらに 0.5 を乗算すると…
左右の円は0.5、重なった部分は1になり下図のようにノードをつなげた状態と同じになります
つまり「見た目1のように見えても、内部的には 1 以上の値の場合がある」ということです。

Saturate （もしくは Clamp）

こんなとき使えるのが Saturate （もしくは Clamp）です。
グラフエリア右クリックでコンテクストメニューから Saturate を呼び出します。

Saturate を Addノード の後ろにつなぎます。
期待したイメージになります。

Saturate は 「1」より大きい値を「1」に固定し、「0」より小さい値（マイナス値）を「0」に固定します。

今回の例では、円が重なった部分のノードの値が1Saturateにより 2 → 1 となり、乗算で値を調整しても問題がなくなります。

同じようにClampをつないでみましょう。
結果はSaturateと同じになります。

Saturate と Clamp の違い

Saturate と Clamp の基本機能はほぼ同じです。
違いは、Clampが上限／下限値とその有無効の設定ができるのに対して、 Saturate は 0~1で設定ができません。

どちらを使ってもよいと思いますが、私はノードの面積が小さいSaturate を使っています。

Subtract 減算

減算でも同様の事象がおきます。
こちらは事象の確認はAdd（加算）でおこないます。
透過している外側部分を不透明にするため Add で 0.5 を足します。

結果、図のように期待と違うイメージになります。

これは、０のようにみえる部分に -1 があるため、加算すると値の差が見えてきてしまうためです。

同様にAddノードの次に Saturate を使うと、期待したイメージになります。

まとめ

イメージ合成に Add（加算） や Subtract（減算） を使用したら、ぱっと見た目に問題なくても、 念のため Saturate（もしくはClamp） でサチっておきましょう。