【Unity】UIToolkitでは角丸と枠線が超簡単！

# 概要
UIToolkitでは、各表示要素をスタイルシートによって装飾できます
その中でも、角丸と枠線はuGUIの頃と比べて格段に楽になっています

この記事では、以下のような形を作るまでの手順をまとめます

![スクリーンショット 2024-12-24 23.22.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100503/768cef6d-be08-aa50-38e5-717a88a48c9d.png)

# 作る
Projectパネルで、適当な場所にEditorWindowのテンプレートを作成します
右クリックから`Create > UI Toolkit > Editor Window`で作成できます
![スクリーンショット 2024-12-24 23.25.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100503/c56ece45-29b6-03f6-52ba-8bef48364a8e.png)

`Editor Window`を押下すると、↓画像のようなウィンドウが開きます
適当な名前でいいのですが、ここではBorderHandsOnとしましょう
![スクリーンショット 2024-12-24 23.25.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100503/71134600-5fc3-b1f6-86e8-3dac9e4f6f4c.png)

すると3つのファイルが生成されます
`</>`マークのファイルをダブルクリックしてUI Builderパネルを表示しましょう
![スクリーンショット 2024-12-24 23.26.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100503/61ee6c5c-303d-35c4-bfc6-d550faff7eb0.png)

UI Builderでは、UIの見た目を調整することができます
すでにテンプレートで用意されている、表示確認ようのLabelが配置されているので削除してしまいましょう
![スクリーンショット 2024-12-24 23.27.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100503/07816f54-8401-1ef8-3ba6-050117688947.png)

削除後、ContainersリストからVisualElementを↓画像のように配置しましょう
![スクリーンショット 2024-12-24 23.27.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100503/b331f384-7fbc-9e69-4e38-d7fc3f202e1d.png)

子の要素を選択し、画面右のInspectorからパラメータを変更します
画像の通り変更してみてください
```
Flex: Grow: 0
Size: Width: 100, Height: 100
Background: Color: 自分の好きな色(Alphaを1以上にするのを忘れないこと)
```
![スクリーンショット 2024-12-24 23.29.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100503/0be6ef15-2274-1da3-a4d5-e3438aaef6ae.png)

ここまでできると、矩形のUIが表示されているはずです
これに枠線と角丸をつけていきます
![スクリーンショット 2024-12-24 23.29.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100503/e4a328cd-4eb0-5a95-2ab1-daa622253f29.png)

InspectorのBorderから変更できます
まず枠線からつけてみましょう
画像のようにWidthを4pxにします
![スクリーンショット 2024-12-24 23.32.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100503/acad267d-82c3-0bf3-0f4e-59ddbab54883.png)

すると画像のように黒い枠線がつきます
(付かない場合はColorのAlphaを1以上にしてみてください)
![スクリーンショット 2024-12-24 23.30.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100503/92f095d0-69b5-1ee3-c9fb-7ef3b60b3e9c.png)

次に角丸をつけます
Radiusをそれぞれ設定します
![スクリーンショット 2024-12-24 23.30.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100503/0f606ca5-2224-0355-ebf8-c357cebf4b0d.png)

すると矩形に角丸がつきました
![スクリーンショット 2024-12-24 23.30.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100503/97e678cb-a343-6ca6-d7e8-433dce85285f.png)

以上です

今回作成したuxmlは以下になります
```xml
<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <Style src="project://database/Assets/UI/HandsOnBorder/BorderHandsOn.uss?fileID=7433441132597879392&amp;guid=66240669b5f434d3cb7df6b7e65c3e9b&amp;type=3#BorderHandsOn" />
    <engine:VisualElement style="flex-grow: 1;">
        <engine:VisualElement style="flex-grow: 0; flex-shrink: 0; width: 100px; height: 100px; background-color: rgb(212, 129, 129); border-top-width: 4px; border-right-width: 4px; border-bottom-width: 4px; border-left-width: 4px; border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-top-left-radius: 15px; border-top-right-radius: 67px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;" />
    </engine:VisualElement>
</engine:UXML>

```