[UE4] [UMG] はじめてのマテリアル、色を作る

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

今回は、はじめてUE4 UMG のマテリアルを触る人向けで、
色面を作成します。

使用するノードはConstant3Vector 。
こちらはRGBの3つの値を設定するために使います。

マテリアルを作成

まずは、マテリアルを作成。
コンテンツブラウザ上で右クリック。
”マテリアル・テクスチャ” > ”マテリアル”　を選びます。

できたマテリアルに名前をつけます。
名前はなんでもよいです。使いやすい名前を付けましょう。

マテリアルの設定

マテリアルをダブルクリックで開きます。
ウィンドウ左下の"Material"の項目の、
MaterialDomain を UserInterface に変更してください。
これでUMGで使用できるようになりました。
あと、BlendMode を Translucent に変更します。
ブレンドモードが通常になります。

マテリアルの編集

グラフエリアにカーソルを置き　"3キー＋マウス左クリック"でConstant3Vectorノードを置きます。
本来は、グラフエリア上を右クリックでコンテキストメニューに"Constant3Vector"と入力して呼び出します。
ですが、よく使う項目なのでショートカットを覚えましょう。

ノードをつなぎます。
Constant3VectorのピンとResultノードのFinalColorのピンを順にクリックしてつなぎます。
間違えて繋いだときは、ピンを Alt+左クック でリンクを切ります。
ピン上右クリックでコンテキストメニューから”リンクを切断”を選んでもよいです。

色の編集

Constant3Vectorをダブルクリックします。
カラーパピッカーが表示されるので、任意の色を作ってください。

不透明度をつける

せっかくなので不透明度もつけてみましょう。
色は、RGB3つの値で作るので、3つの値を設定できる Constant3Vector を使いました。それに対して、不透明度は値が一つなので Constant を使います。
こちらは、グラフエリアで ”1キー+左クリック” がショートカットです。

ConstantとResultノードのオパシティを繋げます。

Constantノードを選択した状態でエディタ左下のValueの値を変えると不透明度を変更できます。

保存

出来上がったら、エディターの左上の”保存”ボタンをおします。
これで、一番簡単なマテリアルの完成です。
このまま、ウィジェットブループリントのImageウィジェットにつなげて、矩形や線として使えます。