執筆バージョン: Unreal Engine 5.0
|
こんにちは!
「グラデーションが可変しない、角丸ウィンドウを作りたい…」みなさん一度はこう思ったことはありませんか?
グラデーション付きのマテリアルは作れたけど、9Slicesするとグラデーションも一緒に伸びてしまう…
今日はそんなお悩みを解決する方法をお伝えします!
サイズ調整やグラデーションの修正も、UE内で完結できますよ!
________________________________________________
まずは、角丸でグラデーションのマテリアルを作成します。
参考画像のようなSphereMaskを使った角丸のマテリアルは、以前のこちらの記事を参考にしてみてください。
このままだと、UMGに配置しても9Slicesでグラデーションは伸びてしまいます…。
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/image-20230403-090620-1024x712.png)
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/image-20230403-090855.png)
そこで、「GetUserInterfaceUV」を使用します!
「9-Slice UV」をSphereMaskへ、「Normalized UV」をComponentMaskへ各々つなぎます。
9Slicesを使用してグラデーションの可変しないマテリアルが完成しました!
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/image-20230403-091713-1024x666.png)
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/image-20230403-091746.png)
________________________________________________
GetUserInterfaceUVノードのNormalizedUVはTexCoordのIndexを[4]で設定されており、
それによってピクセル数を無視して伸びても左が0、右が1になるのでグラデーションのUVが可変されないのです。
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/6dee720f7498bb43c796216be1b36592-1024x662.png)
________________________________________________
応用することで、いろんな見た目で作成できます。
ぜひお試しください!!
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/image-20230403-103644-1024x647.png)