[WIP] Vector Graphics from SVG file to mesh - The upcoming tool to Asset Store

Edit:
Let’s continue the discussion here! http://forum.unity3d.com/threads/co…ics-and-unity-live-happily-ever-after.357742/

Orginal message:
Hi!

We have been making our games with vector graphics. We were thinking that others will also enjoy faster workflow and premade tools that we have been using and developing for years now. So we have decided to release our SVG Unity tools in Asset Store! There’s still lot of generalization work to do before we can release them to the public. We are aiming to release our tools sometime around this year. So I think now is a very good time to gather some feedback what features are mostly needed and what do you guys appreciate?

We didn’t find any vector-to-mesh tools for Unity and build one by ourselves. We also used some transitions in our latest game Tile Tales that required that views are built on meshes and not on textures.

Highlighting features:

  • Works on Unity 5 personal edition
  • Drag and Drop usability
  • All vector graphics are imported as Meshes for “unlimited” precision.
  • Support for 90% of most used SVG 1.1 features, excluding fonts and texts.
  • No bitmaps or textures needed – smaller deployment size
  • Enables cool vertex-shader effects
  • Works on every Unity supported platform

We are using this tool in our own games so we also want it to be top notch.

I would like to have feedback from you. Do you use vector graphics? What is your basic workflow from a vector graphic tool to Unity scene? What would be good price for this kind of tool and would you buy it from the Asset Store?

One of our games made last autumn was Tile Tail on Windows Phone. (At the end side (1:02) there is transitions that were not posible with a textured SVGs):

Small gif to show the basic workflow:

1 Like

Your idea of “meshes from svg files” is very excellent. It will be very nice to see and to use this asset.

I have never used SVG graphics in Unity, because I am currently planning to buy SVG Assets. I don’t know if SVG Assets produce SVG sprites like standalone sprites, but at least full integration with SVG sprite editor would be excellent (for example setting pivot point for each SVG sprite). Of course texture feature is also very important. Will your SVG asset provide with full sprite feature integration (including Unity’s sprite editor) and texture feature integration?

If both SVG Assets and your SVG asset would be around 30$, I would have bought both :slight_smile: Since SVG Assets is (and probably your SVG asset will be around) 125$, I have to choose one.

For SVG work I am aware of 3 packages (There may be more).

Ragetools
NoesisGUI
SVGAssets

I think Ragetools is most like your product based on the limited info you have provided so far but I could be wrong about that.

My main use for Vector graphics so far has been mostly for UI and some game objects.

I am definitely looking for the best work flow of SVG files to uGUI objects and or Unity sprites. If a group of meshes are created like Ragetools it depends on how they can be manipulated.

1 Like

I haven’t known Ragetools, so I have a third alternative to buy :slight_smile: Thanks ibtye.
By the way, I don’t have any knowledge related to any of them. It would be excellent to have a trial version for each of them. I don’t know how Ragetools’ runtime performance. SVGAssets’ runtime performance seems excellent according to its feature documents.
I heard NoesisGUI, but it doesn’t support SVG.

What are you using to generate the meshes? Is is Poly2Tri?

Hi ibyte, seastar and MikeUpchat. Thanks for your interest!

We will build those tools so you can make small fast fixes to your shapes. Pivot point will be one.

Ability to render your shape as a texture isn’t something that we have needed. I think there are other good tools for that but we will see if integrating texturerendering into our product would be reasonable.

Finding the right price is quite hard. We will use this tool for our own game production and that means that we can make our living by selling games not assets. So we might find reasonable low price but it’s imposible to say right now.

Yes I think ragetools is pretty close to our product. Others are using rendered textures to present vector graphics. With ragetool there are now easy way to import complex svg-files and it’s kind of outdated (for example it still uses 3d physics). I think Ragespline has very good user interface build in and we are actually sharing our office space wiht the orginal Ragespline developer (Juha Kiili https://unity3d.com/pt/node/457) who now works for Unity so we can have very good reference how to build good usability in our tools. I think NoesisGUI is full gui system. We want to offer one simple and easy to use tool for handling SVGs in your game.

[quote=“ibyte, post:3, topic: 579484, username:ibyte”]
I am definitely looking for the best work flow of SVG files to uGUI objects and or Unity sprites. If a group of meshes are created like Ragetools it depends on how they can be manipulated.
[/quote] I think we have to come up with extended uGUI container where you have our vector-mesh and also uGUI image manipulating tools. Then you could use “3d” mesh with uGUI interface and I think that would be cool. For now I have had pretty ugly solution where our mesh is linked for example to a uGUI button and then in runtime we scale and move mesh to be in right place and right sized. But theres then draw order and other problems.

[quote=“MikeUpchat, post:5, topic: 579484, username:MikeUpchat”]
What are you using to generate the meshes? Is is Poly2Tri?
[/quote]First we have used our own triangulation script. Just now we moved to use external library and it hapens to be Poly2Tri and we use it with Clipper. It needed some work to but we have have promising results with it. Do you have any experience with it? It’s also good that Poly2Tri has C#-version so it works on every platform with Unity.

One of the things I like best about RageSpline is the ability to create simple shapes from scratch within the editor. No SVG required.

Do you have plans for any functionality like that? I build entire 2d landscapes using RageSpline edit tools and no SVG.

Everything in Krashlander was a RageSpline.

-Jeff Weber

Hi Jeff, Krashlander seems very cool game with polished look. We have plans to implement some very simple editing tools inside Unity but for now we have been using Adobe Illustrator, so it haven’t been on the highest priority. Even though there are good vector graphic editors out side Unity I also think it’s very important to be able to make fast prototypes within just Unity editor and even better if you can use those tools to make visuals to a whole game :slight_smile:

Is there any specific tool in RageSpline that you have liked the most? Or a tool that has been missing?

Hi Actually NoesisGUI uses XAML which is vector based. MS tools can import SVG and convert to XAML. Just another option for vector art.

Hi Yes it has been some time but I was a very early supporter of Juha and Ragespline. You can see I borrowed the Ragespline eyeballs for my avatar and I drew that entire graphic with Ragespine.

Of the existing packages I would tend to use RageSpline/Tools for dynamic vector objects and SVGAssets for vector to image support.

I look forward to checking out what you folks have to offer as well.

iByte

[quote=“ibyte, post:9, topic: 579484, username:ibyte”]
Hi Actually NoesisGUI uses XAML which is vector based. MS tools can import SVG and convert to XAML. Just another option for vector art.
[/quote] That’s interesting! I would like to try Noesis in some project but I think it’s bit over priced if you want just vector graphics and don’t care of other tools that it offers (http://www.noesisengine.com/noesis_gui_licensing.htm). It also requires Unity pro and doesn’t work with U5, Windows Phone or web player.

[quote=“ibyte, post:10, topic: 579484, username:ibyte”]
I look forward to checking out what you folks have to offer as well.
[/quote] I hope we manage to offer something totaly new and different from those already in the market. If we can’t we shouldn’t do this :wink:

[quote=“ibyte, post:10, topic: 579484, username:ibyte”]
Hi Yes it has been some time but I was a very early supporter of Juha and Ragespline. You can see I borrowed the Ragespline eyeballs for my avatar and I drew that entire graphic with Ragespine.
[/quote] Yup, I recognized your “rally team” at first sight :smile:

I am not trying to promote Noesis but I think it should be clarified that the latest paid version is Unity 5 compatible, pro is no longer needed. They don’t actually have what the current price is for Unity which is per seat and not per project.

So anyway enough about them here and lets hear more about your product. :smile:

So how do you handle overlapping shapes - do you do z offsetting or?

Thank you for clearance. It’s good to know what else is out there. I think Noesis should clear their marketing information, their web page and Asset Store pages where quite missleading.

We use shader to sort order inside one svg-mesh-object. Between objects we are using transforms z offsetting but we are investigating if we could found more elegant solution. It would be awesome if we could integrate it with Unity’s own UI/2D sorting system. We will see.

I just found your game on Windows Phone Market (front page) and I realy liked your graphics and style! I hope someone will one day build a game with our tool and have such quality :smile: I enjoyed game’s challenge and unique control scheme.

tkoknordic, your project seems interesting, we’d like to see in the future more and more games that make use of 2D vector graphics. Just because SVGAssets has been quoted, we’d like to update you that version 1.3.5 has been released with Unity5 support.

It’s been while after our last update but I wanted to wait to have the Z-sorting solution up and working. I have good news! we have found a super fast and elegant solution for sorting. As I sayed earlier we are sharing our office space with couple of Unity’s 2D team members and I stormed this ordering issue with Veli-Pekka and we were able to find a solution using earlier made Sorting Group component that automatically uses hierarcy to sort objects. It also ables manual sorting!

How it works:
Add Sorting Group component and it will automatically find all svg renderers in child objects. Then you can use manual sort to sort them as you like or you can use automatic sorting by hierarcy.

Images shows manual sorting in action. I can just drag and drop wich object I want to be in the front.

Of course it works with other geometries, them can be behind or in front of svgs. Next we will look how to integrate this tool with Unity’s UI.

Thank you! It’s good to have multiple different 2D tools because we have different game projects and different tastes how to use those tools.

1 Like

Hi, it looks awesome. Are you going to release it somewhere?

At the moment we are optimizing our tesselation and curve subdivision algorithms. We also have some work to do with transparency. After those tasks I hope we can publish something (in couple of weeks)!

1 Like

I want to use this asset on all my projects. I am waiting its release time very curiously.

1 Like