Environment

• Macbook Air M1, 2020
• Unity 2020.3.27f1

Description

• Build for Apple Silicon does NOT render correctly
• Build for Intel 64-bit works collectly.

when i place shapes on screen space canvas, it looks wrong.

shapes have kind of transparency, but alpha of colors is 100, and when i changing alpha in Canvas Group, shapes starting look very strange

all this bug s disappering when i convert shapes to png

Report from a user:

Found a bug in shapes2D. using unity 2019.3.3f1. I created an empty object, applied a shape2D of a 1x1 rectangle. Then drug it to the project to create a prefab. Now when I click the prefab in the explorer the explorer icon (as well as the icon in the inspector constantly switches between a pink square and the unity prefab icon. when it's switching it makes the inspector unresponsive. I found a work-around, by disabling and re-enabling the sprite renderer on the prefer it fixes it, maybe even permanently. Another note: I am using the new 2D experimental render pipeline, i don't know if that has anything to do with it though.

Also:

After I disable and enable the sprite renderer it stops blinking back and forth between the icon and the sprite image. You're correct that the sprite image never correctly shows the sprite. It's always pink, but this is fine, it's the switching between the image and the icon that is causing issues. I've creating another work around, as it only seems to happen where the prefab has your components attached to the root object. So I just created an empty object and nested my shape. Now it doesn't do it anymore.

This is because Configure() gets called in Start(), so that won't have run yet and the rectTransform var won't be set up. A workaround should be to call Configure() manually after instantiating a UI object. This could conceivably affect other UI functions too if they rely on rectTransform.

Hi Using Unity 2021.3.19 or 2022.3.1 when URP is used, the fill color is not set correctly.
For my test I used a fill color of 131120. This should be almost black but it comes out as 4F4B65 when sampled with the color dropper

I just downloaded from the Unity store, but the Documentation is down so I can't use it.

If you're editing a prefab and click Convert to Sprite, you just get a blank sprite.

I haven't looked into this yet, just noting here for future reference that it doesn't work...however UI Shapes do work with Mask/RectMask2D.

I suppose this has something to do with the canvas not being at the same z location as the camera...

TODO - figure out exactly what I was running into here

In newer versions of Unity polygon shape optimization seems to be broken and shapes look jagged and pixelated. Demo scene shapes have this turned on and look bad.

When editing a UI prefab in the scene, if you have a CanvasScaler or are using a ScreenSpace canvas with a Render Camera set, the shape's scale seems to be wrong in the prefab editing view. Using edit in isolation seems to do a bit better, and then you can provide a scene for Unity to use, but it's not a perfect solution. I believe Unity is using a world space canvas for prefab editing instead of using the canvas from the scene.

Easy fix is:

in Shapes2D/Scripts/Shapes.cs, change the lines at 1514,1515 from this:

    w = Mathf.Max(1, Mathf.RoundToInt(bounds.size.x / scaleFactor));
    h = Mathf.Max(1, Mathf.RoundToInt(bounds.size.y / scaleFactor));

to:

    w = Mathf.Max(1, Mathf.RoundToInt(bounds.size.x / scaleFactor * pixelsPerUnit / 100));
    h = Mathf.Max(1, Mathf.RoundToInt(bounds.size.y / scaleFactor * pixelsPerUnit / 100));

Then you can use the "Pixels Per Unit" setting in Shapes2D/Preferences, so for instance if you set it to 400 then your 64x64 Shape gets turned into a 256x256 PNG which should look nicer. You can also play around with the mipmap settings for the imported PNG, that might make a difference in how it ends up looking in-game.

Really, it might be nice to be able to set the PNG resolution you want each time you bake to sprite.

First, thanks a ton for this project!

I have a small issue where when I add the shape component to an image, the image becomes invisible until I run the game. Once I do so, after stopping the game, the image remains visible.

I believe it could be due to material generation, maybe at runtime it gets called again?

But according to a user it can be made to work easily by following the instructions on this page: https://docs.unity3d.com/Manual/SinglePassInstancing.html

Got a report of some shapes rendering wrong on S9/S10 (these devices have multiple possible hardware configurations and I couldn't replicate using device farm). They are using a radial gradient with a lot of blur. Possible workaround is to change the radial gradient code in the shader slightly and not use any blur. Not sure what the actual cause is though.

This would help in cases where you have a PolygonCollider2D with points that don't fit inside a 1x1 rect. Some example code below that would do this for a poly shape (not done for paths)...replace the appropriate parts of ShapeEditor.FromPolygonCollider2D(). However, this means the shape doesn't fit to the collider - the fix would be to then click "Set Polygon Collider 2D" to re-create the collider inside the shape's bounds. If we do this, we'd want to make it optional somehow.

            PolygonCollider2D pc2d = shape.GetComponent<PolygonCollider2D>();
            if (shape.settings.shapeType == ShapeType.Polygon) {
                if (pc2d.points.Length >= 64) {
                    EditorUtility.DisplayDialog("Too many points", 
                            "The PolygonCollider2D has too many points (max 64).", "Okay");
                    return;
                }
                // get the polygon collider's bounds
                var bounds = new Rect(pc2d.points[0].x, pc2d.points[0].y, 0, 0);
                for (int i = 0; i < pc2d.points.Length; i++) {
                    var p = pc2d.points[i];
                    bounds.xMin = Mathf.Min(bounds.xMin, p.x);
                    bounds.xMax = Mathf.Max(bounds.xMax, p.x);
                    bounds.yMin = Mathf.Min(bounds.yMin, p.y);
                    bounds.yMax = Mathf.Max(bounds.yMax, p.y);
                }
                var scale = 1 / Mathf.Max(bounds.width, bounds.height);
                // transform to shape space, re-centering and scaling so that the major dimension fits just inside
                Vector3[] points = new Vector3[pc2d.points.Length];
                for (int i = 0; i < pc2d.points.Length; i++) {
                    var p = (pc2d.points[i] - bounds.center) * scale;
                    points[i] = shape.transform.TransformPoint(p);
                }
                Undo.RecordObject(shape, "Edit Shapes2D Polygon Vertices");
                shape.SetPolygonWorldVertices(points);
                EditorUtility.SetDirty(target);
            } else if (shape.settings.shapeType == ShapeType.Path) {

Had a report from a user that in URP, convert to sprite leaves you with a fully transparent PNG. When they switched back to the built-in pipeline it worked. Have not verified myself.

Can we put the prepare() math into the vert shader, and would that improve performance?

User reports that polygon shapes are just black boxes on iPad. Possible shader compilation error but unable to figure it out. Other shape types including path worked fine.

Some feature Suggestions if possible

1. Outline Gradient
2. Corner based Gradient option if possible. (Like I want to add multiple gradients in single sprite)

You put a button on canvas, the set canvas overlay camera, then you can see the problem.