画像は「解像度が違う実行画面」を2種類で表示(スケールはかけていません)しています。白丸で囲んでいる所に「ライン」が表示されていますね。そのラインは解像度が違うのに同じライン幅を維持しています。今回ご紹介するのはこのやり方です。
では解説していきましょう。
マテリアル構成
マテリアルは上のように構成しています。
Customはカスタムノードで中身は下記です。
float reverseRange = 1.0 - inRange; float val1 = saturate(inValue - inRange); float val2 = ceil(saturate(inValue - reverseRange)); return ceil(saturate(val1 - val2));
実行結果
シンプルですね。マテリアル内のOutlineSizeを変更すれば希望のピクセル数に変える事が出来ます。UMGに張り付けてキャンバスサイズを変更(下画像の奴)してもアウトライン幅を維持してくれます。
参考文献
#UE4Study
— 恒吉星光 (@seiko_dev) 2020年7月30日
UI用Materialで描画領域のpixel sizeが欲しい場合、TexCoord[3]で取れるとの事。https://t.co/3Su6Q1Wo1E
スゴイ裏技みを感ずるが、確かに「Imageの縦横幅や画面解像度に依存せず見た目のPixel幅が一定の枠」みたいな事ができた。 pic.twitter.com/4CEDlp3rLN
恒吉星光先生のこのネタがなければ絶対できなかったよ……超感謝です!
最後に感想
アウトラインってテクスチャ側に書くと解像度によって潰れやすくて苦しんでたのですが、これのおかげでしっかりと出せるようになって大満足です。クオリティに直結する箇所かと思いますので是非お試しください。