ゲーム作りが大好きな人のブログ

ゲームを作るのが大好きな人のブログ。UE4とBlender、MAYA(LT)、3DCoatを使用しています!

【UE4】【UI】指定ピクセルサイズのアウトラインをマテリアルで書く

https://cdn-ak.f.st-hatena.com/images/fotolife/t/toofu0/20210323/20210323030611_original.png

画像は「解像度が違う実行画面」を2種類で表示(スケールはかけていません)しています。白丸で囲んでいる所に「ライン」が表示されていますね。そのラインは解像度が違うのに同じライン幅を維持しています。今回ご紹介するのはこのやり方です。

では解説していきましょう。

マテリアル構成

https://cdn-ak.f.st-hatena.com/images/fotolife/t/toofu0/20210323/20210323034601_original.png
マテリアルは上のように構成しています。
Customはカスタムノードで中身は下記です。

float reverseRange = 1.0 - inRange;
float val1 = saturate(inValue - inRange);
float val2 = ceil(saturate(inValue - reverseRange));
return ceil(saturate(val1 - val2));

実行結果

f:id:toofu0:20210323034641p:plain
シンプルですね。マテリアル内のOutlineSizeを変更すれば希望のピクセル数に変える事が出来ます。UMGに張り付けてキャンバスサイズを変更(下画像の奴)してもアウトライン幅を維持してくれます。
f:id:toofu0:20210323040632p:plain

参考文献


恒吉星光先生のこのネタがなければ絶対できなかったよ……超感謝です!

最後に感想

アウトラインってテクスチャ側に書くと解像度によって潰れやすくて苦しんでたのですが、これのおかげでしっかりと出せるようになって大満足です。クオリティに直結する箇所かと思いますので是非お試しください。