Vectrosity - Fast and Easy Line Drawing

Hi,

Is there any way to prevent VectorLines drawn in world space from having their faces oriented towards the camera?

I'm trying to draw lines flush on the XZ plane by setting points3 manually, but I'm using an angled, isometric camera. The problem I'm having is the lines "twist" to face the camera which makes them appear misaligned.

I tried using SetCamera3D with a top-down dummy camera, but that breaks the positioning altogether since I'm rendering the layer from a different angle.

Example:


Thanks!

 

Also a somewhat related question: is it possible to specify my line width in world space rather than pixels?

 

Not at this time, sorry.

--Eric

 

Just to be sure, to both points?

Is there a roadmap or feature tracking list somewhere? This is a bit of a dealbreaker for us unfortunately- thanks.

 

Both points. Using a dummy camera should work, though, since the line will be oriented to that camera. If it doesn't work with a dummy camera I'm not sure how it would work without one? If I add that feature I expect it would have the option to use a normal that lines would use for orientation, which is the same result as a dummy camera, just more convenient.

In other news, since Unity 5.2 is out, Vectrosity 5 is out!

Additions:
• 2D VectorLines can be created in the editor. To create one, use the GameObject->UI->VectorLine menu item, or from the Create menu, choose UI->VectorLine. Various attributes can be edited in the inspector, and lines can be drawn and edited on the canvas. To use the line in a script, reference GetComponent(VectorObject2D).vectorLine. This can also be used for lines created in code at runtime (in the editor, not builds).
• VectorLine.texture, which is the texture used for drawing the line (since the texture is now separate from the material).
• VectorLine.layer, for setting the GameObject layer of the line (not to be confused with the rendering order controlled by VectorLine.drawDepth).
• VectorLine.alignOddWidthToPixels, which adjusts the line's RectTransform so that odd line widths (1, 3, etc.) are aligned to the pixel grid. Otherwise lines with odd widths are aligned "between" pixels, where straight horizontal or vertical lines can look blurred if FSAA is used.
• VectorLine.SetCanvas function, for setting a line to an arbitrary canvas.
• VectorLine.SetMask function, for masking a line.
• VectorLine.SetEndCapColor function, which can be used to set different colors for the end caps, rather than having them use the color of the line segment they're attached to.
• VectorLine.lineType, which returns type of the line (Continuous, Discrete, or Points). This can be changed after the line is created.

Changes:
• Requires Unity 5.2 or later, due to changes in the way UI meshes are created.
• Lines are maskable; use VectorLine.SetMask to parent a line to a mask component in a UI canvas. This only applies to lines made with Draw, not Draw3D.
• VectorLine.canvases is removed, since canvases no longer have a 65K vertex limit, so there's no real need for more than one.
• Likewise, VectorLine.canvasID is removed.
• VectorLine.canvas3D and VectorLine.canvases3D are removed, since lines drawn with Draw3D are standard objects in the scene and aren't drawn with a canvas. So they can cast shadows etc.
• VectorLine.drawDepth does nothing with lines made with Draw3D, since they don't use a canvas.
• The VectorLine constructor no longer accepts Vector2 or Vector3 arrays, only List<Vector2> and List<Vector3>. You can easily convert an array to a List by using e.g. "new List.<Vector2>(myArray)" for Unityscript and "new List<Vector2>(myArray)" for C#.
• The capacity of the List used in the VectorLine constructor can be used to initialize the VectorLine.points2 or VectorLine.points3 list with the specified number of points. This is used in case you want to start the list with a number of points that you fill in later, rather than using List.Add. e.g., new List<Vector2>(50) will initialize the line with 50 points. The initial points are all Vector2.zero or Vector3.zero.
• The VectorLine constructor no longer uses a Material, but rather a Texture (which is optional). You can set VectorLine.material for those cases where you want to use something other than the default UI material (for 2D lines) or UI/Unlit/Transparent (for 3D lines).
• VectorLine.GetColor returns Color32 instead of Color.
• VectorLine.SetColors no longer accepts a Color32[] array, only List<Color32>.
• VectorLine.SetWidths no longer accepts int[] or float[] arrays, only List<int> or List<float>.
• VectorLine.SetEndCap no longer uses a material. The end caps use the same material as the rest of the line. Also, the line texture is part of the end cap, so two textures (line and cap) are required for EndCap.Front, Back, and Mirror, and three textures (line, front cap, end cap) are required for EndCap.Both. The line texture must be square, and the cap textures must be the same height as the line texture.
• Lines using "collider = true" take end caps into account for the collider.
• VectorLine.BytesToVector2Array is now VectorLine.BytesToVector2List, and it returns List<Vector2> instead of Vector2[].
• VectorLine.BytesToVector3Array is now VectorLine.BytesToVector3List, and it returns List<Vector3> instead of Vector3[].
• VectorLine.capLength works for Vector3 points as well as Vector2 points.
• VectorPoints is removed. Instead, create a VectorLine and use LineType.Points.
• VectorLine.continuous is removed; use VectorLine.lineType instead.
• Setting VectorLine.smoothColor updates all segment colors to reflect the changed value.
• The LineMaker editor script has been updated, and is now part of the standard package instead of being in a separate package.

--Eric

 

Thanks, had my dummy set up incorrectly, working now. I should be able to calculate the pixel width to set as well.

 

Just a note that the asset store doesn't have Vectrosity 5 yet. I submitted it 5 days ago, but they seem to be taking longer than usual lately.

--Eric

 

Hi Eric,

I may be going about this the wrong way but can I use Vectrosity to tile an image on a line?

Thanks!

 

If you mean like this, then yes.

--Eric

 

Actually what I am looking to do is something like this:

 

That's the same thing, it's just a different texture.

--Eric

 

Hiya Eric. Is the requirement that VectorLines be drawn using screen space overlay new in Vectrosity 5.0? I had a line graph using screen space camera working well in 4.4, but in 5.0 the line is no longer drawn under certain conditions that I'm still trying to identify. I ask because the "Only screen space overlay is supported" warning seems to be new in Vectrosity 5.0. I'm using Unity 5.2 with both versions.

 

Screen space camera works, just not for the visual editor.

--Eric

 

@Eric5h5 , any chance we can get the new version from somewhere else?

 

I used your DrawLinesMouse script to raycast and draw lines like MS Paint on a mesh surface. Now I was trying to implement an eraser functionality with the setup. Do you know what's the best method to create this functionality with Vectrosity?

 

It's available only on my site until the asset store approves it. Previous updates have been approved in as little as 1 day, so I thought 5 would be plenty, but there's not much I can do about that, sorry.

You can use VectorLine.Selected and get the index of the segment you want to delete. It's not really possible to do pixel-perfect erasing though.

--Eric

 

After I get the index, would I call something like this?

Code (csharp):

1. line.points3.RemoveAt(index);

Also, would it be possible to simulate erasing by creating a newline with a material with some type of masking/subtractive shader?

 

Well, the index value is for the line segment (i.e., what you would use with SetColor and SetWidth), so which point you remove depends on what type of line it is (continuous or discrete).

I'm not sure if that would be workable. For true pixel drawing/erasing, you'd probably be better off using actual pixels.

--Eric

 

I had already tried this but the results never came out as I wanted. I found a solution anyway using Texture2D.SetPixels() and Texture2D.GetPixels().

 

@wrenagade Are you referring to my post? If you are, could you PM me with how you approached this?

 

Ok, thanks, Eric! Hopefully it won't take long for AS to approve the new version.

 

I had already tried this but the results never came out as I wanted. I found a solution anyway using Texture2D.SetPixels() and Texture2D.GetPixels().

Still the results are not exactly as desired though. The source png is 20x5 pixels. Below are two snaps, on the left are 30 SpriteRenderer's on the left is a Texture2D using SetPixels and GetPixels and then setting that texture to a single SpriteRenderer.

Texture2D destination = new Texture2D(20, 5 * count);
Texture2D source = (Texture2D)Resources.Load("Coil" ,typeof(Texture2D));
Color[] pixels = source.GetPixels(0, 0, 20, 5);
for (int i = (count - 1); i >= 0; i--)
{
destination.SetPixels (0, i * 5, 20, 5, pixels);
}
destination.Apply();
Sprite sprite = new Sprite();
sprite = Sprite.Create(destination, new Rect(0, 0, 20, count * 5), new Vector2(0, 0), 100.0f);
spriteRenderer.sprite = sprite;

I know that this is not Vectrosity related but any comments are appreciated, Thanks!

 

Is it possible to draw a line with Vectrosity in world space?

currently my Line seems to draw as a HUD display, so when the Camera moves, the line floats with the camera.

Code (CSharp):

1. void Start ()
2. {
3.     line = new VectorLine("DrawnLine", new List<Vector2>(), lineMaterial, lineWidth, LineType.Continuous, Joins.Weld);      
4.     line.endPointsUpdate = 1;
5. }
6.  
7.  
8. void Update()
9. {
10.     Vector2 newPoint = Input.mousePosition;
11.      
12.     if (Input.GetMouseButtonDown(0))
13.     {
14.         line.points2.Clear();
15.         line.Draw();
16.         line.points2.Add (newPoint);
17.         canDraw = true;
18.     }
19. }

 

Use Draw3D.

--Eric

 

I am trying to use Vectrosity 4 with Unity3d 5.2 to vector-ize a scene that has several small apartment buildings to produce a similiar effect as in the movie "escape from new york" using the xraylinedata.js and vectorobject.js when I hit play I can see the building in wire frame as I swoop by it but then unity3d locks up and I get the spinning rainbow of death until I force quit Unity3d. I have uploaded my xraylinedata file and a included a screen shot here of the building im converting.



the xraylinedata looks like this:

attached below because the array entry was long. I really like your product and want to us it for this effect.

when I remove the array entry for the building I don't get the crash.

Any help will be great.

Garry
Crazy Beard Entertainment

 

I'm not able to get any freezes no matter how much I move a camera around with that object, but I'd recommend saving the data as files and using BytesToVector3List, rather than using tons of array data like that.

--Eric

 

Ok. that is interesting. I will switch to reading the data from a file. When will the version 5 update hit the asset store?

Garry

 

Just a quick information. It appears that with Unity 5.2 Vectrosity 4 is broken for Android builds. Rendering of simple lines with colors and/or material appears to not work anymore. The SimpleLine2D demo which draws two white and a dotted yellow line renders only black solid lines on Android. (multiple android devices tested). In the Editor, MacOS and iPhone build everything works as expected.

 

Yeah, also have black lines on android. That's why I'm waiting for the next version.

 

I am using the Vectrosity 5 Beta and I am having a hard time setting the color for a line.

Code (CSharp):

1. public void CreateSquareNonFill(){
2.     VectorLine SquareLine = new VectorLine("Square", new List<Vector3>(5),10.0f, LineType.Continuous);
3.     SquareLine.color = Color.red;
4.     SquareLine.SetColor(Color.red);
5.     SquareLine.MakeRect(new Vector3(7f,-9f,-3f), new Vector3(9f,-7f,-3f));
6.     SquareLine.Draw3D();
7.    
8. }

I've created a button and above is the OnClick() function for the button. I am able to get the line I want and it does show up in the world space, I just can't seem to figure out how to change the color. It says it is a color32 in documentation, and I have tried combinations of that. Any help would be appreciated.

 

I have black lines too with Unity 5.2 Vectrosity 4 on WebGL.

 

You'd have to ask the asset store staff.

I've heard reports of the old UIVertex rendering having issues like that with Unity 5.2. That's the main reason why I made Vectrosity 5, since it uses the new UI mesh rendering. (Although the earlier Unity 5.2 betas simply removed the old UI rendering entirely, so I guess black lines are better than no lines. )

Using either .color or .SetColor works fine, at least with the final version. The beta has been over for a while; as I mentioned, any beta testing needed to be done right away.

--Eric

 

Hi Eric,

the standard Unity TrailRenderer's lines are always oriented towards the camera, but there is also foreshortening (they get narrower the further away from the camera).

It seems to me like Vectrosity does the first (orientation), but has no option for the last: If I specify a constant width, this width is imposed in the 2D plane, so there is no foreshortening.

Is there a way to have constant thickness in space, not in the camera plane?

 

Not at this time.

--Eric

 

Hi, I have a problem since Unity 5.2.

First the line are black on WebGL (maybe on Android/iOS, I didn't test yet). It's probably related to the deprecrated SetVertices. So I tried to switch to Vectrosity5 but I can't reproduce exactly what I had in 4, since you cancel some features in 5. (ex: support sor Worldspace Canvas)

With Vectrosity4 I had a Worldspace Canvas with 2D lines. So the width of the lines was changing depending of the camera.

I need to have the same thing with Vectrosity5, but I think missed something because I can't have the same thing.

I use 3D lines, but the problem is that the width is in screenspace, I need to specify the width in worldspace. What do you suggest?

 

Code (CSharp):

1. private Texture2D lineTexture;
2.  
3. void CreateTexture(){
4.         ColorManager GetColorScript = colorManager.GetComponent<ColorManager>();
5.         lineTexture = new Texture2D(1,1, TextureFormat.ARGB32, false);
6.         lineTexture.SetPixel(1,1,GetColorScript.currentColor);
7.         lineTexture.Apply();
8.     }
9.  
10. public void CreateSquareNonFill(){
11.         CreateTexture();
12.         VectorLine SquareLine = new VectorLine("Square", new List<Vector3>(5),lineTexture, 10.0f, LineType.Continuous);
13. SquareLine.MakeRect(new Vector3(7f,-9f,-3f), new Vector3(9f,-7f,-3f));
14. SquareLine.Draw3D();
15. }

I figured out how to set the color on my VectorLine. It kept showing up as white even though the default color was defined as black. I tried setting the color and it would show up in the inspector but nothing happened. I even tried editing the material color. To fix it I just created a one pixel texture with a color of my choice then put the texture into the VectorLine.

 

I didn't do that; if you want to set the canvas for 2D lines to use world space, go ahead.

This isn't necessary, since you can just set the color. I'd suggest deleting the beta you have.

--Eric

 

Hmm ok, I'll recheck but this warning confuse me:

Code (CSharp):

1.             if (canvas.renderMode != RenderMode.ScreenSpaceOverlay) {
2.                 SetWarning ("Only canvases using Screen Space Overlay are supported");

 

That's for the visual editor only.

--Eric

 

May I ask why? Just curious. Is it harder to implement or do you feel it is somehow inconsistent with Vectrosity?

 

Ok I found my problem with the worldspace canvas in Vectorisity5.

In Vectrosity4 I had this setup:

GameObject1
|---Worldspace Canvas
|--VectorCanvas (set to strech)

I wasn't able to make it work in 5. I had to add some "if" in the editor class but now it's fine.

Another problem I had was the bounds of the mesh were always dependant of the screen (I'm not sure why it was like that). I needed to modify the bounds to be set from the vertices of the mesh. (in SetMeshBounds())

Thanks for providing the source code!

 

As the comment in the source notes, if the bounds aren't set to the size of the screen when drawing on a canvas, bad stuff tends to happen. Specifically Unity running extremely slow and crashing.

--Eric

 

Yeah I read the comment, maybe in screenspace it can fix some issue. But if I don't use the vertices of the mesh for the bounds, there's no way it can work in worldspace. (or I missed something)

 

It's not the focus of Vectrosity so other things have taken priority.

--Eric

 

Does anyone know how to set sortingLayerName and sortingOrder for vectorline ?
The reason I need is because I have 2d objects that I want to get rendered behind the line, and other 2d objects in front of the line.

 

vectorline.rectTransform.GetComponent(Renderer).sortingLayerID

--Eric

 

That doesn't work.
I am receiving this error:
MissingComponentException: There is no 'Renderer' attached to the "Line" game object, but a script is trying to access it.
You probably need to add a Renderer to the game object "Line". Or your script needs to check if the component is attached before using it.

 

Actually, it turns out, if I want the lines to be not on the most top GUI layer, I need to use Draw3D() instead of Draw()
In that case I can access the Renderer and manipulate it. So in that case vectorline.rectTransform.GetComponent(Renderer).sortingLayerID works just fine.

Thanks

 

Just using Vectrosity for the first time and it's pretty much every bit as awesome as Eric5h5's SpriteTile, save that when I run my project on an Android device, the line drawn is just a thin, black line and not using the assigned material or colours.

 

That's a Unity 5.2 problem, which Vectrosity 5 fixes. Or you could use Unity 5.1 and Vectrosity 4.4.

--Eric