もうすぐ大晦日、あっというまに令和も２年、このブログも2015年の12月から書き始めてから4年を迎えました。UMGに偏った内容でありながらも良く続いてるなと思います。読んでくださってありがとうございます。すこしでもお役に立てているなら幸いです。
ここ半年ほど大きいネタばかりだったので、今回は軽いやつでいこうかと。
マテリアルをいじっていて見つけたノード。
この ScreenPosition ノードをUMGに利用すると、いろいろ面白い表現ができそうです。
追記 2020/09/21>>
ScreenPositionはヒストリアさんのブログですでに記事になってました
アスペクト比による補正についても言及されています。
<<
まず簡単なのはこれ。
キャンバスには適当に Image と TextBlock をちりばめています。
このパーツにマテリアルをセットしますが、スクリーンスペーステクスチャとして以下の画像を用意しました。8ｘ256pxです。
スクリーンスペース（画面座標空間）のUVで貼るから、スクリーンスペーステクスチャと命名しています。特別な仕様などはありません。
マテリアルは超シンプル！
これだけです。
この ScreenPosition から流れてくるのは、UMGのパーツが画面（スクリーン）に描画する際のUV座標です。
たとえば下図のようなレイアウトがあったとして、
スクリーンスペース用テクスチャをマテリアルで重ねることで、
Photoshopのクリッピングレイヤーのような見た目を作ることができます。
UMGのパーツにセットできるマテリアルは、描画の際に乗算されるようです。
なので、UMG側でパーツのカラーをいじることで、また違った色味を作ることができます。
この方法で色を付ける場合、テクスチャはグレースケールでいいので、とても容量の節約ができます。
今回のサンプルで使用している雪の結晶は４種類です。同じマテリアルを使用している限り、自由に配置しても場所に応じたスクリーンスペーステクスチャが掛かります。
おまけとして、この４パターンをテクスチャとして貼るためにちょっとマテリアルを改造したので、載せておきます。
マテリアルインスタンスを使ってバリエーションを出せるようにしました。まずマスターマテリアルを用意します。
続き
これでマテリアルインスタンスを作るとパラメータがこうなります。
Index（ScalarParameterValue）のところに 0.0 ～ 3.0 を入れます。
UVが 0.5刻みなのでシンプルに手入力でもいいですね。
こちらの方がGPUの負荷が少ないです。
テキストブロック用にもマテリアルインスタンスを用意します。
ブールパラメータ―を使って分岐してるので、falseにするだけです。
マテリアルインスタンスが用意で来たら、キャンバスのパーツにセットしていけば完成。
グラデ―ションだけでなく柄やノイズを入れてグランジ感を出しても面白いです。
例えばこんなグレースケールテクスチャを、アルファチャンネルに掛けてやれば、
こんな感じにできます。
タイルパターンとグラデーションだとこんな感じ。
ScreenPositionとUMG、いろいろ楽しめそうです。
近年モニタの高解像度化でUIに必要なテクスチャ解像度も上がっています。少ない容量で解像度を稼ぐにはチャンネル数を減らすのが効果的で、シルエットで見せるフラットデザインと相性がバッチリです。フラットデザインは、背景の情報量が多いゲームだと際立つので使いやすいのですが、どうしても色味が乏しくなってしまい派手さが出ないのが残念ではあります。そこでこのマテリアルです。そろそろフラットデザインも見飽きたかな・・・というプロジェクトで提案してみてはいかがでしょうか？
最近だとAppleArcadeの Shinsekai Into the Depths でそれらしい表現が見られます。
ではでは
今回はこの辺で。
