Vector Graphics Preview Package

Are there any chance we could have true vector graphic in unity for 2D and ui ?

I mean, I want to draw some UI as vector formula instead of it being imported as sprite, such as round border textbox. And have it scale crisp in any size and ratio at runtime. Or the logo and symbol in button. Or the background that gradient shade to any length of the phone

It could be rasterized but I wish to have it done at runtime on awake or repaint, so it can be responsive on the scale of screen

1 Like

UI Toolkit offers the Painter2D that allows drawing true vector shapes. We have plans to bring similar rendering capabilities to the vector graphics package as well, so that could be used for icons and such.

1 Like

oh that sounds good, but why not a generic Painter2D package? - must it be tied into UI Toolkit, you could use such a package for drawing many things. If it simply output a mesh definition.

Thank you for your suggestion

I wish UI toolkit would just also support svg directly and translate all svg tag into paint2d instruction

On the other hand I also wish that unity ui would have similar api to paint2d too. For drawing custom vector as UI in many situation

1 Like

Why canā€™t you create a single bezierPathSegment(it says incomplete sprite data when you try to create a segment with one bezierPathSegment)? Letā€™s say you have P0,P1,P2, that should be a complete quadratic bezier curve. But, you have to create a second bezierPathSegment and add that to an array of bezierPathSegments. It acts more like a cubic bezier curve and not a quadratic curve because segment[0].P1 and segment[0].P2 acts like two control points but a quadratic bezier curve should only have one control point that control the curvature between two points


.

       BezierPathSegment linePathSegments = new BezierPathSegment { P0 = new Vector2(0, 0), P1 = 
       mousePos, P2 = new Vector2(0, 2) };
       pathSegments.Add(linePathSegments);
        
       BezierContour bezierContour = new BezierContour()
       {
            Segments = pathSegments.ToArray(),
            Closed = false
       };

this should work but you have to create a second bezierPathSegment but when you do then you have two control points (segment[0].P1 and segment[0].P2].

if (index == 0)
        {
            BezierPathSegment linePathSegments = new BezierPathSegment { P0 = new Vector2(0, 0), P1 = new Vector2(0, 2), P2 = mousePos };
            pathSegments.Add(linePathSegments);
        }
        else if (index == 1)
        {
            BezierPathSegment linePathSegments = new BezierPathSegment { P0 = new Vector2(0, 0), P1 = mousePos, P2 = new Vector2(0, 2) };
            pathSegments.Add(linePathSegments);
        }
        BezierPathSegment secondPathSegment = new BezierPathSegment()
        {
            P0 = new Vector2(0, 2)
        };
        pathSegments.Add(secondPathSegment);

        BezierContour bezierContour = new BezierContour()
        {
            Segments = pathSegments.ToArray(),
            Closed = false
        };

when its index 1 then it acts like a quadratic but if I move P2 it acts like a cubic bezier

The BezierPathSegment is meant to be chained with other path segments, so youā€™ll need at least two of them to make a fully formed bezier segment.

Thereā€™s a utility method that takes aBezierSegment and will generate a BezierPathSegment for you: VectorUtils.BezierSegmentToPath():

https://docs.unity3d.com/Packages/com.unity.vectorgraphics@1.0/api/Unity.VectorGraphics.VectorUtils.html#Unity_VectorGraphics_VectorUtils_BezierSegmentToPath_Unity_VectorGraphics_BezierSegment_

1 Like