[UE4] [UMG] UIデザイナーのマテリアル基礎。「＋－×÷についてその1 」

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

はじめに

今回は、マテリアルで加算（足し算）、減算（引き算）、乗算（掛け算）、除算（割り算）の四則演算の使い方を確認します。

使用するノード：

Add　加算（足し算）
Subtract　減算（引き算）　
Multiply　乗算（掛け算）　
Divide　除算（割り算）　
OneMinus　「1 - X」

最初に作業用のデータを作ります

こちらの記事で作った円を用意します

まずは、いちばん使う乗算 Multiply

Multiply を使って不透明度の値を調整してみます。

Constant と Multiply の2つのノードを追加します。
グラフエリアの何もないところで、
"[1] +クリック"　で Constant を、
"[M] +クリック"　で Multiply を置きます

次のそれらをつなぎます。
Radial Gradient Exponential と Multiply 、
Constant と Multiply 、
Multiply と オパシティをつなぎます。
Multiply は乗算なのでピンは A と B のどちらにつないでも結果は同じです。

ノードをつなぐと、Constant の初期値が0なので、
円の形 x 0 = 0 
というわけで、不透明度が0になり、左側のプレビューからイメージが消えます。

わかりやすくするために、Constant ノード右上の三角をクリックして、ノードの状態を表示してください。

では、Constant の値を0.5にしてみましょう。
グラフ上のConstantを選んで 左の Value 値を 0.5 にすると、
不透明度が50%になります。
このように値を調整するだけで不透明度が変更できます。

つぎは減算 Subtract

減算を使ってイメージのマスクを反転させます。

グラフエリアの何もないところで右クリックして、コンテンツブラウザを表示して"Subtract"と入力して、Subtract を置きます。

 "[1] +クリック" で Constant を配置して、値を 1 にします。

Subtract の、
A を Constant とつなぎ、
B を Radial Gradient Exponential とつなぎ、
出力ピン を Main Material ノードの オパシティ とつなぎ、
右上の三角刑をクリックして状態を表示します。

円のマスクが反転しました。
Radial Gradient Exponential で作られた円の内側は １、円の外側は 0 なので、
1(Consatntの値) - 1（円の内側） = 0　で内側は抜けて、
1(Consatntの値) - 0（円の外側） = 1　で外側が塗られます。

この Constant 1と Subtract をセットにしたノード が OneMinus です。
ショートカットは、グラフエリアの何もないところで "[O] +クリック" 。
Subtract の代わりにつないでみると、同じ結果になることが確認できます。

そして加算 Add

ショートカットは "[A] +クリック" で Add を配置します。
Addの、
A を OneMinus とつなぎ、
B を Multiply とつなぎ、
出力ピン を Main Material ノードの オパシティ とつなぎます。
円の内側が不透明度50%と外が100%になりました。

最後は除算 Divide

最後は除算 Divide です。
円の大きさを除算で調節してみましょう。

Divide のショートカットは "[D] +クリック" 。
こちらにつなぐ Constant を2つ用意します。

Constant の値は、Divideの
Aにつなぐものを 0.5 。　これは円の半径です。
Bにつなぐものを 2 。　こちらの値は2で割って半径の長さが半分になります。
円が小さくなりました。

Divideについての補足

今回、Divide を使ってみましたが「除算は重い」ので、 Multiply に置き換えます。
Multiply と Constant を用意します。
半径の大きさの 0.5 はそのまま使い。
新しく作った Constant はMultiply につなげて 0.5 掛けに。

と、いう感じで演算のノードを使ってみました。
ノードに、慣れたでしょうか？

「＋－×÷についてその2 」につづきます。
こちらは、イメージとイメージで演算です。