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

lemon-tree · May 21, 2016, 1:31am

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!

lemon-tree · May 23, 2016, 8:35pm

Bump for release!

lemon-tree · May 24, 2016, 2:48am

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)

lemon-tree · June 10, 2016, 7:06pm

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!

majman · June 11, 2016, 4:23pm

awesome!

lemon-tree · June 28, 2016, 11:44pm

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:

textureImporter.ReadTextureSettings(texSettings);

And add this line below it:

texSettings.ApplyTextureType(TextureImporterType.Sprite, true);

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

lemon-tree · July 13, 2016, 11:06pm

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.)

lemon-tree · August 1, 2016, 11:33pm

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:

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!
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!

lemon-tree · August 4, 2016, 9:07pm

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):

lemon-tree · September 1, 2016, 8:21pm

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!

lemon-tree · October 4, 2016, 12:51am

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

breban1 · October 15, 2016, 5:25pm

The asset looks great congrats.

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

lemon-tree · October 15, 2016, 6:36pm

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

using UnityEngine;

public class VertsTest : MonoBehaviour {

    Shapes2D.Shape shape;
    Vector2[] verts;

    void Start () {
        shape = GetComponent<Shapes2D.Shape>();
        verts = new Vector2[4];
        SetVertices();
    }
  
    void SetVertices() {
        verts[0] = new Vector2(-0.5f, 0.5f);
        verts[1] = new Vector2(0.5f, 0.5f);
        verts[2] = new Vector2(0.5f, -0.5f);
        verts[3] = new Vector2(-0.5f, -0.5f);
        shape.settings.vertices = verts;
    }

}

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.

breban1 · October 15, 2016, 7:48pm

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?

lemon-tree · October 15, 2016, 8:21pm

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.

lemon-tree · October 26, 2016, 7:31pm

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.

lemon-tree · December 2, 2016, 1:00am

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.

jGate99 · December 29, 2016, 4:16pm

lemon-tree

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

lemon-tree · December 29, 2016, 8:23pm

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.

jGate99 · December 30, 2016, 9:09am

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?