fc2ブログ

凛(kagring)のUE5/UE4とゲーム制作と雑記ブログ

2016 年から UE4 / 2021年から UE5 を触り始めました。勉強したもののメモ用ブログです。ゲーム制作に関するメモや雑記とか色々あります。C++ での Qt、Unity もほんの少しあります。

2022年04月 | ARCHIVE-SELECT | 2022年06月

| PAGE-SELECT |

≫ EDIT

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

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

こういうツイートを見かけました。
どうもUMGに「Rounded Box」の機能が追加されたようです。
※自分の方では UE5 では確認しましたが UE4 では未確認となります。

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

まずはUMG で「Rounded Box」を扱いたいウィジェットを配置します。
UMGRoundBox001.jpg
とりあえず「Border」を配置してみました。
普通通りなので四角形になっています(白がBorder。黒が背景)

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

するとこんな感じになりました。
UMGRoundBox003.jpg
四隅が丸くなっているのがわかります。

これは「ラウンディングタイプ(Raunding Type)」が「Half Height Radius」になっているためです。
UMGRoundBox002.jpg
高さの半分で均等に丸くしてくれるプリセットのようです。

「Half Height Radius」は自動で均等にやってくれるため、
次は「ラウンディングタイプ(Raunding Type)」を「Fixed Radius」を選択して細かく設定してみます。
UMGRoundBox004.jpg
上記画像にある「コーナー半径(Corner Radil)」などの赤枠の項目を変更することで細かい調整ができます。

試しに色々と設定してみました(「コーナー半径(Corner Radil)」のXとZに値を入れています)
UMGRoundBox005.jpg
するとこんな感じで左上と右下が丸くなりました。
「コーナー半径(Corner Radil)」のXが左上。Yが右上。Zが右下。Wが左下の丸くするサイズのようです。

一応エディタだけではなく実行して確認してみました。
UMGRoundBox006.jpg
ちゃんと「Rounded Box」が反映された状態で描画されているようです。

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

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

| UE5 | 10:00 | comments:0 | trackbacks:0 | TOP↑

| PAGE-SELECT |