ProtoShape 2D - Editor extension to easy create and edit 2D meshes

My editor extension for Unity is live: ProtoShape 2D. It's an editor extension that adds a simple way to create and edit 2D polygons using vector-like controls, fill them with color, 2-color gradient or texture and generate colliders for them. Intended for quick prototyping of 2D games it can be used to create vector-styled environments, decorations and whole scenes for the final game.

Get ProtoShape 2D on the Asset Store!

Features

• Easy and intuitive way to create 2D objects by placing and dragging points right in Unity scene view.
• Generate matching polygon or edge 2D collider. There's an option to detect top edge of the shape and create edge collider only for it.
• Simple keyboard controls: hold CTRL to delete points, hold SHIFT while dragging a point to use snapping.
• Snapping: you can align points to one another or use a grid.
  
• Export the object you've created to mesh asset or PNG file.
  
• Supports sorting layers same way as sprites do.

I've created this extension because I needed a tool to help me prototype and build games with simple, flat art-style. I intend to use this tool myself and keep improving it as I build games with it.

Update
Since the time I've published the first version of this asset in April 2017, I kept actively improving it. And a big part of those improvements were suggested by the users. So if you have a question about this asset, or feel that it lacks some feature, or if you'll find a bug in it, you can post a comment below, email me or contact me on my twitter. I generally try to respond within a day.
I'm grateful to all who helped me to improve this asset with your suggestions and bug reports.

A friendly reminder
If you bought this asset and liked it, why not give it a rating or write a short, one-sentence review! This would really help to popularize this asset and speed up the development of new features.

 

Since it's just launched, I'm giving out free copies! Here's one:

ASV-TRET-3P4P-9HUA-PWQM-GKUD

Edit: The code is still unclaimed after one day which means it probably won't be claimed any time soon. But I'll keep it just in case.

Edit 2: It's claimed now.

 

Updated the asset to version 1.01.

• Improved how it looks in 3D view (even though it's a 2D editing tool)
• Fixed some annoyances in UI.
• Added an option for edge collider to cover the whole shape, not only the top edge.
• Fixed a bug which caused a GUI-related error to be thrown in some cases.

 

As someone who has tried many things like RageTools and SVG Importer to do this sort of stuff, this looks really interesting. Thanks, will take a look.

 

Feel free to ask me anything or request a feature here or on twitter!

 

Updated asset to v1.02. Another minor update with few small features and fixes.

• Added sorting layers support that work the same way as in sprites.
• Added buttons for quick pivot adjustment when automatic pivot is disabled.
• The size of newly created object is now proportional to scene view scale.
• Fixed automatic pivot messing with undo/redo.
• Fixed minor issues with snapping and added diagonal snapping.

 

Can the points be moved during runtime to create animations?

 

In theory you can modify points[n].position for points in the list from code and call UpdateMesh() and UpdateCollider() to update the shape and collider. Or set the new list of points alltogether. In practice, I haven't tried animating it yet but I don't see why it wouldn't work. You should be able to update it every frame with no problems.
I plan to make the animations easier since it's a feature people frequently ask me about. But I'm not sure yet how to go about. Maybe for starters I'll just include some examples of animation from code into this asset.

 

Hey! So I gave it a try and found not only does it work, it works really really well! This needs some cleanup and polish still but here's what I did with it...

 

The speech bubble? Pretty cool!
Thanks for sharing!

 

Hey Andrii,

Any plans to add some anti aliasing options for the edge similar to what Rage Spline can do?

Here is a comparison: Look at the black shapes. ProtoShape is on top and a little jaggy. RageSpline is on the bottom with "aliasing" turned on and no jaggies.



Love your asset so far, but would really like smoother edges.

-Jeff

 

Hey Jeff. It's great to hear that you like this asset! I've actually submitted a newer version of it to Asset Store and it has an anti-aliasing feature in it! It will be live in few days as soon they'll review and approve it. I'll post an update here once new version goes live.

Here's a screenshot of how it will look (the difference is better seen at full size):



It adds a thin strip of triangles with a gradient to transparent color. There's no other options except turning it on or off right now (but maybe there's no need for them?). The width of an anti-aliasing strip is set automatically based on the size of the orthographic camera.

If you have more feature requests, you can always post here or contact me on Twitter.

 

Version 1.03 is live! What's new:

• Anti-aliasing option. It adds a tiny gradient around the shape to smooth out the edges.
• Optimization. All objects filled with single-color are now rendered in one batch because they use Unity's default sprite material.
• "Sorting Layer" settings now look exactly like in regular sprites.

Your ratings, feedback and feature requests are appreciated.

 

Awesome can't wait to try it.

 

Hi, I was experiencing weird bug. When I tried to build Windows executable Unity was saying that project can't be compiled:

Error:
Assets/ProtoShape2D/Scripts/LoopArraysAndLists.cs(4,7): error CS0246: The type or namespace name `UnityEditor' could not be found. Are you missing an assembly reference?

So I changed

Code (CSharp):

1. using UnityEditor;

to

Code (CSharp):

1.  
2. #if UNITY_EDITOR
3. using UnityEditor;
4. #endif
5.  

And this helped.

 

Thanks for the heads up! I've missed this bug and I definitely should have added #if UNITY_EDITOR
Will be fixed in next version.

 

No problem.
I also noticed that when I select Fill type as texture and:
1. add texture that has transparent edges it's shown once:

2. add texture that doesn't have transparency it's rendered as tiles:

Is this intentional? I think that checkbox "repeat texture" would be a better solution.

Another question is: Why Texture scale is max 5? It would be nice if we could set it to higher values.


Thank you for a great plugin.

 

This actually is setting of the texture itself, not the plugin. Just click on a texture and set "Wrap mode" to "Repeat". The texture you've selected in first screenshot most probably has this setting set to "Clamp".

There's actually no reason for this. I just wanted to keep the slider instead of the input field. This wasn't a good choice, I'll change the field to a float field instead of slider in next update along with other changes I'm working on.

 

Yes, this helped. Thank you.

 

Hey everybody!
Version 1.04 is live!
What's new:
- Improved how the curves work. Now you're working with them more directly.
- Improved snapping. After rewriting it for three times I think this one is much better.
- Fixed the issues mentioned above.

Here's an updated trailer.

 

Just a friendly reminder.
If you bought this plugin and liked it, why not give it a rating or write a short, one-sentence review!
This would really help me out and speed up the development of new features.

 

Hey Andrii.

I finally got some time to play around with ProtoShape some more. Things are looking good.

I do have a couple more things that I miss from RageSpline.

Do you intend to ever allow us to edit the curve using Bezier handles? The current method of dragging the points around is ok for some things but doesn't give as much control over the actual curve as manipulating the bezier handles.

The snapping you have is nice but any chance you could also add an optional grid to snap to. I often want to set points up on a grid so that certain points are equally spaced. The RageSpline grid system was nice because it lets you modify the grid size, how much it extends beyond the shape, whether the grid is aligned to the world or local space etc.

Sorry to keep harping back to RageSpline, but it's got a lot of really nice features that I think would be great if brought into ProtoShape2D in some fashion.

Thanks for the great asset.

-Jeff

 

Hi Jeff.

Yeah, I definitely have both Bezier controls and grid snapping on my todo list. In addition to some visual controls for fill and gradient scaling. I consider those features to be pretty important for this asset and I will implement them. Most probably during next two months.

 

Very cool. Good to hear!

-Jeff

 

v1.06 is live!

And it has Bezier controls. They're a beta feature right now and need a little more work but I feel pretty good about them.


Now when creating a new ProtoShape object you'll see a choice of Simple and Bezier. And you can convert one into another from inspector too. Simple ProtoShape is just for rounding corners quickly (same as before) and Bezier allows to precisely control the curve. So if you convert from Bezier to Simple, you'll loose the fine details.

I would really appreciate if you could provide some feedback on this feature on this forum or Twitter (preferred) @ax23w4. If you see a bug or want to request a feature, feel free to contact me.

Update. Actually, the more I think about it, the more it seems that "Simple" mode is something that could be ditched in the future in favor of just relying on Bezier controls. Tell me if you have thoughts about this.

 

v1.07 went live few days ago. It doesn't have new features but it has bug fixes for multiple responsiveness and UI issues. If you have experienced some jittery movements when dragging an object, a point or a Bezier control, those issues should be fixed now.
For the next version I'm working on some improvements for Bezier controls. If you have any feedback on those, I'd be glad to hear it.

 

v1.08 is live! Again, it's just some usability improvements for the new Bezier controls.

 

This is a cool asset - just what I was looking for! For some reason, I'm not getting the point properties editor when I click a point, so I can't create curves yet. Any idea how I might track down what's happening?

 

This is weird. I'll need to know which version of Unity you're using to try and recreate the error.
I recently found out that if you switched inspector to debug mode, custom guy is not being drawn. So this can be caused by something like this. Could you send me screenshot of it in a private message or email or post it here? Maybe it's not working with some specific screen layout or maybe it's conflicting with some other asset?
Anyway, it's great that you liked the asset and I'll try to resolve this ASAP.

 

v1.09 is live. There's now an option to snap points to a grid. This feature was requested by multiple people and I hope that I've implemented it in a way that would be helpful for them. As always, if you'll have any ideas on how to improve it, feel free to respond here or write me a message on twitter.

 

Hi, first of all this asset is amazing and really powerful Been playing with it for a couple of days.

One thing I miss though is an option to change the texture offset in each protoshape2d object.

So say I have a wood plank with a "Texture with Color" fill type with a tileable wood texture.
Now I want to copy the plank but modify the texture so both planks don't look the same. This is were an offset option would be handy.

Thanks in advance

EDIT: After thinking a bit more about my wood planks, a texture rotation option would also be very handy. Otherwise I will have to create the planks as horizontal planks and then rotate them (as my wood texture veins are horizontal).

 

Hey, and thanks for you kind words. It totally makes sense to add options to move and rotate the texture. I'll add them during next week or the week after.
Right now I've submitted version 1.10 and it should go live in a day or two and it has visual controls for the gradient. I'll try to implement a similar thing for textures.

 

You sir are my hero

 

v1.10 is live. It has many small usability improvements and a visual controls for a gradient fill.

Important note: this version of ProtoShape 2D has a change to how the gradient is positioned. So if you used gradient-filled ProtoShape objects in your project and you'll update to v1.10, you'll need to readjust the positions of all gradients in the scene. Otherwise it's always safe to update to the latest version. I always try to maintain backwards compatibility.

Next on the list of updates is texture offset and rotation with controls similar to gradient. Expect an update during next two weeks.

 

Very nice asset! But on android device all area pink =(
Is there any way to solve this problem?

 

This shouldn't be happening. I'll fix this as soon as possible.

 

I've just tried building on my android tablet and phone and it works fine for me. Maybe it's not working in your existing setup? Could you write me a private message or email and tell which unity version, which android device did you use and did you do anything specific in code that could cause this. Maybe it would also help if I could take look at your project and try to build it on my machine.

 

Thank you!
Developer solved the problem within a day!

 

v1.11 is live. There are just two fixes in it. One is fixing shader from not working on some Android devices (thanks to PolluxDevelopers for helping to locate and fix it). Second is a fix to PNG export feature - it didn't treat transparency properly, now it's much better.

I'm still working on improved texture controls which I'll hopefully release in the next version.

 

v1.12 is live! It has controls for texturing. I've updated the shader and the script to support more precise texture positioning. Important: This version of ProtoShape2D positions textures differently. If you use texture-fill in your project and you'll update your ProtoShape2D asset to the latest versions, you'll have to re-adjust all textures.


Important update.
I've just noticed that in my haste to publish the latest features I left a small bug in latest version of the code that triggers lots of errors when you switch to texture mode but your texture is empty. I've already submitted a version with a fix but it will go live only in 2-3 days after Asset Store reviews it. You can fix that bug manually for now by finding this line #648 in Editor\ProtoShape2DEditor.cs:

Code (CSharp):

1. DrawTextureControls();

And replacing it with this one:

Code (CSharp):

1. if(script.texture!=null) DrawTextureControls();

If you don't use textures, this will not affect you.

 

Works flawless, thanks a lot for the changes

One thing that is happening to me since v1.10 (at least I didn't notice it before) is that sometimes in the scene window the whole object dissapears when I move or zoom the view. If i move or zoom the view again the object reapears. It's very random...

EDIT: Here's a gif showing the problem.

 

Hmm. I never seen this happening and I can't reproduce it whatever I try. Does it happen with DemoGame scene provided with the asset? Are sprites disappearing too? I'll need to know more about this scene and your configuration. Unity version and maybe even a copy of this project if possible or at least more information on how to reproduce the bug. Email me if this keeps happening.

 

v1.13 is live. It has a fix for a texture bug introduced in previous version and described above in v.1.12 update.

 

This asset is great! Just picked it up, I'm excited to use it.

Off the bat I've run into an issue though, because I'm using a Mac machine with a Retina display. Retina displays have twice the pixel density than normal displays which has thrown some issues with unity assets. See attached gif:



Also, may I ask a feature request whenever you have time? It'd be really hand to have an option to auto-generate a 3D MeshCollider as well, using the same mesh as what's created by ProtoShape2D. A regular non-convex mesh collider, it'd be helpful for my game (as it stands I manually add them which works perfectly, it'd just be a bit handy to have it as a drop-down option).

Thanks, and again, wonderful asset

 

Hi. I'll try to fix that in the next version. I don't have a Mac or retina display handy but I'll try to find one or figure out how to fix it.

And the feature request is totally reasonable. I'll add this feature in a week or two.

And thanks for choosing my asset!

 

Heads up. I've just found that in Unity 2017.2 there is a bug that makes some features of this extension unusable. The points can't be selected and their properties can't be edited. But it's fixed in 2017.3 beta so it's probably better to skip 2017.2.

 

Hi Andrii, Great asset thanks for creating it

One request: Can you pre-make few shapes (circle, triangle, oval, octagon..etc?) it would speed up a lot when we create art pieces. Thanks.

 

Thanks for the idea! I'll think how to incorporate it into this asset!

 

v1.15 is live! It fixes a pretty big issue with Unity 2017.2 and 2017.3 - it works properly in all latest versions now. Also it allows selecting new points when you hold Shift. You can drag multiple points at once, change their parameters too.

 

Is there anyway to use this package for drawing 2D shapes in game mode ?