Photoshopでいい感じのグレースケールテクスチャが作れたので、さっそくエンジンで検証します。もちろんUE4です。テクスチャだけの話だったらUnityでも使える内容ですが、ここからはアンリアルエンジンです。
テクスチャは２種類用意しました。
RGB24bpp の変換前のものと、 グレースケールに変換済みの２つです。どちらも同じ見た目ですが、ファイルサイズが違います。
このテクスチャをインポートします。
どちらも同じ設定にします。このタイミングでGrayscaleを選択します。
Compression Settings を Grayscaleに変えて、sRGB のチェックを外すと、晴れてリニアなグレースケールテクスチャとしてアセット化されます。
インポート後のDetailsタブを比べてみると・・・
どちらも Resource Size は 8KbっておいおいPhotoshopでグレースケールにする意味なかったじゃん。なんか悔しいので、Contentフォルダの .uasset も一応チェック。
24bppの方は 3907Bytes 、 グレースケールの方は、 3745Bytes。うん、
ほんのちょっぴり差があった。ファイル名は2文字しか違わないので、何かしらおまけがくっついてるみたい。エンジンに取り込まれた後なら違いなんてなくて当たり前か。
さて次の検証。マテリアルの LinearGradientノードと勝負です。
頑張って作ったテクスチャに何らかの変換がかかったりしてると悲しいので、計算で出力されるリニアなグラデーションと比べることで確認します。
「リニアな」というのは、0.0～1.0（0～255）までを何の補正もせず素直に使用している状態です。上の LinearGradientノードは値が偏らず均質なグラデーションになるうえ、テクスチャのような解像度というシガラミが無いのでゲージを作ったり背景などに大活躍です。
２つのテクスチャと、LinearGradientノードの合わせて３つで、マテリアルを作って、UMGで表示させてみました。
なんだか明るいですが・・・３つとも同じように見えます。念のために適当な場所をサンプルとして差がないか確認します。
残念ながら 0（黒）に近い部分で差異が出ています。画面キャプチャなので、エンジンの出力時に何らかの補正が入っているかもしれません。・・・というか全部にガンマ補正が入っているようです。中央が128じゃない時点で気づいてもおかしくないのですが、LinearGradientとの勝負でそこをスルーしてました。
sRGB空間な見た目なので、ノードで調整してみます。
結果はずいぶんリニアっぽくなりました。
ということで、何もせずそのままリニアなテクスチャを持ってきても、画面に表示されれば、sRGBになっているということが判明しました。
今回リニアワークフローの検証をしたかったわけではないので、これ以上の深追いはやめておきます。そう、テクスチャの節約です。高解像度時代への橋頭保としてグレースケールテクスチャの扱い方を検証していたのでした。
ちょっとサンプルを作ってみました。
用意したテクスチャはこれ。
サイズは 1024ｘ512pxです。圧がすごい・・・
次に用意したのは、
サイズは 8ｘ256px。
これをインポートして、マテリアルを作成します。
シンプルにマスクテクスチャとしての利用です。
表示してみます。
ドーーーー～ン！という重低音が聞こえてきそうです。CMみたい。
サイズ比較用に、解像度は同じ1024ｘ512で RGBA8888 の 32bppのテクスチャを作ってみました。さっそく比較します。まずはG8から。
そしてRGBA32bpp
実に４倍の容量になります。圧縮すれば小さくなりますが、こういった文字やUI表示は劣化したテクスチャは悪目立ちします。凝った見た目は 32bppじゃないと無理ですが、クリアなエッジを保ちつつ、容量節約できた分バリエーションを持たせることができるグレースケール、どちらを採用するかはその都度相談しながら決めればいいかと思います。
大事なこと書くの忘れてました。UMGでは、直接グレースケールテクスチャを貼ることはできません。できなくはないですが見た目に赤くなります。しかも透過しない。
これはチャンネルが 一つしかないためで、RGBAの４チャンネルのうち R
チャンネルのみに、グレースケールの値が適用されるからです。
普通にUMGで着色したい場合はこのようなマテリアルを用意します。
これをImageパーツに適用すれば Color And Opacity で色が付けやすくなります。
ちょっと手数が増えますが、テクスチャの容量が稼げるのが素晴らしいです。
マテリアルをちょこっと改造してインスタンス化できるようにしてみました。
テクスチャサンプルパラメータノードに差し替えます。このノードに名前を付けて、テクスチャフォーマットをLinearGrayscaleに変えます。そして安全な状態にするために、
16ｘ16程度の ■ ダミーテクスチャを作ってセットしておきます。
このマテリアルからマテリアルインスタンスを作成します。マテリアルアイコンの上で右クリックして一番上にあるのを選択すると作ることができます。
マテリアルインスタンスの中でテクスチャをセットする項目があるのでそこに用意したグレースケールテクスチャを登録します。
あとはUMGで Image にセットするだけ。
基本はマスク的な使い方が一番向いてるのですが、ちょっと変わった使い方をしてみます。
Photoshopで雲模様フィルタを使うと簡単にシームレスなテクスチャが作れます。
これを、Pannerでスクロールさせ、TexCoordに足してやると、
ゆらゆらと陽炎のように歪みます。水の中の表現としてもありです。
おなじ雲模様テクスチャに対してValueStepを使って掛けてみると、
ブループリントからScalaParameterノード ”Value” の値を 0.0～1.0 に変化させます。
出現や消滅の演出に使えそうです。
といった感じで、まだまだ探せばネタはありそうですが、今回この辺にしておきます。
グレースケールテクスチャを使うと、テクスチャ容量を稼いでリッチな見た目を作るのができて楽しいです。
ではでは
豊かなグレースケールライフを！
