Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

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

Discussion in 'Assets and Asset Store' started by all_iver, May 21, 2016.

  1. TheHumanHack

    TheHumanHack

    Joined:
    Aug 17, 2017
    Posts:
    3
    This asset is rad. I am, however, having an issue getting the functionality that it is designed for. For instance when I go to customize a polygon I am unable to manipulate the nodes of the shape consistently. What happens is the node jumps directly to a non-intended spot which appears to be dependent on where my editor camera is.

    That is, when I click on a node and move the mouse the node will jump to a specific point within the white square bound, if I select a second node and attempt to move it without repositioning my editor cam then the second node jumps to the same place the first node jumped to. If i move the camera then the node will jump to another location when attempting to manipulate.

    I can very barely move the node from this position, only a few hundredths of a unit at a time regardless of mouse sensitivity.

    Additionally I am having an issue saving sprites, it is unreliable which layer will be applied to the top regardless of which generation the individual elements are placed on.
     
  2. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Hmm, are you in 2D mode in the editor view? It doesn't work well in 3D mode. There could be something else going on too though.

    What do you mean by "which generation the individual elements are placed on"? Is this with sprite shapes or UI shapes?
     
    SINePrime likes this.
  3. TheHumanHack

    TheHumanHack

    Joined:
    Aug 17, 2017
    Posts:
    3
    I will try it in 2d mode.

    By generation I meant it was inconsistent if the parent or the child would be overlapping. I tried several different methods and they all worked or didn't work seemingly randomly.

    Methods tried were:
    Creating the shapes objects in sequence(first object then directly creating a child)
    Opposite sequence( creating the child then the parent and making the child a child of the parent)
    Creating an empty GO and then making both objects children of that
    Creating an empty GO and making the intended parent a child of that and the intended child a child of the parent.
     
  4. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    If it's a sprite shape, then it should obey the sorting layer and order you set up in your SpriteRenderers. If two shapes are in the same sorting order/sorting layer then it will go by the z world position. If it's a UI shape then it should be based on the order of the child GameObjects in the hierarchy. It sounds like maybe you're using a sprite shape and not setting the sorting layer/sorting order? That would give you undefined results, I think.
     
  5. tahir_ali

    tahir_ali

    Joined:
    Jan 6, 2018
    Posts:
    119
    Edit path is not working in 2019.3.12f1.
    When I click on Edit Path in inspector unity editing hides but the path points does not show.
    Please help!

    Plus i think there should be a gradient color for outline too.
     
  6. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    It works for me in 2019.3.12f1, is it possible you have gizmos turned off globally or for the Shape component? A gradient for outlines is a good idea, I'm in maintenance mode for Shapes2D due to other projects taking my time, but you could put it as a feature request in Github if you want.
     
    tahir_ali likes this.
  7. tahir_ali

    tahir_ali

    Joined:
    Jan 6, 2018
    Posts:
    119

    Global Gismoz are enabled. Scripts hides its all editor if I disable Shape gismos.(Issue is still there)

    I put the feature idea in github issues. I add one more thing in the feature Corner based gradient like multiple gradient on single shapre.If its easy you can add it.
     
  8. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Hmm, in that case I'm not sure what the issue is. Can you send a screenshot to oliver@sub-c.org? Maybe I'll notice something if I can see your screen.
     
  9. tahir_ali

    tahir_ali

    Joined:
    Jan 6, 2018
    Posts:
    119
    Fortunately it started working.
    I was trying to make video of issue. So for better view I changed the layout. After changing Layout of editor from 2 by 3 to default it started working. :)
     
    JulianSithLord and all_iver like this.
  10. Askins

    Askins

    Joined:
    Jul 3, 2017
    Posts:
    15
    Holy moly this is an excellent plugin! I was busy trying to get these kinds of shapes using the SVG features in Unity now, but this gives such a better range of control. Really great stuff!
     
    all_iver likes this.
  11. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Thanks @Askins, glad you like it!
     
  12. Askins

    Askins

    Joined:
    Jul 3, 2017
    Posts:
    15
    Just a quick question regarding performance, it says in the documentation that simple shapes such as rectangles are fine when not converted to sprite, I presume rounded rectangles apply to this instance? I'm debating whether to use this plugin or the new svg feature for my assets in Unity and I'm wondering what method would be best for performance for my mobile game. A lot of the shapes in my game will be made up of simple vector shapes so I'm currently using imported svgs for my assets, however because of lack of 9 slice (it's still currently in Preview) even rounded rectangles have to be made in a roundabout way in Unity if I want to have any control over their size. If this plugin can give roughly the same amount of performance as svg meshes on mobile though then this will be a much easier solution in the end, it'd be great to have your thoughts on it. Ideally it'd be amazing to have an option to convert to an svg sprite instead of a png, would this be possible at all? I presume it'd be quite complicated due to the way the shaders work but it'd be a brilliant option to have if possible.

    Also does animating these shapes alter the way the shaders are calculated at all? In most cases these shapes will be used for BG stuff so will be mostly static and not altered dynamically in runtime, but it'd be great to know how the shaders work so I can optimize them as much as possible!

    Thanks again, it's a truly brilliant plugin!
     
  13. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Unfortunately I don't have a satisfying answer to this. Rectangles (round or not) are the fastest shape to render since the shader is pretty simple, but I haven't used Unity's SVG stuff so I don't know how that compares. It's been a long time since I did any performance tests. Maybe you could do a test on your target platform and see if performance is good enough with the amount of shapes you need (make sure they are sized correctly too).

    The other potential risk is that occasionally I get a bug report that some device doesn't render Shapes2D correctly, and it's hard for me to troubleshoot without the device. The only current problem I know of has to do with radial gradients (it's in the github issues), but I'd assume Unity's SVG stuff will be more battle tested in that respect.

    I'm not sure how hard it would be to convert to an SVG sprite. It probably depends on what kind of shape settings you use...it might be possible though. So your issue is just that it's harder to create the SVGs but really you want them as SVGs? I guess I'm wondering how many shape types you need and how much time you think you'd save vs just powering through and making them as SVGs.

    It's not so much that the shaders change, it's that each time you change a shape's settings then it has to send the new shader parameters to the GPU which is slow if you need to do that every frame for a lot of shapes. Again, I'd recommend you test on your target platform.

    I guess it depends on whether you can test enough to be confident beforehand, or if you just want to get something going quickly and potentially replace it later. Sorry I don't have a better answer!
     
  14. IcarusCell

    IcarusCell

    Joined:
    Dec 7, 2019
    Posts:
    2
    Heya! This is an incredibly useful tool, though one part of it is refusing to function on my end for some reason. Any time I attempt to edit a polygon none of the nodes appear. Any idea what could be causing the issue? Ive tried 2d and 3d mode, and reinstalling.
     
  15. TheFlyHawk

    TheFlyHawk

    Joined:
    Mar 23, 2016
    Posts:
    58
    Each Shape generate drawCall. Is it possible to optimize?
     

    Attached Files:

  16. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    @IcarusCell is it possible you have gizmos turned off in the editor? That's all I can think of right now that might cause it...what version of Unity are you using?
     
  17. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    @yaboo yeah, each Shape uses its own material. It's possible they could be batched or instanced or something, I think Unity has made some changes since I last checked. But unfortunately I don't have the time to look into it in depth now, sorry!
     
  18. IcarusCell

    IcarusCell

    Joined:
    Dec 7, 2019
    Posts:
    2
    Gizmos are on and the version is 2019.2.11f1
     
  19. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Can you send me a screenshot of what it looks like when you try to edit a polygon? Maybe I will notice something. You can email oliver@sub-c.org.
     
  20. VaccionesMad

    VaccionesMad

    Joined:
    Apr 17, 2014
    Posts:
    4
    Hello Oliver, first of all I'd like to congratulate you on such a fantactic Unity Asset. Way to go man :D

    I came with a doubt about converting to sprites that my artist is having (pretty sure we messed up somewhere).

    He was saying that during the Shape creation and editing it looks straight with no blur on the edges, like this basically.

    Pre Convert to Sprite.png

    But when he converts it to sprite it gets all blurry like this

    Post Convert to Sprite.png

    We were wondering where we messed up to make it look smooth, any help is appreciated.
     

    Attached Files:

  21. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Thanks @VaccionesMad ! A sprite will be blurry compared to a Shape because the Shape is recalculated on the fly depending on how you're looking at it. You're zoomed in close in that screenshot, are you saying it still looks too blurry at the normal zoom level? In a Screen Space canvas the size of your Shape determines the size of your PNG sprite. So if the shape is 64x64 canvas units you get a 64x64 pixel PNG, the bigger you scale it up the less blurry it would be at the expense of file size.

    Here's a change that would make it easier, I should probably do this in the official version too...

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

    Code (CSharp):
    1. w = Mathf.Max(1, Mathf.RoundToInt(bounds.size.x / scaleFactor));
    2. h = Mathf.Max(1, Mathf.RoundToInt(bounds.size.y / scaleFactor));
    to:

    Code (CSharp):
    1. w = Mathf.Max(1, Mathf.RoundToInt(bounds.size.x / scaleFactor * pixelsPerUnit / 100));
    2. 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.
     
  22. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
  23. VaccionesMad

    VaccionesMad

    Joined:
    Apr 17, 2014
    Posts:
    4
    This worked like a charm, thank you very much! :D
     
    all_iver likes this.
  24. NarryG

    NarryG

    Joined:
    Mar 11, 2020
    Posts:
    10
    Without tweaking anything, at regular zoom, there's clear differences in the edges (anti-ailiasing? I am using forward with MSAA on.) This is on a screen-space canvas set to 720p. Default everything
    Shapes2D


    Sprite



    Ignore the opacity change. I had the sprite's opacity down a bit which was ignored but when baked into a sprite it followed it. The focus is the edges.
     
    Last edited: Jul 12, 2020
  25. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Is this with the code change I suggested above and you're saying that increasing the resolution like I described didn't help? Are mipmaps on? If you turn on "generate mipmaps" in the sprite that may help soften it up a bit. I think Unity's built-in antialiasing won't affect shapes or sprites unless you're doing it as a post-processing effect. I guess I would try playing around with the PNG size and see if that makes a difference, let me know if you already tried that and you're saying it didn't do anything. What size is your rendered PNG?
     
  26. NarryG

    NarryG

    Joined:
    Mar 11, 2020
    Posts:
    10
    Mipmaps are off, Using your code change and generating images 3x larger then downscaling looks nice. I'll check mipmaps.
     
  27. starfoxy

    starfoxy

    Joined:
    Apr 24, 2016
    Posts:
    183
    hi @all_iver (or anyone else who might have a solution), my previews of the shapes are solid pink in Unity 2019.4. I see that this may be due to the render pipeline being used - in this case for me its 2D LRP. Everything still displays fine on the scene and play mode. Any fixes or things I can do to see the previews in the editor? Not a huge deal but kind of annoying on Unitys part. :)
     
  28. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    That sounds similar to an issue someone reported (https://github.com/all-iver/shapes2d/issues/7) where they say if you nest the shape under a child it fixes it, but that sounds kind of annoying. I haven't had time to look into this more, sorry!
     
  29. gabrielgardner

    gabrielgardner

    Joined:
    Sep 17, 2017
    Posts:
    3
    Hi,

    I am using this asset to create the UI for my game and for the most part it has been fantastic. However, for UI that uses a "Screen Space - Camera" canvas, when I rotate a rectangle (or any shape) to give the UI a 3D look, the shape does not render correctly. Does the asset not work if you attempt to render the shapes in 3D space?

    I realize I could convert them to a sprite but the shapes look cleaner rendered procedurally and I also have edited the asset to use HDR which I cannot achieve with a simple unity Image component.

    Thank you for your help -- this is an awesome asset and has already worked for the majority of my game's UI!
     
  30. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Hi @gabrielgardner, glad you're getting some use out of Shapes2D! Unfortunately the anti-aliasing/smoothing method doesn't really work in 3D so shapes will look worse the more they are rotated away from the camera. Is that what you're seeing?
     
  31. gabrielgardner

    gabrielgardner

    Joined:
    Sep 17, 2017
    Posts:
    3
    @all_iver It appears to me to be less of an anti-aliasing issue and more that the shape itself will render incorrectly based on the angle. If tilted away from the expected 2D plane (XY plane) it appears warped and sometimes doesn't even render at all depending on the angle. So to me atleast it doesn't appear to be a smoothing/anti aliasing error as it's not lacking in fine-detail, it renders entirely wrong. (Unless my understanding of anti-aliasing isn't complete)

    Maybe a helpful bug I notice is if tilted just minorly away, the "outline" of a rectangle will be wrong, where the outline on the sides (left and right) of the rectangle will be thicker than the outline on the top and bottom. Or vice versa depending on the angle.

    Thank you for your help and quick reply!
     
  32. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Hmm, if you convert it to a sprite are the outlines fixed in 3D or are they weird in the sprite too? Can you send me some screenshots to oliver@sub-c.org? I'm not really seeing that behavior when I try, it's more that the anti-aliasing on the edges is bad in 3D, so maybe there's something else going on. But to be honest it's not really intended to work in 3D.
     
  33. gabrielgardner

    gabrielgardner

    Joined:
    Sep 17, 2017
    Posts:
    3
    Once I convert to sprite, the outlines are correct. I will send you some screenshots shortly!
     
  34. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    For anyone else who might be looking, I forgot there is a fix that hasn't been pushed to the asset store yet, so if you have issues with shapes looking weird when rotated in 3D, try getting the latest version from github.
     
  35. chromosome

    chromosome

    Joined:
    Jan 28, 2020
    Posts:
    3
    Hi, is there a way to control a shape's size and position relative to a canvas? If I add a rect transform component I can't really resize it, only move it around.
     
    Last edited: Sep 23, 2020
  36. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Hi, the shape should use the normal rules for Unity GUI. Does your shape have a SpriteRenderer or an Image component? If it's a UI shape it should have an Image component and you shouldn't have to manually add a RectTransform, it would just be there already. I'm wondering if you created a sprite-based shape and put it in a canvas rather than creating a UI-based shape.
     
  37. chromosome

    chromosome

    Joined:
    Jan 28, 2020
    Posts:
    3
    Yes, I was using a sprite-based shape on a canvas and added a image component to that, but that was giving me two objects, one sprite and one UI image and the sprite wouldn't resize, it would just lay behind the image. I changed it to use an empty GameObject and added a shape component and it worked like a charm! Thank you for your answer!
     
    all_iver likes this.
  38. slimshader

    slimshader

    Joined:
    Jun 11, 2013
    Posts:
    187
    Hi again, I have an issue to report: when adding Shape component via gameObject.AddComopnent<Shape>() in editor, the visual's rounded rectangles are not updated in the scene until the component isn't clicked in the Hierarchy. Tried to call Configure(), ComputeAndApply() and even OnValidate and Update but no dice.

    Code (csharp):
    1.  
    2. var shape = gameObject.AddComponent<Shapes2D.Shape>();
    3. shape.settings.shapeType = Shapes2D.ShapeType.Rectangle;
    4. shape.settings.roundness = 20;
    5. shape.Configure();
    6. shape.ComputeAndApply();
    7. shape.OnValidate();
    8. shape.Update();
    9. LayoutRebuilder.ForceRebuildLayoutImmediate((RectTransform)shape.transform);
    10.  
     
  39. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    You mean that from within an editor script, if you do AddComponent<Shape>() a GameObject and then change the roundness setting the scene doesn't update? I just tried this and it works for me (in an older Unity version) with both sprite shapes and UI shapes. Or am I misunderstanding what you're trying to do?
     
  40. slimshader

    slimshader

    Joined:
    Jun 11, 2013
    Posts:
    187
    Yes, it is happening during building ui from the editor script. Using unity 2020.2.3
     
  41. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    I just tried it in 2020.2.4f1 and it still works for me. Anything else you can think of that might help me replicate it?
     
  42. szymongsetapp

    szymongsetapp

    Joined:
    Mar 3, 2020
    Posts:
    3
    I've mada minimalistic project to repro, only script is ShapeBuilder:
    Code (csharp):
    1.  
    2. public class ShapeBuilder : MonoBehaviour
    3. {
    4.     public GameObject target;
    5.     [ContextMenu("Build")]
    6.     void Build()
    7.     {
    8.         var shape = target.gameObject.AddComponent<Shape>();
    9.         shape.settings.roundness = 70;
    10.     }
    11. }
    12.  
    attached to a Canvas with a child Panel, the script then adds Shape to this panel.

    To reproduce the issue: open SampleScene and then just right-click on the ShapeBuilder component on the Canvas and select "Build" from context menu, you will see that Panel changed color a bit (it is a Shape now) but will not have it's corners rounded until Panel is actually clicked
     

    Attached Files:

  43. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Aha, thanks for the example. So the shape only updates when it IS clicked in the hierarchy, I had thought it was when you click away from it. Try doing something like this instead:

    Code (CSharp):
    1.         shape.settings.roundnessPerCorner = true;
    2.         shape.settings.roundnessTopLeft = 50;
    3.         shape.settings.roundnessTopRight = 50;
    4.         shape.settings.roundnessBottomLeft = 50;
    5.         shape.settings.roundnessBottomRight = 50;
    6.  
    It looks like settings.roundness can't be changed from code and only works in the editor, I guess that was just an oversight on my part.
     
  44. slimshader

    slimshader

    Joined:
    Jun 11, 2013
    Posts:
    187
    Works, thanks! I am working on a project that will hopefully make creating UIs in Unity easier and it is using this fantastic asset of yours. Will be MIT on github.
     
    all_iver likes this.
  45. capu087

    capu087

    Joined:
    Jan 17, 2016
    Posts:
    11
    Hello, thanks for this awesome asset!

    I have an issue that the shape result is different in the prefab view than in scene/game view:
    PREFAB:
    upload_2021-3-5_10-40-9.png
    GAME VIEW:
    upload_2021-3-5_10-42-15.png

    Script values are exactly the same in both prefab and game context:
    upload_2021-3-5_10-40-43.png
    I need to multiply by 20 in game view to have thesame result as in prefab view

    Do you know what can cause this issue?
     
  46. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Hey @capu087 ! I'm guessing this has something to do with your canvas configuration being different from the default canvas Unity uses in the prefab editor. For instance if you're using a world canvas but the prefab editor is using an overlay canvas, the scale would be all different. In newer versions of Unity you can right-click and do "prefab -> edit in context" which should let you edit the prefab using the same canvas as the scene view, does that help? In older versions I think you can make a scene with a canvas using your settings and set it to be the scene the prefab editor uses, it's in project settings -> editor -> UI Environment (I haven't tried doing that though).
     
    capu087 likes this.
  47. Efril

    Efril

    Joined:
    Aug 31, 2013
    Posts:
    82
    As I understand dashed/dotted paths can't be created using this package, right?
     
  48. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    Yes, that's correct.
     
  49. BTStone

    BTStone

    Joined:
    Mar 10, 2012
    Posts:
    1,422
    Hey @all_iver - can you confirm if this tool works with URP and the 2D Renderer?
     
  50. all_iver

    all_iver

    Joined:
    Nov 11, 2013
    Posts:
    158
    For the most part no, only the rectangle shape type has an option for rounded corners.