[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回やります。
とはいえ、そんなに書くこともないので、内容はおまけ程度です。
次回は、カラー画像のグラデーションです。