Sugar2D - 2D Vector Drawing [WIP]

Coming Soon!

Spoiler: Original Post

Greetings,

Allow me to introduce to you the 2D Vector API I am working on code named 'Sugar2D'.

Right now I am in the early-mid stages of development. This project is turning out to be bigger than I (naively) anticipated, so the first release will probably have less functionality than I planned. But I will continue to work on this project until it is complete according to my original vision.

So what is it? It is my attempt to combine the power of Illustrator and Unity. At the lowest level there is a familiar looking path API.

Code (CSharp):

1.             Path myPath = new Path()
2.                 .MoveTo(300, 400)
3.                 .CurveTo(325, 300, 425, 300, 450, 400)
4.                 .SmoothCurveTo(575, 500, 600, 400);

However this is a pure mathematical path - it has no display hierarchy nor styling/rendering.

On top of this layer I have built a DisplayList style API with shapes. A shape can either be a path that you specify, or one of the included primitive shapes (and you can of course define your own primitive shapes).

Code (CSharp):

1.         Rectangle rectangle = new Rectangle(
2.             new Point(-200, -200),  // Min Corner
3.             new Size(400, 400),     // Size
4.             40,                     // Corner Radius X
5.             40,                     // Corner Radius Y
6.             Rectangle.CORNER.ROUND  // Corner Style
7.         );
8.  
9.         RegularPolygon hexagon = new RegularPolygon(
10.             10,                     // Number of Sides
11.             175f,                   // Radius
12.             new Point(-100, 500)    // Centre
13.         );
14.  
15.         Ellipse circle = new Ellipse(
16.             hexagon.Inradius,       // Radius
17.             new Point(0, 0)         // Centre
18.         );
19.  
20.         RegularPolygon triangle = new RegularPolygon(
21.             3,                      // Number of Sides
22.             circle.RadiusX,         // Radius
23.             new Point(500, 0)       // Center
24.         );
25.  
26.         Star star = new Star(
27.             8,                      // Number of Points
28.             triangle.Inradius,      // Outer Radius
29.             triangle.Inradius / 2,  // Inner Radius
30.             hexagon.Center          // Centre
31.         );
32.  
33.         Ellipse ellipse = new Ellipse(
34.             hexagon.Inradius,       // Radius x-axis
35.             triangle.Inradius,      // Radius y-axis
36.             circle.Center,          // Centre
37.             Angle.D30               // x-axis Rotation
38.         );
39.  

Let's place these shapes into a DisplayList and add some styling.

Code (CSharp):

1. StrokeStyle.DefaultStyle.Width = 20f;
2. StrokeStyle.DefaultStyle.CapStyle = StrokeStyle.CAP_STYLE.ROUND;
3.  
4. ------SNIP------
5.  
6.         displayList
7.             .Append(star)
8.             .Append(circle)
9.             .Append(
10.                 ellipse
11.                 .AppendRotate(Angle.D90, circle.Center)
12.             )
13.             .Append(triangle)
14.             .Append(hexagon)
15.             .Append(polyline);

How does it look:

There is much more completed than what I have shown here, but there is also much to do. As I start to complete more functionality I will post progress here.

Hopefully regular progress updates will help keep me motivated & accountable

Thanks for looking!


R

 

I've been rewriting the path stroker.

Here are some of the supported corner styles (there are a few more to come).

Note that the geometry is transparent, which you can see in the first style. All subsequent styles merge the corner geometry.



I'm working on another join style called 'Ribbon'.

 

Filling a Path
Starting to work on fills.

Most of these are simple fills, except the snake shape which shows a complex fill on an open path.


Note that this is running in the unity UI canvas as a custom Graphics element. Soon I will give settings to have the vector drawing auto scale (or not) based on the UI Rect Transform. You will also be able to toggle on/off the auto scaling of strokes, so that a a shape can resize with a fixed stroke size.

There are some problems though with the fill mesh and the Unity UI. Since it expects quads there are a lot of degenerate triangles, which is wasteful. Long term unity plans to accept other mesh types, but until then I'd like to find a less wasteful solution.



By the way if anybody actually reads these could you throw me a like or comment?

 

Working on tight integration with Unity's uGUI.

Basic Shapes in uGUI - Random Examples


Here are some examples of the editor functionality for the basic shapes. Note the editor options are not styled pretty - they are purely functional at this stage.

I've omitted showing stroke and fills to focus in on editing the shapes themselves.

After this I will work on integrating custom path editing into the editor.


One of the great things about this, aside from being able to create vector shapes (including custom ones) visually and right in the editor, Is that all properties are fully animatable.

Plus you can still make use of the normal uGUI layout system!

 

Wow...this is so "COOL" ! very nice to see this fast vector options, possibilities inside unity. Glad you´ve done it so well.

 

I want it as soon as possible. Please release it early.

 

I hope to! I won't get much time to work on it this week, but here is a preview of what I'm working on right now.

Editor options WIP:


This shows an ellipse with the path outlined in white, and light blue radius handles (so you can adjust the radius in the editor).

On the right is the current state of the properties editor. A little wonky at this point, especially the stroke properties layout.

The 5 pointed star is a self-intersecting shape and shows that self-intersecting shapes/shapes with holes will be supported (in the fill tab you will be able to select even_odd or nonzero fill rules).

Still working on the editor for custom arbitrary shapes. I will try to preview that feature next.

 

Looks amazing! Any plans on adding the ability to import SVG files?

 

I haven't figured out how much SVG I can support on the initial release but it will definitely be there.
Most likely an initial release will include support for basic shapes, transforms, and paths.

 

I hope to have a more interesting update soon, but for now I'm going to show a pretty cool feature that we get for free in the Unity UI, and it doesn't require Pro. Clipping masks.

Here is a vector shape (the star) and a normal UI element (an image).
Add the Mask component to the vector shape:



Then set your content (any content) as a child of the vector shape:


A cool feature is that since the masks are vector graphics the shape of the clip is now animatable!

 

Update!

Yes I am still working on this! I have decided to take this project in a slightly different direction.

Previously I had been focusing on a canvas UI solution. For a number of reasons (some technical) I have decided to change tack. In the future I will consider adding back native canvas UI support, but for now this is a going to be a general 2D vector based mesh building tool. My near-term focus is in beefing up the Editor support to make this as easy to use as possible.

Here is a sneak preview of a shape being edited (the different color nodes tell you what type they are - corner/smooth/balanced):


I am planning on releasing this in the next week or so.

Here is a sneak at one of the inspector panels (in this case for the Ellipse Shape)


The focus going forward will be in easy to use editor tools to make you feel right at home prototyping or creating assets without stepping out of Unity and back into Illustrator/Inkscape for every change.

This is not going to be a line focused or level focused tool. It is going to be (eventually) "Illustrator inside Unity".

Stay tuned!


R

 

Well you be adding 2d collider support?

 

Looks sweet man!

 

Hi,

2D collider support. Not immediately, but hear me out

I have just released the first version, and am working on an update to drop over the next week or two.
The way I am approaching this is that a path is a just component (this is not apparent in the current version but will be clearer in the next update). My focus is on a simple but useful API (Matrix2D, Point, Vector, Collision, etc) and editor tools to manipulate paths in a way that is familiar to people who use vector programs. The next update includes a lot more vector editing.

So the idea is that you attach a path component to a game object and that stands on it's own. In the current version there is a 'shape' component which is a merge of a path and the style/tessellation. Next update will include a separate renderer component to keep things separate.

So a 2D collider support will be a 2D collider component. When I get time I will look at providing a basic implementation of this, but the API is intended to be such that you can readily implement this or any 2D path extension you like.

For example in the coming update you will be able to say GetComponent<PathComponent>().Path.Points() to get an array of all evaluated points for the path. The only thing missing at the moment is that it's not called 'PathComponent'.

Additionally I am including more collision detection in the next update, so you can do 2D collisions like Collision.SegSeg(), Collision.RayAABB() and so on.

Regards