[WIP] LineWorks Vector Graphics

Great, thanks!

 

Hello,

Did you abandon Unity 4.6? We can't upgrade to 5.0 because it breaks our physics.

Do you support clipping masks? For example, say I create a list of control points that creates a closed square, fill in the square with a color, then create another list of control points that creates a circle. Could I use that circle as a mask to 'hide' the corners of the square? (This is just an example, I know you have rounded square corners in your demo video!)

Can you render (rasterize) the vector shapes to a bitmap/Texture2D?

Do you support Raster objects? Ideally I'd like to have a bitmap image/Texture2D as a base and then draw a vector shape on top of the bitmapped image (Raster object) as a mask and then render this resultant clipped image back to a Texture2D (with alpha hiding the masked parts).

Assuming that your package supports or will support these features, it sounds like something we definitely need to buy!

 

@gReMixx

Unity 4.6? Unity 4.6 is still holding on, but only by a thread. I'm really bending over backwards to fit all my data in 2 UV channels so if I need to fit anything else, I'm going to be forced to use Unity5's additional uv channels. Additionally, Unity5.2 will allow Unity UI to accept meshes which simplifies LineWorks a lot for me. However, I don't know if they will update Unity 4.6 to the same Unity UI implementation. Fingers crossed, I'm going to try to keep Unity 4.6 support.

Masks? LineWorks currently has a FillRule property that if used correctly will create a mask effect. See photo.


Rasterization? Unfortunately, no rasterization, just meshes. The current LineWorks shaders have a "MainTex" that can be used to display Texture2D's within fills and strokes. So I think you can create what you are describing but without the last step of rendering back to a clipped Texture.

Hope that answers your questions.
-Mike

 

Hey mtalbott,

I'm looking at using this for the Unity UI (uGUI) in Unity 5. So does your package do sprites or something that I can use as backgrounds for uGUI Sliders or Images? I'm okay with meshes too, as long as there's a way to do that. Just wondering how I could use this for the GUI. Having something that works with resolutions so easily is a huge draw for me. I just don't know exactly how that would work.

And if I had to vote, I would vote to drop 4.6 as well, but that's simply because I'm a Unity 5 user.

Thanks for any info/help.

 

@Velo222 LineWorks does not directly "use" sprites but instead creates a new type of asset that acts similar to how sprites work in a UI Image Component. The effect is that you can use Vector Assets for Unity UI just like you would use a sprite but a Mesh is created to represent the graphic instead of a quad with the Sprite texture applied (this is what a UI Image Component does). The only difference that might effect how you use it with a slider is LineWorks does not support 9-slicing like Sprites do. There is no reason that this can't be added in the future but I just want to get this thing done and out to the public first.

 

What's the rough timeline that you're looking at for the first release? I'm at the point where I'm starting to implement basic vector painting. I'm looking at using Vectrosity but the demo/example code is in Javascript (ew) and LineWorks looks much more functionally complete for what I need.

Do you have or have plans to add boolean logic for having essentially an "eraser" tool for line drawing applications?

 

@gReMixx. That's the big question, isn't it. When is this thing going to be finished. Well, every time I've taken a guess I've been way off.

I will tell you my "goal" and take it for what it's worth... I'm going to the Unite conference this year and I really want to have it complete and available by then. I don't really know how long the UT review process will take but I'm hoping a week will be enough. (I know some assets have taken longer). That gives me 8 days not counting today to finish. Given where I am right now, that's going to be cutting it close. But I promise that I will be working on it every waking minute till then.

I'll tell you what, if it's not submitted by the time of the Unite Conference, I'll give the beta to anyone that needs it. (That should be some added motivation for me to finish).

 

Hope this isn't too irritating but just curious if you made your goal and if not can I has beta?

 

At the risk of adding to the irritation, I too would like to know the status.

Thanks!

 

I would love to meet you at Boston

 

Any updates?

 

@mtalbott How are things coming with LineWorks? I'm about to start a new game and was hoping to try LineWorks and see if it'll suit my needs.

-Jeff

 

Good news, I've been able to made a lot of good progress recently on LineWorks. There is a short list of known issues but I might just have to leave them in the initial release. Even with the current bugs, I believe it to be stable and usable. You can take a quick look at some of the demos here:

WebPlayer: http://www.plp3d.com/LineWorks/Builds/WebPlayer/index.html
WebGL: http://www.plp3d.com/LineWorks/Builds/WebGL/index.html

Now time to write up some documentation and tie a bow on it. LineWorks for xMas?
-Mike

 

Your demos look great!

 

Looking forward to this! Any support for pixelated lines?

 

@Guideborn. Can you give me a little more information on what you mean by "pixelated lines". If what you wanted to know is if it's possible to use LineWorks without the built in anti-aliasing, then yes, anti-aliasing is not a requirement.

 

I'm trying to replicate this



Was using Edge Detection for a little bit, but I don't have pleasant control since black artifacts are appearing when I adjust the outlines. If I decrease the depth sensitivity to reduce the artifacts, I lose lines at certain corners.



Plus, I cannot change the colors of the outlines. I also do not wish to effect everything on the screen, but just the object I desire.

 

@Guideborn. I'm not sure if LineWorks alone can create the effect you want but I like the challenge so I spent a half hour yesterday to see how close I could get.

In short, my result is that it is possible to write a simple script to use LineWorks to draw the edges of any mesh with 3D strokes set to screen-space width and adjust the colors and width for different conditions. However, artificial pixelation is not something LineWorks is capable of but there are several image effects available on the asset store that can do it or up-res-ing a render texture could achieve a similar effect. Since that's not of part of LineWorks I didn't attempt it.

You can see my rough results below. Couple of issues: First, I am testing and adjusting all edges every frame in the script. This is not the best way to do it but if you're comfortable with shaders I think the LineWorks shader could easily be extended to test for profile vs inside-corner condition. Second, with any mesh-based line tool, there are some artifacts with the mesh occluding the lines. You could render the lines separately but then the mesh would not occlude the lines behind the object. My dirty solution was to move the lines towards the camera a tiny bit. That also could be moved to the shader for better performance.

hope this helps clarify what LineWorks is capable of.

 

I really appreciate you taking the time for this! However the video is private, at least for me.

 

Whoops. forgot to hit the silly "Publish" button in youtube. It should be public now.

 

Very nice! This is useful. I'm not upset about the artificial pixelation; was just an idea for something I wanted to try.

 

Waiting to buy this asset as xmas present for me
j

 

So excited to see how close this is to release!!!

 

Well, I got some good news... I've officially submitted LineWorks to Unity for review! Typically it can take about a week for review. However, because of the holidays, I think it will probably take longer. Looks like 2016 is going to be the year of LineWorks.

In the meantime I will be working on some getting started tutorials in the documentation which you can start to look at here: http://plp3d.com/LineWorks/Documentation/html/index.html

I'm also going to create at lease one introduction video next week so look forward to more awkward explanations.

I'll let everyone know when I hear from Unity and I guess I'll start a new thread for the release. That's what people do, right? I'll post a link to it here.

Thanks to everyone who has shared their interest and feedback here and a special thanks for tolerating my delays. I now understand why it took Unity so long to finish the new UI system.

 

Congratulations! I'll be first in line to grab my copy!

 

Hi Mike!

Your asset seemed to be live : https://www.assetstore.unity3d.com/en/#!/content/36334
Wish you good luck with your really promising asset.

Cheers
Michael

 

Ha! Thanks for letting me know! You would think that UT would have let me know that it was released... They didn't. Oh well.

If you're picking up your copy today, the documentation is still sorely in need of a Getting-Started tutorial. I'll try to write that up today or tomorrow and add it to the documentation website. In the meantime, here's the super-short versions:

There are 3 primary ways to use LineWorks: Through the Editor, through Scripts, and through Importing SVGs.

1. To work in the Editor, just add a LW_Canvas component to an empty GameObject (it will manager the required renderers, filters, and colliders). Add shapes by clicking on the dropdown next to the default LW_Group object (look for a dropdown that says "Menu"). With shapes added, they can be edited by checking the checkbox next to each shape (i.e. selecting them). Add styles to individual shapes by using the styles dropdown on the selected shape.

2. To work in a Script, use the static "Create" methods to quickly instantiate a new LineWorks object. All of the accessor properties should handle rebuilding automatically. eg. To draw a 2D circle with a blue stroke you could do the following:

Code (CSharp):

1. using UnityEngine;
2. using LineWorks;
3.  
4. public class LW_ExampleScript : MonoBehaviour {
5.     void Start () {
6.         // Create the LineWorks Components and Scriptable Objects.
7.         LW_Canvas canvas = LW_Canvas.Create(gameObject, "MyFirstLineWork");
8.         LW_Circle circle = LW_Circle.Create(Vector2.zero, 30f);
9.         LW_Stroke stroke = LW_Stroke.Create(Color.blue, 4f);
10.  
11.         // Apply the stroke to the circle and add the circle to the cavas.
12.         circle.styles.Add(stroke);
13.         canvas.graphic.Add(circle);
14.     }
15. }

3. To work with Importing SVGs, just drag your SVG files to the project and they should automatically create a prefab ready to drag into your scene. If you delete the prefab or modify the SVG file you can reimport it by right-clicking the SVG asset and selecting "Reimport".

I'll get a more in-depth tutorial going asap. Thanks again for everyone's support and if you like LineWorks, PLEASE PLEASE PLEASE write a nice review. Thanks

-Mike

 

Alright, documentation is still a work in progress but paired with the examples provided, there is plenty to get started. Please go get your copy of LineWorks today. you can find it on the Asset Store here:
https://www.assetstore.unity3d.com/en/#!/content/36334

I've also started a "Release" forum post here:
http://forum.unity3d.com/threads/re...r-graphics-line-renderer-svg-importer.379205/

If you have any more questions about LineWorks, please head over there to continue the conversation.

Thanks!
Mike

 

Hi. I bought the LineWorks package because I am interested in showing realtime SVG graphics in a WebGL window. I saw that in the documentation there is stated that the parser can be used to parse a SVG in realtime and I would want to try this, but there is no other info about this. How can I do this, import SVG at runtime and not through the editor? Thanks.

 

I second this.

 

@andreidbz and @guneyozsan,

The answer is "no, but...".

Out of the box, the svg importer is limited to editor only. That said, I have one user that noticed that there was nothing limiting the svg importer to editor only so he modified the code to load svgs at runtime. He reported that it worked well.

Unfortunately, I haven't had time yet to modify and test that revision to the current package. I'll try to take a look at it asap.

 

@mtalbott
Hi Mike,

We got the plugin and successfully imported SVG's on runtime. I also implemented return GameObject functionality to some of your functions so that I could keep a reference to the SVG objects created at runtime.

However, a few SVG elements are rendered incorrectly. I sent an email to the support email provided but maybe it went unnoticed. Can you check please?

 

Got a quick question on this... I'm a little stuck on how to transform the spacial position into something that Lineworks likes. I've got an object in the world (specifically an imported SVG shape used for a chat bubble). The 'point' of the chat bubble should be positioned over the currently speaking character's head. To do this, I get the position above the character's head, but then I need to position the point on the path of the vector canvas to be this same position. I've tried transforming the position to local space and doing a number of other things, but the space that the path uses seems to be really different from that Unity is trying to give it as a local postioin.

So... the TL;DR question is: What do I need to do to position the point of a vector path to be the same as a specific position in the world?

 

@guneyozsan just sent you an email with the fix. I'll get it in an update for LineWork asap.

@DCalabrese. LineWorks provides many different ways to scale vector graphics and this internal scaling is probably what's making it tough to get the world position. Luckily, the LW_Canvas component has a "scaler" property that provides the transformation matrix to go from graphic space to local object space. From there your can get to world space anyway you want. That said, it could be more complicated because every vector graphic element can have it's own transform matrix, you can find that by getting the "transform" property of the LW_Graphic element. If you haven't changed the transform properties of the graphic element you can ignore this step. Otherwise you have to multiply all of the matrices together to get from vector space to local object space.

This might look like this.

Simple Example

Code (CSharp):

1.  
2. Matrix4x4 vectorToWorldMatrix = canvasTransform.localToWorldMatrix * vectorCanvas.scaler;
3. Vector3 worldSpacePos = vectorToWorldMatrix.MultiplyPoint3x4(pointOnPath);
4.  

More Complex Example

Code (CSharp):

1.  
2. Matrix4x4 vectorToWorldMatrix = canvasTransform.localToWorldMatrix * vectorCanvas.scaler * group.transform * path.transform;
3. Vector3 worldSpacePos = vectorToWorldMatrix.MultiplyPoint3x4(pointOnPath);
4.  

Hope that helps,
Mike

 

Hello Mike,
I know this is a very old topic but could this possibly work for a county map SVG graphic?
A couple of months ago I was tasked to do an intereactive, simple to use map for non-internet era users.
Basically a map that contains geological metrics of the water supplies, river flows, roads, and service points of interest. They are all separated into different layers, some of them with +8,000 curves/paths.
Would this tool support a case like this?

Thank you,

Jan Park
Game and Web Designer

 

@pakchano LineWorks could likely work for your needs. If you're willing to share a SVG file to test, I can plug it into LineWorks to see if everything looks right and usable. Just email me at mike@plp3d.com. Thanks.

 

@mtalbott Thank you for your reply. I have send you the files.
I am going to reply here again if the operation was successful for the community to know if it also works with big SVGs.

 

Hi Mike,
I'm new to Unity and bought LineWorks last month to make a 2d game. Here's two questions:
1) How to draw dotted lines? I can't find any related parameter in Stroke Properties. Is it unsupported?
2) When I import a SVG file, LW will generate a prefab for it. I instantiate the prefab to get multiple GameObjects. What I want to do is animating shape properties of them individually. Is it possible for LW? I've found that if one shape instance is changed, all clones will be changed too.
Thank you!

 

Hello Mike. I'm trying to use your asset for rendering dashed primitives - like stroke-dasharray in SVG. First I imported dashed SVG rect like this:

Code (csharp):

1. <svg width="400" height="180">
2.   <rect x="50" y="20" rx="20" ry="20" width="100" height="100" style="fill:none;stroke:black;stroke-width:5;stroke-dasharray:20,10,5,5,5,10" />
3. </svg>

Seems, LW doesn't use stroke-dasharray property

Then I played with stroke variable width:

Nope, this doesn't work.

I need this feature very much, so I'll try to implement it by my own.
There are 3 approaches come into my mind:

1. Build dashed contour mesh
2. Use clip() in shader
3. Use texture with alpha and UV mapping for imitating gaps

What do you think? I tend to implement clip() approach due to simplicity and animability but I've heard clip() lead to some performance loss

 

In the AssetStore is written it supports U5.2+ . Does it not support U4.72 ???