[FREE] Shapes2D - Procedural 2D shapes for Sprites and UI

Community Showcases
21

Yes, that is correct.

1 Like
22

I just bought the asset but the very first problem i saw is if i use DoTween to scale button to 0 and 1 then shape simply disappear and doesnt come back. Can you please provide a quick fix to that

23

And converting to Sprite on my Mac Retina generates a blurred sprite :frowning:

I also disabled Tweening and simply setActive(false) on start but some Text Inputs show shapes and some dont, but when i click on them they start showing the shape and after that works fine. Whats causing them NOT to draw in first place?

24

I just tried and it works for me, can you give me any more details (e.g. what code are you using to start the tween) or perhaps a sample project if thatā€™s easier? What Unity version?

Hmm, I use a retina Mac too. Sprites will look a bit blurrier than non-converted shapes because they are rasterized, especially if you scale them up after convertingā€¦ Sprite import settings like mipmaps/filter mode also can affect blurriness. If you scale up a bit before converting to sprite, and then scale back down, does that help? How blurry are we talking?

Iā€™m not sure what you mean by this. What are you calling SetActive(false) on? Do you mean when you click on them in the scene view? Or in your game?

25

Ok, Sorry for the panic it was due to an issue iwth TMPro Input Field.
Thats the reason old asset and your asset didnt work well.

Now i see a limitation in your asset which is If i assing it to Button, then it doesnt should Button Color Defines like Normal, Pressed, Highlight etc. My old asset provide that support but it is not as powerful as yours but that color limit is stoping me from usingit.

26

Okay, yeah currently you would have to do that in code by listening to button events and changing the shapeā€™s properties. But I think I can make it work from the button componentā€™s ā€œcolor tintā€ transition too. Can you send me an email at oliver@sub-c.org and Iā€™ll see about making a test version that does that?

27

Just sent.

28

Shapes2D has been updated to version 1.10, here are the release notes:

Shapes now support the color property that can be set in Sprite and Image components. This allows you to set tints or opacity values across an entire shape, as well as use the ā€œColor Tintā€ transition type on Buttons and other UI elements. It also makes Unityā€™s Shadow UI component work properly.

29

@lemon-tree , i have a deactivated panel (as popup) using a background image (Shapes2D). and sometime when i open it background doesnt appear, IF i change shapes2D property onruntime then it suddenly appear. Iā€™m using Unity 5.5.1p4. Any idea how can i fix this?

30

I canā€™t replicate it, but it sounds like a case where Unity resets the shader and Shapes2D isnā€™t detecting it. Try opening up Shapes2D/Scripts/Shape.cs and adding this code to the Shape class:

    void OnEnable() {
        ComputeAndApply();
    }

Does it happen in a build or just in the Unity editor? Whatā€™s the object hierarchy for the panel? If you could send me a small example project that would help.

31

@lemon-tree
This problem was solved.

Can you please add support for this shape? its currently in vertical, i want to use it horizontally

32

You should be able to create that shape easily with the path shape type, though if you want to use it procedurally and not convert to PNG there may be performance implications. Does that work for you?

33

Using path may not create perfect curve as ill be manually drawing it. As this is a basic shape, so can you please add it like other basic shapes?

i actually dont want to convert into PNG. i want to use 2 shapes on my scene one as a mask and one as outline (to solve antialiasing issue)

34

You can actually compute the path segments in code and make them perfect. Hereā€™s a component that will do that - just add it to a GameObject and it should make a banner path shape for you. Unfortunately I think this is the best I can do - even if I made a shader specifically for banners I donā€™t think I could get better performance than the path shape. Hope this helps!

using UnityEngine;
using Shapes2D;

[ExecuteInEditMode]
[RequireComponent(typeof(Shape))]
public class Banner : MonoBehaviour {

    Vector2 oldScale;
    public float curviness = 0.2f;
    float oldPathThickness, oldCurviness, oldOutlineSize;
    Shape shape;

    void OnValidate() {
        if (!shape)
            return;
        if (oldCurviness != curviness)
            Recalc();
    }

    void OnEnable() {
        shape = GetComponent<Shape>();
        Recalc();
    }

    void Update() {
        if ((Vector2) transform.lossyScale != oldScale
                || oldPathThickness != shape.settings.pathThickness
                || oldCurviness != curviness
                || oldOutlineSize != shape.settings.outlineSize)
            Recalc();
    }

    void Recalc() {
        shape.settings.shapeType = ShapeType.Path;
        PathSegment[] segments = new PathSegment[6];
        float w = (transform.lossyScale.x - shape.settings.pathThickness / 2 - shape.settings.outlineSize / 2)
                / transform.lossyScale.x - 0.5f;
        float w2 = w / 2;
        float c = curviness;
        float h = (transform.lossyScale.y - shape.settings.pathThickness / 2 - shape.settings.outlineSize / 2)
                / transform.lossyScale.y - 0.5f - Mathf.Abs(c) / 2;
        segments[0] = new PathSegment(new Vector2(-w, -h), new Vector2(-w, h));
        segments[1] = new PathSegment(new Vector2(-w, h), new Vector2(-w2, h - c), new Vector2(0f, h));
        segments[2] = new PathSegment(new Vector2(0f, h), new Vector2(w2, h + c), new Vector2(w, h));
        segments[3] = new PathSegment(new Vector2(w, h), new Vector2(w, -h));
        segments[4] = new PathSegment(new Vector2(w, -h), new Vector2(w2, -h + c), new Vector2(0, -h));
        segments[5] = new PathSegment(new Vector2(0, -h), new Vector2(-w2, -h - c), new Vector2(-w, -h));
        shape.settings.pathSegments = segments;
        oldScale = transform.lossyScale;
        oldPathThickness = shape.settings.pathThickness;
        oldCurviness = curviness;
        oldOutlineSize = shape.settings.outlineSize;
    }
  
}
1 Like
35

Thanks :slight_smile:

36

Hi, im using your plugin to draw a circle, then another circle and using it as mask so i can show a circular border image. funny thing is if i change orientation it disappears. please advise

37

Hey, sorry but Iā€™m on vacation right now so I wonā€™t be able to help much for a week or so. What do you mean by orientation though?

38

when app is rotated to landscape from portrait view or and vice verca.
Will wait then, as i dont want to use images.
Have a great weekend :slight_smile:

39

Every so often I get someone complaining about disappearing shapes but it never happens for me. :slight_smile: Does changing a shape property at runtime fix it? If you remove the mask component do shapes still disappear or is it only when using UI masking? It would help to have your OS (target OS & device if it only happens in a build), Unity version and a small sample project that demonstrates the problem.

40

Here you go,
just put a raw texture to raw image control, and then deploy as an android apk, then change the orientation and whole thumbnail will disappear.

3093942ā€“233458ā€“shapes2dbug.unitypackage (9.15 KB)