[UE5] 9Slicesでグラデーションが可変しないマテリアルを作る

こんにちは！
「グラデーションが可変しない、角丸ウィンドウを作りたい…」みなさん一度はこう思ったことはありませんか？
グラデーション付きのマテリアルは作れたけど、9Slicesするとグラデーションも一緒に伸びてしまう…

今日はそんなお悩みを解決する方法をお伝えします！
サイズ調整やグラデーションの修正も、UE内で完結できますよ！

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

まずは、角丸でグラデーションのマテリアルを作成します。
参考画像のようなSphereMaskを使った角丸のマテリアルは、以前のこちらの記事を参考にしてみてください。

このままだと、UMGに配置しても9Slicesでグラデーションは伸びてしまいます…。

そこで、「GetUserInterfaceUV」を使用します！
「9-Slice UV」をSphereMaskへ、「Normalized UV」をComponentMaskへ各々つなぎます。
9Slicesを使用してグラデーションの可変しないマテリアルが完成しました！

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

GetUserInterfaceUVノードのNormalizedUVはTexCoordのIndexを[4]で設定されており、
それによってピクセル数を無視して伸びても左が０、右が１になるのでグラデーションのUVが可変されないのです。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

応用することで、いろんな見た目で作成できます。
ぜひお試しください！！