みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

スクリーンスペーステクスチャで遊ぶ

 もうすぐ大晦日、あっというまに令和も2年、このブログも2015年の12月から書き始めてから4年を迎えました。UMGに偏った内容でありながらも良く続いてるなと思います。読んでくださってありがとうございます。すこしでもお役に立てているなら幸いです。

 

 ここ半年ほど大きいネタばかりだったので、今回は軽いやつでいこうかと。

 マテリアルをいじっていて見つけたノード。

f:id:hiyokosabrey:20191225000355p:plain

 この ScreenPosition ノードをUMGに利用すると、いろいろ面白い表現ができそうです。

 

 まず簡単なのはこれ。

f:id:hiyokosabrey:20191225234014j:plain


 キャンバスには適当に Image と TextBlock をちりばめています。

f:id:hiyokosabrey:20191225001235p:plain

 このパーツにマテリアルをセットしますが、スクリーンスペーステクスチャとして以下の画像を用意しました。8x256pxです。

f:id:hiyokosabrey:20191225001606p:plain

 スクリーンスペース(画面座標空間)のUVで貼るから、スクリーンスペーステクスチャと命名しています。特別な仕様などはありません。

 

 マテリアルは超シンプル!

f:id:hiyokosabrey:20191225001916p:plain

 これだけです。

 この ScreenPosition から流れてくるのは、UMGのパーツが画面(スクリーン)に描画する際のUV座標です。

 

 たとえば下図のようなレイアウトがあったとして、

f:id:hiyokosabrey:20191225004347p:plain

 

 スクリーンスペース用テクスチャをマテリアルで重ねることで、

 

f:id:hiyokosabrey:20191225003327p:plain

 

Photoshopクリッピングレイヤーのような見た目を作ることができます。

 

f:id:hiyokosabrey:20191225004722p:plain

 

 UMGのパーツにセットできるマテリアルは、描画の際に乗算されるようです。

 なので、UMG側でパーツのカラーをいじることで、また違った色味を作ることができます。

 この方法で色を付ける場合、テクスチャはグレースケールでいいので、とても容量の節約ができます。

 

 今回のサンプルで使用している雪の結晶は4種類です。同じマテリアルを使用している限り、自由に配置しても場所に応じたスクリーンスペーステクスチャが掛かります。

f:id:hiyokosabrey:20191225011657p:plain

 

 おまけとして、この4パターンをテクスチャとして貼るためにちょっとマテリアルを改造したので、載せておきます。

 マテリアルインスタンスを使ってバリエーションを出せるようにしました。まずマスターマテリアルを用意します。

f:id:hiyokosabrey:20191225012913p:plain

続き

f:id:hiyokosabrey:20191225013151p:plain

これでマテリアルインスタンスを作るとパラメータがこうなります。

f:id:hiyokosabrey:20191225214231p:plain

Index(ScalarParameterValue)のところに 0.0 ~ 3.0 を入れます。

 

UVが 0.5刻みなのでシンプルに手入力でもいいですね。

f:id:hiyokosabrey:20191225014009p:plain

こちらの方がGPUの負荷が少ないです。

f:id:hiyokosabrey:20191225214353p:plain

 

テキストブロック用にもマテリアルインスタンスを用意します。

ブールパラメータ―を使って分岐してるので、falseにするだけです。

f:id:hiyokosabrey:20191225214614p:plain

 

 

マテリアルインスタンスが用意で来たら、キャンバスのパーツにセットしていけば完成。

f:id:hiyokosabrey:20191225214749p:plain

グラデ―ションだけでなく柄やノイズを入れてグランジ感を出しても面白いです。

 

例えばこんなグレースケールテクスチャを、アルファチャンネルに掛けてやれば、

f:id:hiyokosabrey:20191225224608j:plain

f:id:hiyokosabrey:20191225233622j:plain
こんな感じにできます。

 

タイルパターンとグラデーションだとこんな感じ。

f:id:hiyokosabrey:20191225233259j:plain


ScreenPositionとUMG、いろいろ楽しめそうです。

 

 近年モニタの高解像度化でUIに必要なテクスチャ解像度も上がっています。少ない容量で解像度を稼ぐにはチャンネル数を減らすのが効果的で、シルエットで見せるフラットデザインと相性がバッチリです。フラットデザインは、背景の情報量が多いゲームだと際立つので使いやすいのですが、どうしても色味が乏しくなってしまい派手さが出ないのが残念ではあります。そこでこのマテリアルです。そろそろフラットデザインも見飽きたかな・・・というプロジェクトで提案してみてはいかがでしょうか?

 最近だとAppleArcadeの Shinsekai Into the Depths でそれらしい表現が見られます。

 

ではでは

今回はこの辺で。