[UE4] [UMG] UIデザイナーのマテリアル基礎。「グラデーションその3 画像を使う」

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

前回の記事はこちら...

今回のテーマ

1回目で紹介した LinearGradient は、
明度差のあるグラデーションに角度をつけると、暗い方の色が溜まった感じになるんです。（※これは描画時のガンマ補正のせいなのですが、話が長くなりそうなのでまたの機会に）

2回目で紹介した Curve と CurveAtlas を使った方法は、
機能的には問題ないのですが、希望通りの色を作るのに時間がかかったり、アトラスの管理が面倒だったり...(個人の感想です)

ではこの3回目は？
ベタにPhotoshopで作ったグラデーション画像を使います。

「Photoshopでグラデ。って、そんなの十分知ってるよ。」と言う方も多いと思いますので、以下は興味がある方のみお読みください。

作り方3　画像で作る グレイスケールｘ色

まずは作り方。
基本的な考え方はその1 と同じです。
色をグラデーションのアルファで抜きます。
グラデーション部分を画像に置き換えて、階調の編集を自在にできるようにします。

また、画像ファイルは、RGB3チャンネルあるので、
3種のグレースケールをつくり、これを各チャンネルに格納します。
以前紹介した方法です。

Photoshop

元画像を作ります。
 ファイル > 新規作成 でファイルを作成。大きさは...
　幅は 256px
　高さは 4の倍数以外の値
です。

幅 256px は、
0～255の値の変化が確認しやすいので。
高さは、
4の倍数にするとDXT圧縮が可能になってしまうので...
何かの事情（例えば、プロジェクト終盤で「テクスチャは一旦全部圧縮！」なんて事態）で圧縮されてしまうのを避けるためです。
あと、ぎりぎりまでファイルサイズを削る場合は、高さを1pxにしますが、そこまでの必要がなければ、数ピクセルの高さは持たせます。これは、グラデーションの具合を確認する際に、256 x 1 だと細すぎてわかりにくく、作業効率が落ちるからです。

（上 256x1 px、下 256x6 px　上は細すぎて明度変化がわかりにくい）

1つ目、リニアなグレースケール

0から255まで値が1づつ上がっていくリニア（直線的な）グレースケールを作ります。

Photoshopでグラデーションを作成します。　　
 左側が 0 右側が 255 になるように作ってください。

できたグラデーションの値を確認してみましょう。
画像の幅256pxなので、
 カーソルの X軸の位置 -1 = 色の値
になってほしいのですが
...どうやら値があいません。
下図のように、192pxあたりでは202だったりします。

これは、Photoshopのグラデーションの”滑らかさ”という機能が補正しているからです。
こちら、デフォルトが100％で、初期値から補正がかかっています。
わかりやすくするために図を用意しました。
見比べると、
100％のほうが両端の黒い部分・白い部分が幅広く、
0％のほうが狭いです。

”滑らかさ”は下のようなカーブで、値を上げると最初と最後の変化が緩くなります。
なかなか便利な機能なのですが、今回はリニアなグラデーションを作るのが目的なので 0% にします。

次は、両端を確実に0と255にするために、塗りつぶします。
レイヤーを2つ用意して、
右端を値 0 で、
左端を値 255 で塗ります。

最後に、
3つのレイヤー（グラデーション、左端、右端）をグループ化して、カラーオーバレイ #FF0000で乗算。
そのグループをもう一度グループ化して、ブレンドモードを ”覆い焼き（リニア）加算” にします。

一つ目のグレースケールができました。

2つ目は、”滑らかさ”100%で

次は”滑らかさ100%”で作ってみましょう。

作成したグループ（"R"）を複製します。複製元は作業の邪魔になるので非表示にします。
Gチャンネルを使うのでファイル名等を R から G に変更します。
カラーオーバレイの色を #FF0000 から #00FF00に変更します。

左右の端の、色の変化のない部分を、少し広くします。
幅 8px にしました。

左右端を幅8pxづつとったので、メインのグラデーション部分の幅を240pxに変更します。

グラデーションの”滑らかさ”を 100% に変更して、2つ目ができました。

3つ目は、ガンマ補正を打ち消すグラデーション

このページの最初で、「ガンマ補正のせいで暗部の色が溜まった感じになる...」と書きました。

UE４は描画時に下図のような補正がかかっているので、

これにを打ち消して、描画時に階調がリニアに表示されるグラデーション、下図のようなカーブのグラデーションを作ります。

まずは、最初に作ったRのグループを複製します。

Bチャンネルを使うのでファイル名等を R から B に変更します。
カラーオーバレイの色を #FF0000 から #0000FFに変更します。

トーンカーブを追加します。

プロパティタブでトーンカーブを編集します。
カーブの制御点を追加して以下の値を入力してください。
（若干の誤差はあります）
入力 32 出力 4、
入力 64 出力 13、
入力 96 出力 29、
入力 128 出力 55、
入力 160 出力 92、
入力 192 出力 136、
入力 224 出力 192。

これで3つのグラデーションができました。
Photoshopでの作業は終わりです。

非表示にしていたグループを表示して、ファイルを保存します。
（保存形式は.pngでも.psdもかまいません）

ここからはUE4

UE4に画像を読み込みます。
コンテンツブラウザにファイルをドラッグ＆ドロップします。

ファイルをダブルクリックで開いて、以下のように設定します。
色の値が変わると困るので、非圧縮のUserInterface2Dにします。

CompressWithoutAlpha：チェック
圧縮設定：UserInterface2D　
sRGB：なし
X/Y-axsisTilingMethod：Clamp
Filter：Bi-Linear
TextureGroup：UI

保存します。

マテリアル

新しくマテリアルを作成します。
コンテンツブラウザ上で右クリックでメニューから、
 マテリアル・テクスチャ > マテリアル　を選びます。

マテリアルを開いて、左下の詳細タブを設定します

MaterialDomain：UserInterface
BlendMode：Translucent

必要なノードを配置します

Constant3Vector （グラフエリアで [3]キー+ 左クリック）を2つ、
Lerp （グラフエリアで [L]キー+ 左クリック）。

グラデーション画像をグラフエリアにドラッグ＆ドロップします。

色を設定してノードを各々つなげます。
TextureSmple からのピンはとりあえず R からつなげましょう。

角度をつけます

CustomRotator、TextureCoordinate、Constantを配置し、以下のようにつなぎます。Constantの値は、0～１が0～360度です。0.125は45度。

確認

3種のグラデーションを確認しまます。
TextureSample と Lerp をつなぐピンを R, G, B で付け変えて具合を確認してみましょう。

下図の一番左は、元のデータはリニアですが、描画時にガンマ補正がかかっており、最初に作ったLinearGradientノードのものとほぼ同じになっています。
一番右は、逆補正です。0～255までリニアに明度が変化しているのがわかると思います。

ちなみに、逆補正は"Power"ノードを使う方法もあります。
Powerノードを使ったほうが簡単なのですが、今回はトーンカーブの練習ということで。こちらは別にまとめました。↓

もうちょっとだけ、

グラデーションに帯状の縞のトーンジャンプが見えてしまうことがあります。そんなときは、ノイズを加えてトーンジャンプを抑えましょう。

VectorNoise

VectorNoise、Lerp、Consatant を以下のようにつなぎます。
Constantの値を変更していい感じの値を探しましょう。

まとめ

今回は3種類のグレイスケールからグラデーションを作りました。
必要に応じて、自分好みのグレースケールを作って、組み替えるとよいかと思います。

次回！

さてさて、グラデーションについては全3回のつもりでしたが、
今回の内容が予想外に多くなってしまったため、もう1回やります。
とはいえ、そんなに書くこともないので、内容はおまけ程度です。

次回は、カラー画像のグラデーションです。