【Unity】【UI Toolkit】Painter2Dでベジェ曲線（2次・3次）を描画する

UnityのUI ToolkitのPainter2Dでベジェ曲線を描画する方法についてまとめました。

はじめに
2次ベジェ曲線を描画する
3次ベジェ曲線を描画する
関連
参考

Unity 2022.2.19

はじめに

UnityのUI Toolkitにおいてベクターグラフィックスを取り扱うクラスであるPainter2Dを使うと、ベジェ曲線を描画することができます。
本記事ではこの方法についてまとめます。

Painter2Dの基本的な使い方については以下の記事にまとめていますので、必要に応じて参照してください。

light11.hatenadiary.com

2次ベジェ曲線を描画する

まず2次ベジェ曲線を描画します。
2次ベジェ曲線は2つの端点と1つの制御点から成り、2つの端点を結ぶ線が制御点の方向に引っ張られるような形になります。

Painter2Dで2次ベジェ曲線を扱うには、以下のようにQuadraticCurveToを使います。

using UnityEngine;
using UnityEngine.UIElements;

public sealed class ExampleElement : VisualElement
{
    public ExampleElement()
    {
        generateVisualContent += OnGenerateVisualContent;
    }

    private static void OnGenerateVisualContent(MeshGenerationContext context)
    {
        var painter = context.painter2D;

        painter.strokeColor = Color.red;
        painter.lineWidth = 10;
        painter.BeginPath();

        // (50, 300)を始点、(400,50)を終点、(50,50)を制御点とする2次ベジェ曲線を引く
        var startPoint = new Vector2(50, 300);
        var endPoint = new Vector2(400, 50);
        var controlPoint = new Vector2(50, 50);
        painter.MoveTo(startPoint);
        painter.QuadraticCurveTo(controlPoint, endPoint);

        painter.Stroke();
    }
}

説明はコメントの通りです。

次にこれを描画するためのEditor Windowを適当に作成します。

using UnityEditor;

public sealed class ExampleWindow : EditorWindow
{
    public void CreateGUI()
    {
        var element = new ExampleElement();
        element.style.width = 1000;
        element.style.height = 1000;
        rootVisualElement.Add(element);
    }

    [MenuItem("Window/Example")]
    private static void Open()
    {
        GetWindow<ExampleWindow>();
    }
}

Window > Exampleからこのウィンドウを開くと以下の結果が得られます。

2次ベジェ曲線が描画できていることを確認できました。

3次ベジェ曲線を描画する

次に3次ベジェ曲線を描画します。
3次ベジェ曲線は2つの端点と2つの制御点から成り、2つの端点を結ぶ線が2つの制御点の方向にそれぞれ引っ張られるような形になります。

Painter2Dで3次ベジェ曲線を扱うには、以下のようにBezierCurveToを使います。

using UnityEngine;
using UnityEngine.UIElements;

public sealed class ExampleElement : VisualElement
{
    public ExampleElement()
    {
        generateVisualContent += OnGenerateVisualContent;
    }

    private static void OnGenerateVisualContent(MeshGenerationContext context)
    {
        var painter = context.painter2D;

        painter.strokeColor = Color.red;
        painter.lineWidth = 10;
        painter.BeginPath();

        // (50, 300)を始点、(400,50)を終点、(225, 300)と(225,50)を制御点とする3次ベジェ曲線を引く
        var startPoint = new Vector2(50, 300);
        var endPoint = new Vector2(400, 50);
        var controlPoint1 = new Vector2(225, 300);
        var controlPoint2 = new Vector2(225, 50);
        painter.MoveTo(startPoint);
        painter.BezierCurveTo(controlPoint1, controlPoint2, endPoint);

        painter.Stroke();
    }
}