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

Unity Asset Store

Online documentation

Source on GitHub

More updates on Twitter

Discord
​

Shapes2D is a Unity asset for easily creating customizable 2D shapes. You can use Shapes2D for rapid prototyping, game jams, UI, effects and more!

​

Here's an idea of the kinds of shapes you can make:

Shapes2D shapes can act as Sprites or Unity GUI components (i.e., Images):



Here's a simple game prototype made entirely with Shapes2D:



You can also use the "Convert to Sprite" button to turn a shape and all its child shapes into a traditional sprite with one click - it drops a PNG in "Assets/Resources/Shapes2D Sprites" and updates your object to use it, all in one step.

Thanks, and please let me know if you have any questions or suggestions!​

 

Bump for release!

 

Just realized I can give out free vouchers! If you take one, please consider leaving a review on the store, or feedback in this thread or via private message or email. Thanks!

ASV-HJWJ-ATFN-3P9N-X79J-NYE7 (used)
ASV-XCUJ-MM7E-9HDH-QHFF-WALC (used)
ASV-96AQ-7PQA-DT37-NQXW-D6E6 (used)
ASV-JVE9-FTTL-43K6-EHX9-4DWT (used)
ASV-UVYU-TRWJ-37RT-FWGD-V69L (used)

 

Version 1.1 is out! This update adds resolution-independent antialiasing which should make things look a lot nicer without having to tweak blur manually. It also fixes some problems on Android (etc) where shapes weren't showing up correctly. ALSO it adds the Flappy Shapes game from the WebGL demo, and a few other things!

If you have any issues or find a bug, please let me know!

BTW I have made the asset free for a week to build up some more reviews and ratings so get it now if you're interested, and please give me feedback/feature requests!

 

awesome!

 

Just a heads up, I'm suddenly running into a bug where the "Convert to Sprite" button makes a .png asset but fails to convert your object into a sprite, meaning it just disappears from the scene. This is on Unity 5.3.3f1 and wasn't happening before so I'm not sure why it's happening now, but in case you're also running into this issue, this seems to fix it:

In Shapes2D/Editor/ShapeEditor.cs, find line 263 which should look like this:

Code (CSharp):

1. textureImporter.ReadTextureSettings(texSettings);

And add this line below it:

Code (CSharp):

1. texSettings.ApplyTextureType(TextureImporterType.Sprite, true);

I'll release a new version with this fix after I have time to test it better.

 

Oops, I forgot to post when version 1.2 was released! This "fixes" (see below) the problem mentioned above, as well as adds support for Unity's Mask and RectMask2D so you can use UI shapes as masks (or use masks on them).

One caveat if you use a shape as a mask is that the Shapes2D.Shape component has to come AFTER the Mask component on the object! Use the little gear icon in the inspector to move components up and down. Masking uses Unity's built-in stencil buffer functionality so no gradient masks or antialiasing on mask edges, unfortunately.

I also documented the code internally and put documentation online here.

(The problem with generated sprites not being imported correctly isn't totally fixed! It worked during my tests, but now it's only sort of working with the released version. So, expect another bugfix release soon.)

 

Version 1.3 is out! I'm pretty excited about this version because now you can make custom polygons, which hopefully a lot of people will find useful:



There is also a pretty big performance improvement for large numbers of non-dynamic shapes, and an included stress test demo so you can get an idea of what's feasible.

Also, the online documentation has been totally overhauled and looks a lot nicer now. I tried to be as helpful as possible in the documentation describing the performance implications of procedural shapes and custom polygons specifically (although if you use Shapes2D just for creating sprites then performance doesn't matter).

Unfortunately, there are two annoying bugs I didn't catch until it was too late:

1) Sometimes, in some projects, shapes disappear when you tab away from Unity and tab back (when in edit mode). You just need to get the editor to refresh and they'll reappear. Annoying!

2) UI shapes don't update properly when you change their size in the editor (or if you dynamically update their size in-game). If you change one of their properties, they'll refresh. I have submitted a fix for this already but it will probably take a week to get approved. Sorry!

 

Shapes2D v1.4 is out! This is just a quick bugfix release to fix the above problem (#2) of UI shapes not updating properly when you change their size.

Also featuring this new icon (which I made with Shapes2D, naturally):

 

Shapes2D is FREE for the next week!

I'm pleased to announce that Shapes2D 1.5 is out now! In this version I have finally managed to fix the persistent problem of shapes sometimes disappearing in the scene view after some editor events.

To celebrate I'm making the asset free for a week in the hope that more people will try it out. Please leave reviews and/or feedback if you get a chance!

 

Shapes2D v1.7 is out! This update adds arcs, donuts and pies to the shape roster. Check it out!

 

The asset looks great congrats.

Question: Are the verts editable in code during runtime? If so you'll have 1 more sale!

 

Thanks! They are editable for the polygon shape type at runtime (pretty much everything is editable at runtime), something like:

Code (CSharp):

1. using UnityEngine;
2.  
3. public class VertsTest : MonoBehaviour {
4.  
5.     Shapes2D.Shape shape;
6.     Vector2[] verts;
7.  
8.     void Start () {
9.         shape = GetComponent<Shapes2D.Shape>();
10.         verts = new Vector2[4];
11.         SetVertices();
12.     }
13.  
14.     void SetVertices() {
15.         verts[0] = new Vector2(-0.5f, 0.5f);
16.         verts[1] = new Vector2(0.5f, 0.5f);
17.         verts[2] = new Vector2(0.5f, -0.5f);
18.         verts[3] = new Vector2(-0.5f, -0.5f);
19.         shape.settings.vertices = verts;
20.     }
21.  
22. }

See the docs for settings.vertices. Setting verts is slow on mobile though, please read the performance/polygon optimization docs also to make sure it's gonna work for you.

 

Yes, this will be on mobile. I will read the doc and make a decision! Thanks for the quick reply, looks like a fantastic asset.

Also, these don't have to be sprites right? They can just be a geometric shape that can be put anywhere in 3D?

 

The vertices are constrained to 2D, but they work more or less like sprites so you can rotate them in 3D if that's what you mean. The edge antialiasing works in 2D so they might get a little blurry if you zoom in. I have a free code left so I'll PM it to you, since I'm not sure if it will work for you or not. Then you can just see for yourself.

 

Shapes2D v1.8 is out! Now you can customize pixels-per-unit when converting to sprite. Just go to Shapes2D/Preferences in your project window.

 

Pleased to announce Shapes2D v1.9 - introducing the new Path shape type which lets you draw curves, lines and arbitrary filled objects, for example:



This really opens up a lot of possibilities for creating art assets right from the Unity editor, especially if you layer shapes like with the potion & sword examples above.

As always, if you convert-to-sprite (which is really the main idea behind this asset) then Shapes2D has no impact on performance. You can also use Shapes2D procedurally at runtime, but I don't recommend doing that with the Path shape type as it does not have good performance.

Please let me know if you have any problems or suggestions.

 

lemon-tree

Is this resolution independant if we dont convert it to png.

 

Yes it is - before converting to png shapes will scale smoothly. But please read the docs for performance notes; basic/small shapes may be ok to use un-converted for many purposes, but paths and complex polys are probably too slow to use in production without converting to png.

 

what i want is a round corner button, and there maybe only 1 button on screen.
So just to confirm, that button will look smooth whatever the resolution is like a vector graphic?

 

Yes, that is correct.

 

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

 

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




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?

 

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?

 

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.

 

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?

 

Just sent.

 

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.

 

@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?

 

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:

Code (CSharp):

1.        
2.     void OnEnable() {
3.         ComputeAndApply();
4.     }
5.  

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.

 

@lemon-tree
This problem was solved.

Can you please add support for this shape? its currently in vertical, i want to use it horizontally
http://www.kidslearningcentre.co.uk/drawing/shapes/bigimages/Banner.jpg

 

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?

 

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)

 

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!

Code (CSharp):

1. using UnityEngine;
2. using Shapes2D;
3.  
4. [ExecuteInEditMode]
5. [RequireComponent(typeof(Shape))]
6. public class Banner : MonoBehaviour {
7.  
8.     Vector2 oldScale;
9.     public float curviness = 0.2f;
10.     float oldPathThickness, oldCurviness, oldOutlineSize;
11.     Shape shape;
12.  
13.     void OnValidate() {
14.         if (!shape)
15.             return;
16.         if (oldCurviness != curviness)
17.             Recalc();
18.     }
19.  
20.     void OnEnable() {
21.         shape = GetComponent<Shape>();
22.         Recalc();
23.     }
24.  
25.     void Update() {
26.         if ((Vector2) transform.lossyScale != oldScale
27.                 || oldPathThickness != shape.settings.pathThickness
28.                 || oldCurviness != curviness
29.                 || oldOutlineSize != shape.settings.outlineSize)
30.             Recalc();
31.     }
32.  
33.     void Recalc() {
34.         shape.settings.shapeType = ShapeType.Path;
35.         PathSegment[] segments = new PathSegment[6];
36.         float w = (transform.lossyScale.x - shape.settings.pathThickness / 2 - shape.settings.outlineSize / 2)
37.                 / transform.lossyScale.x - 0.5f;
38.         float w2 = w / 2;
39.         float c = curviness;
40.         float h = (transform.lossyScale.y - shape.settings.pathThickness / 2 - shape.settings.outlineSize / 2)
41.                 / transform.lossyScale.y - 0.5f - Mathf.Abs(c) / 2;
42.         segments[0] = new PathSegment(new Vector2(-w, -h), new Vector2(-w, h));
43.         segments[1] = new PathSegment(new Vector2(-w, h), new Vector2(-w2, h - c), new Vector2(0f, h));
44.         segments[2] = new PathSegment(new Vector2(0f, h), new Vector2(w2, h + c), new Vector2(w, h));
45.         segments[3] = new PathSegment(new Vector2(w, h), new Vector2(w, -h));
46.         segments[4] = new PathSegment(new Vector2(w, -h), new Vector2(w2, -h + c), new Vector2(0, -h));
47.         segments[5] = new PathSegment(new Vector2(0, -h), new Vector2(-w2, -h - c), new Vector2(-w, -h));
48.         shape.settings.pathSegments = segments;
49.         oldScale = transform.lossyScale;
50.         oldPathThickness = shape.settings.pathThickness;
51.         oldCurviness = curviness;
52.         oldOutlineSize = shape.settings.outlineSize;
53.     }
54.  
55. }
56.  

 

Thanks

 

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

 

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?

 

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

 

Every so often I get someone complaining about disappearing shapes but it never happens for me. 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.

 

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.

 

Hmm, it works for me on the emulator and actual devices (via Amazon device farm anyway). There is a missing script on the Thumbnail object that you may have forgotten to include though. What device and android version are you testing on?

 

You can ignore that script, as its a custom texture setting from website.

Did you assign a texture to RawImage before testing it?

Did you reorient the device (actual device)?


Its happening in almost all the android devices i have used, From Nexus S5 to another one. the only difference is my project is quite complex

Can you please duplicate the thumbnails and palce them all over the scene and anchor them top left, right etc so you and then try again?

 

I don't have a device on hand to test with, so I'm using testobject.com which has actual devices (not emulators) and streams the screen video to me. So I can't rotate the actual device physically - they must use adb to rotate the device. I have to change the screenOrientation to fullUser in the manifest instead of fullSensor; otherwise the screen won't rotate because the device isn't physically being moved (I'm guessing). But it does work for me when I do that. Here's what I'm doing:

1. Create new 2D project in Unity 5.6.1
2. Import Shapes2D from the asset store
3. Import your test package and open the scene
4. Put the "Norman Texture" from Shapes2D into the Raw Image component on Canvas/AreaThumbnail/Thumbnail/Preview
5. Duplicate AreaThumbnail 4 times and anchor one in each corner of the screen
6. Export a development build using the Gradle build system
7. Open in Android Studio and change screenOrientation to "fullUser" in the manifest
8. Build an APK
9. Install on an LG Nexus 5X running 7.1.1 on testobject.com
10. Observe that the screen can rotate to landscape or portrait successfully

This is what I'm seeing.

I also tested on my iPhone directly and that works fine too. I'll see if I can borrow an Android from a friend.

 

FYI I just borrowed my friend's phone and the build ran fine there too (using the default "fullSensor" screenOrientation) - no problem with orientation changes at all. Is it possible there's some other difference on your side that would affect it? Did you try with Unity 5.6.1?

 

Shapes2D v1.11 is out!

- Updated anti-aliasing to avoid using certain shader calls that aren't supported on all Android devices (resulting in shaders failing to compile). The new method hopefully works across all possible platforms.
- Numerous fixes for polygon/path editing
- Fixed some glitchiness with certain ellipse settings
- Fixed warnings in newer versions of Unity
- Revamped UI demo to look nicer and have more widget examples
- Changed the default shape settings and prefabs a bit
- Minimum supported Unity version is now 5.4.0f3

 

Does this new update solve masking disappearing issue?

 

I still can't replicate your issue, but I don't think this update would change anything related to disappearing shapes unless the shaders were not compiling at all - but if that were true you would never see the shapes in the first place. Did you try with Unity 5.6.1? Does the bug happen in the Android emulator for you, and if so with what configuration?

 

I was actually using 5.6.1p3, ill test a new build and send u that one as apk to see the issue.

 

Okay, sounds good.

 

With this would it be possible to interpolate between diverse shapes?
For instance, interpolate from circle to triangle, triangle to square, or to hex?
If I do work with "polygons" could I handle the shapes as polygon coordinates and interpolate them manually if not built in.