UE5 UMGでラウンドボックス（Rounded Box）を使って描画する（Rounded Box、Half Height Fixed Radius、Radius、Draw As、Brush）

UMGでラウンドボックス（Rounded Box）を使って描画する方法です。

こういうツイートを見かけました。

こちらのパラメーターを触れば色々できる。。。
私が作ったSDFだとギザギザしているし、こちらの機能は確実だと思う pic.twitter.com/8gpOoIlu2d

— YukiYa (@ko_yuki_lo) April 8, 2022

どうもUMGに「Rounded Box」の機能が追加されたようです。
※自分の方では UE5 では確認しましたが UE4 では未確認となります。

というわけでさっそく試してみました。

まずはUMG で「Rounded Box」を扱いたいウィジェットを配置します。

とりあえず「Border」を配置してみました。
普通通りなので四角形になっています（白がBorder。黒が背景）

「Rounded Box」を使うため、「Brush」の「Draw As」を選択して、一覧から「Rounded Box」を選択します。


するとこんな感じになりました。

四隅が丸くなっているのがわかります。

これは「ラウンディングタイプ（Raunding Type）」が「Half Height Radius」になっているためです。

高さの半分で均等に丸くしてくれるプリセットのようです。

「Half Height Radius」は自動で均等にやってくれるため、
次は「ラウンディングタイプ（Raunding Type）」を「Fixed Radius」を選択して細かく設定してみます。

上記画像にある「コーナー半径（Corner Radil）」などの赤枠の項目を変更することで細かい調整ができます。

試しに色々と設定してみました（「コーナー半径（Corner Radil）」のXとZに値を入れています）

するとこんな感じで左上と右下が丸くなりました。
「コーナー半径（Corner Radil）」のＸが左上。Ｙが右上。Zが右下。Wが左下の丸くするサイズのようです。

一応エディタだけではなく実行して確認してみました。

ちゃんと「Rounded Box」が反映された状態で描画されているようです。

基本的には下記の画像にある赤枠の部分の値を変更することでいろいろと表現できるようです。


この機能はいろいろと使う場面がありそうな気がするので覚えておきたいですね。