Vectrosity - Fast and Easy Line Drawing

Again, the results are correct on most platforms, which clearly makes it a Unity bug. It's up to them to make sure that the engine renders correctly on all platforms. But as it turns out it's nothing to do with the mesh. I had spent some time poking around with that and getting nowhere, and finally it occurred to me that maybe it was the texture. And indeed non-power-of-two textures were the culprit. The good news is that the latest version of Unity 5.4 has fixed that bug, at least for WebGL. Not sure about Android on Nexus 7 since I don't have one of those, but if it's still an issue in that case, I would recommend filing a report about non-power-of-two textures on that platform.

--Eric

 

Hey eric, I noticed a weird 'glitch' I suppose. I created a trail behind my ball using vectrosity with a WaitForSeconds(.01f), and has max points as 20. But sometimes, the trail is long, or sometimes it's short, with 20 points in each, I don't know how that's happening, would you have some idea about this?

 

I'm not quite sure what you mean; 20 points doesn't refer to length. Since there can be any arbitrary distance between points, a line can be very short or very long regardless of how many points it has.

--Eric

 

Yeah but it's based on the delay you keep before accessing the next point and drawing it yeah? I've kept a constant delay which should give me a constant length but I get a line of different length every 2-3 times I play it.
20 points with 0.01 seconds should give me a shorter line than 20 points with 0.02 seconds delay. But with 0.01 seconds delay I get different lengths.

 

Vectrosity draws what you tell it to draw; there are no delays or built-in functions for constant line lengths. It's all up to your code.

--Eric

 

Hey @Eric5h5, I've been using Vectrosity to visualize some stuff, and I have an issue I am running into. I am trying to get the Vectrosity line to look sort of like a sine wave, without actually giving it the points of a sine wave and a solid texture. I am using a straight line and a uniform 32x32 sine wave texture. I figure that will perform better.

This works great in 2D mode, but in 3D mode, as I rotate the camera, depending on the angle, the sine waves can vary drastically in scale (larger, or smaller) and appear to "slide around" on the line mesh. I am using Draw3D every frame.

Is there any way to get this to look better? I have set the line to non-continuous, and given it a uniform scale. I thought perhaps it was due to it being a longer line, so I broke it up into smaller segments to give Vectrosity more things to face at the camera, but that did not appear to help much.

Thanks!

 

Using a texture like that won't work for 3D; you should use an actual sine wave.

--Eric

 

Hi Eric. Thanks for this plugin it works nice!

I just have one issue though, I need to use capLength so that my line aren't touching each others. It works well with the Draw() function however with Draw3D() or Draw3DAuto() it doesn't - which is problematic as my lines are in a 3D environment.

I saw a post somewhere with someone encountering the same issue. Will it be fixed in the future?

Thanks!

 

I haven't had any requests for capLength with Draw3D until now, but I'll put it on the list. In the meantime you could get a similar effect by using a line texture with transparency at the front and back.

--Eric

 

Hello!
I have one GameObject which is moving on plane. Behind object have two points which are at a distance from each other.
1) I would like to render path, which passed by object, as line beetwen two points in every render time. Like as screen 1
2) If path intersected, intersected area draw by another color.
Any ideas how to make this?

 

With the list of points you used to create the line, set the first entry to point1's position and the second entry to point2's position. Call Draw after updating the points, or if you're using Draw3D, it's simpler to use Draw3DAuto. I didn't really understand the second question.

--Eric

 

1) Thank You for answer, now I am creating mesh by points, but I will try create via lines. Is all lines on trail will be evenly draw? As like one area or mesh?
2) Second question looks like on screen. Passed area is drawing as yellow, intersected as red.

 

I also did some more poking around and finally found a solution. It turns out that when I turn on Mip Maps on the line texture it renders correctly on Nexus 7. (On the endcap textures I don't need to turn on Mip Maps)

I already had POT textures. I still have to test on Unity 5.4 if it works without Mip Map turned on.

For others with the same problem: these are the import settings I'm currently using which give correct lines on Nexus 7

 

This doesn't seem like something suitable for Vectrosity, sorry. It would be better to make a procedural mesh.

That's not relevant. When Vectrosity created the custom texture used for the line with end caps, it was not POT.

--Eric

 

Hi there,

Having some problems getting up and running with Vectrosity.

I am trying to draw circles (and eventually arcs) around a given point. Right now just in the Editor for testing purposes, but later at runtime.

I am having two main problems. First, if I draw 2D lines, the circles work fine but they aren't actually centered on the origin I indicate. They are offset.

Here is my code:

Code (CSharp):

1. using UnityEngine;
2. using System.Collections.Generic;
3. using Vectrosity;
4.  
5. [ExecuteInEditMode]
6. public class DrawCircle : MonoBehaviour
7. {
8.     public float radius;
9.     public int numPoints = 100;
10.     public float lineWidth = 0.5f;
11.  
12.     private VectorLine line;
13.     private Vector2 origin;
14.  
15.     // Use this for initialization
16.     void Start ()
17.     {
18.         Debug.Log("Initialized");
19.         line = new VectorLine("Circle", new List<Vector2>(numPoints * 2 + 1), lineWidth);
20.         line.joins = Joins.Weld;
21.     }
22.  
23.     // Update is called once per frame
24.     void Update ()
25.     {
26.         origin.x = gameObject.transform.position.x;
27.         origin.y = gameObject.transform.position.y;
28.         line.Resize(numPoints * 2 + 1);
29.         line.lineWidth = lineWidth;
30.         line.MakeCircle(origin, radius);
31.         line.Draw();
32.     }
33. }
34.  

The second problem I am having is I tried to do the same with 3D lines but nothing is drawn. I modified my code as follows:

Code (CSharp):

1. using UnityEngine;
2. using System.Collections.Generic;
3. using Vectrosity;
4.  
5. [ExecuteInEditMode]
6. public class DrawCircle : MonoBehaviour
7. {
8.     public float radius;
9.     public int numPoints = 100;
10.     public float lineWidth = 0.5f;
11.  
12.     private VectorLine line;
13.     private Vector3 origin;
14.  
15.     // Use this for initialization
16.     void Start ()
17.     {
18.         Debug.Log("Initialized");
19.         line = new VectorLine("Circle", new List<Vector3>(numPoints * 2 + 1), lineWidth);
20.         line.joins = Joins.Weld;
21.     }
22.  
23.     // Update is called once per frame
24.     void Update ()
25.     {
26.         origin.x = gameObject.transform.position.x;
27.         origin.y = gameObject.transform.position.y;
28.         origin.z = gameObject.transform.position.z;
29.         line.Resize(numPoints * 2 + 1);
30.         line.lineWidth = lineWidth;
31.         line.MakeCircle(origin, radius);
32.         line.Draw3D();
33.     }
34. }
35.  

When I do this I see a GameObject for the circle created by Vectrosity, and I don't see any errors, but nothing visually shows in the scene.

 

Vectrosity isn't designed to be used in editor mode like this. Remove "ExecuteInEditMode" and use play mode instead. Also since line width is in pixels, 0.5 isn't ideal; typically you'd use whole numbers.

I tested this (after removing ExecuteInEditMode) and the origin is correct. Using the scene view isn't representative of what the camera is seeing, since when using Draw the line uses a canvas. I attached the script to a cube which is serving as the origin:

That also works correctly here in play mode.

--Eric

 

Ah snap I *really* need to do this in editor mode

The intention was to lay out our boards in the editor, so that is an issue. Maybe we can just workaround the offset issue. I'll have to see.

Thank you for the prompt response!

 

You can create lines in the editor by using the GameObject -> UI -> VectorLine menu, though this doesn't have tools such as circles at the moment. However you do have the source (VectorObject2DEditor) if you wanted to try adding that. Remember that the canvas isn't related to what the camera sees though; Unity does kind of a weird thing where it uses the scene view for the canvas even though it's not actually world space.

--Eric

 

I'm hoping someone could help. I using vectrosity to draw 2 small lines with multiple objects on screen (usually about 40) I create the the vectrosity object in script start, and update the positions and calling draw via update, but for some reason i'm getting severe fps drop as it is adding 50ms to the frame time. (developing for android) is there anything i should be doing or not doing to improve performance.

Thank you.

 

How many points are you using for the line? What sort of CPU is used in the Android device? On the desktop, you can expect updating and rendering 10,000 points in a continuous line will take a total of somewhere around 3ms/frame for 2D lines with Draw, or 13ms/frame for 3D lines with Draw3D, depending on CPU speed and what it is you're doing exactly with the code. (In the editor anyway; will be faster in a build of course.)

--Eric

 

phone is Nexus 6p. Basically 2 x 2d lines. Each line has 2 points. One is green and one is red. Used for a small health bar for each of the enemies on the screen. The points are updated every update to keep position with the engines movement and a draw call to allow it to take effect, with a maximum number of enemies of 40. That is it.

 

I'm still not entirely clear on what exactly you're drawing. Do you mean 2 VectorLines for each enemy, 40 enemies, 80 VectorLines, 160 points total? I can't see how that should take anywhere remotely near 50ms (probably <1ms; on a desktop you're looking at 0.1ms or so), but you can save some overhead by using a single VectorLine to do everything, instead of using many separate VectorLines. At the very least you should be using one VectorLine for both green and red, instead of two separate ones. But a single VectorLine would be best, so you have 1 draw call instead of 80.

--Eric

 

I just updated to the newest stable version of Unity, and have found that the lines that I'm generating are appearing beneath my UI elements instead of above them, as they were before. I don't think I've actually dealt with the ordering of the lines on the interface before.. is there a quick fix for this?

 

If it's lines being sorted with other elements in the same canvas, use VectorLine.drawDepth. If it's sorting between different canvases, use Canvas.sortingOrder, or set up sorting layers and use sortingLayerName. If the sorting order was not explicitly set, then you have undefined behavior, which may work differently based on different Unity versions, build vs. editor, phase of the moon, etc.

--Eric

 

Hi Eric,

I have tried for several hours now to get the 2d line drawing working on a screen space canvas in orthographic mode.
Settings of canvas/cam can be seen here:



Result is here (line is drawing outside the canvas, although the position (1,1) should be in the upper right corner?). Additionally I used your "dot" image as lineTex, and it's stretched way too far as it seems?.

Code (CSharp):

1.  
2. VectorLine line;
3.  
4. void Start () {
5.         line=new VectorLine("Line", new List<Vector2>(), lineTex, 5f, LineType.Continuous, Joins.Weld);
6.         line.color = Color.black;
7.         line.points2.Add(new Vector2(0,0));
8.         line.points2.Add(new Vector2(1,1));
9.         line.useViewportCoords=true;
10.         line.SetCanvas(lineCanvas, false);
11.         line.Draw();
12.     }

 

Use "SetCanvas (lineCanvas, true)" instead, so the canvas scaler will work.

--Eric

 

I changed my code to use "SetCanvas (lineCanvas, true)", the result:

With the canvas set to ScreenSpace Camera the position of the line is very weird, why's that? The X/Y/Z position of the line is at 180/320/-9000. The line drawing starts in the middle canvas, but it's going far outside the canvas.



When I set "line.useViewportCoords=false;", the line position is insde the canvas, but then (1/1) is somewhere in the canvas, and not the top right corner.





With "Screen Space Overlay" it's working in terms of positioning, but I want to render the line to a renderTexture, so this isn't working for me that way.





Another thing I couldn't find out: how to access the created edge collider when using "line.collider=true"?
Edit: Found the collider: "line.rectTransform.gameObject.GetComponent<Collider2D>()"



Thanks, John

 

Hi Eric,

I am now reading through old posts to find some helpful stuff. There I found this post of you.
How to get lines on a world space canvas, and then set it's sorting layer?
Can you please provide some code/example, as I wasn't able to get my line working with my world space canvas?

Thanks in advance, John

 

Vectrosity uses Screen.width and Screen.height for screen space coords, so unfortunately this gets a little confusing when using Screen Space Camera and a canvas scaler. Viewport coords won't really work in this case, and also my advice of SetCanvas (lineCanvas, true) doesn't apply either. Use false instead like you were originally, and get the CanvasScaler component's referenceResolution. Use this for the line coords, so if you call it refResolution, then refResolution.x is the equivalent of Screen.width, and refResolution.y is the equivalent of Screen.height. So for example Vector2(refResolution.x/2, refResolution.y/2) would be in the middle of the screen. It seems like it would be a good idea for me to add a method of doing this automatically to Vectrosity, in order to make this easier.

That's a reference to an old post; Vectrosity doesn't work that way anymore. When using Draw3D, lines are drawn in the scene and don't use a canvas. You can use VectorLine.rectTransform.GetComponent(Renderer).sortingLayerName to set sorting layers, which works fine even without a canvas.

--Eric

 

Thanks for the fast answer!

Got it working, by setting it up with your instructions.
Yeah, a shortcut would be great. That would save everyone writing 2D apps plenty of time and would make things a lot easier and more understandable.

I am now using Vectrosity to draw a lot of dots. Is there a reason why the ".lineColors" array, set by ".SetColors", isn't internally a list of colors, like the positions?
And is it correct that I have to change the colors in my dotColors list, then using "dots.SetColors (dotColors);" setting the colors again and this everytime I change a bunch of those colors? Because when I change the ".lineColors" array directly nothing is happening.
As I have to use this very frequently the profiler is pointing me out that "dots.SetColors(dotColors)" takes most of the time.

I uploaded a script to better explain what I mean. It's your random color dot drawing example, but changed to change color over time.

John

 

The m_lineColors array is the actual array of colors used for the mesh, not an abstract list of points. Mesh.colors32 = m_lineColors (with lineColors as a Color32[] array) is faster than Mesh.SetColors (m_lineColors) (with lineColors as a List<Color32>).

You need to call the SetColors function for much the same reason you need to call the Draw function. If you're using the Vectrosity source code and messing with m_lineColors directly, you need to run VectorObject.UpdateColors in order to notify the mesh updater code that the colors array has changed.

Indeed, it seems this code:

Code (csharp):

1.             for (int i = start; i < end; i++) {
2.                 m_lineColors[idx  ] = lineColors[i];
3.                 m_lineColors[idx+1] = lineColors[i];
4.                 m_lineColors[idx+2] = lineColors[i];
5.                 m_lineColors[idx+3] = lineColors[i];
6.                 idx += 4;
7.             }

is much faster when using Color32[] for lineColors instead of List<Color32>. Like, almost 30 times faster. This suggests I should make an overload for SetColors that takes Color32[] in addition to List<Color32>, though it seems like a Unity bug, since while arrays are faster than Lists, they're not supposed to be so much faster.

--Eric

 

On further testing, it seems to be an artifact of using the deep profiler. When using the profiler without deep profile on, SetColors with Color32[] is about 4 times faster than List<Color32>, not 28 times faster like I was getting with deep profile. 4x faster is still kinda high, but generally within expectations of List vs. array speeds. So, not really a Unity bug; might still be worth implementing SetColors that accepts Color32[]. By the way, if all you're doing is setting colors with SetColors, there's no need to use Draw as well.

--Eric

 

I switched to use the array instead of the list, thanks again!

The code is now fast, but Draw() could be faster when having lots of points. And yes, every PhysicsStep I move every point, so I have to use Draw(). I manually changed the type of the m_points2 to be an array instead a list (maybe this is too much performance optimzation..) and furthermore changed this line:

Code (CSharp):

1. p1 = useMatrix? thisMatrix.MultiplyPoint3x4 (m_points2[i]) : (Vector3)m_points2[i];

in the DrawPoints method, as this line is creating for each point a new Vector3. Can you please optimize this line? So to not use "(Vector3)m_points2" and instead directly use the given Vector2?
I like it when I don't have a changed source code of an asset Because then when I update that asset, I don't have to replace that code again.

Thanks, John

 

No, because that will slow it down when using .drawTransform. However I can use the optimization I used in the Line2D method, which results in the same speed increase, so that's still a good catch. I won't be changing m_points2 to an array because then you can't add/remove points easily.

--Eric

 

Yeah, that wasn't my intention that you change it to a list. Therefore I wrote: "(maybe this is too much performance optimzation..)"
I only want to point out that the implicit conversion to a Vector3 is really slow, see image attached.


Looking forward to that optimization, that's great to hear.

John

 

Remember that using deep profiling can distort the actual time used, so be careful about putting too much weight on those results. Best to use it in conjunction with benchmarks. In reality avoiding (Vector3) results in a ~15% speedup in this case, which is worth doing, but using it is nowhere near as slow as your screenshot indicates.

--Eric

 

Hi Eric,

I'm try to create a drawing game using Vectrosity, but I'm having trouble getting smooth lines at sharp corners similar to your demo pic:



This is what mine looks like after altering the DrawLinesTouch demo:



The corners are flat instead of rounded. I lowered the maxWeldDistance to avoid pointed edges and tried to find a way to create end caps whenever the maxWeldDistance was too small but couldn't figure it out. Any suggestions for making smoother in-game mouse drawings and rounded corners? I couldn't find another post in the forum and I'm not the great of programmers.

Thanks for the help!

 

Probably the easiest way is to create a new line if the angle is too high (which is what I used for the demo pic).

--Eric

 

How exactly are you measuring the angle to signal a new line? I can't seem to find it in the documentation, but maybe I missed it...

 

There wouldn't be anything in the docs about that; it's just standard math and nothing specific to Vectrosity. I don't seem to have the code for that demo anymore so I can't tell you exactly what I did, but you should be able to google it easily enough. Another thing you can do is smooth out the points so there aren't any sharp angles to deal with.

--Eric

 

Hi,
I've just purchased the plugin-in and installed the vectrosity5-Unity5.3 package but I'm experiencing some problems with the line editing in the scene view. The problem occur when:

- I move the position of the line with the Translate Transform Tools;
- After I test different screen ration in the Game view.

I those two situations, the points of the line start to behave in a strange way changing by themselves their position to high numbers as show in the image:


As soon as they start to behave like this, I'm unable to change their value back since they continue to change their value by themselves. My only solution is to delete the line and to create another one, but as I change the screen ratio to test other elements, all the lines disappear setting the value of their point to high numbers.

All the lines are children of the scene canvas that has this configuration:


Am I doing something wrong in dealing with the lines?

Thanks

 

You shouldn't move the line manually; this will cause Vectrosity to break.

--Eric

 

Ok!

And regarding the screen ratio?

 

I'm not seeing that behavior here. But are you sure you meant 1080 x 1920? It would normally be the other way around.

--Eric

 

I set this canvas since I'm developing a mobile game that it's playable just in portrait mode, that's why the reference resolution of the canvas is set to 1080x1920.

However I think I found what was the problem with the screen ratio. Apparently if you change the anchor point of the line to something different than bottom left, the line start to behave as I described before when you change the ratio.

So I resolved it by parenting all the lines to a parent object and changing the pivot of the parent object.

Thanks for your quick answer!

 

Apparently it wasn't the pivot point to cause the problem since I'm still experiencing it.
Moreover, I've notice that I can't even modify the name of the new line in the hierarchy since every time that I try to modify it, it changes back to the default "Line"

 

How would you go with integrating physics for both 2D and 3D games? You have to set all values by hand in 3D? And there is no way to view your line model in editor?

Why does it create separate object instead of modifying the one to which script is attached?

What about 2D considering that everything is drawn on Canvas?

I bought this asset hoping to replace my graphics artist (for neon-like graphics) But it seems like it makes some things much more complicated. (In extreme case scenarios like making fullblown games out of it, which is what I'm after)

Also, would really like to see Fill with Lines as Quads in the LineMaker, deleting lines by hand can get tedious for alot of models and for more complex ones.

 

Hi, just updated to Unity 5.4 and now I get this Console Warning:

OnLevelWasLoaded was found on LineManager
This message has been deprecated and will be removed in a later version of Unity.
Add a delegate to SceneManager.sceneLoaded instead to get notifications after scene loading has completed

It pops up every time I play the scene and I can't debug it myself since the Source Code seems to be inside the Vectrosity.dll

Is there any way you could fix this real quick? Thanks!

 

Oh, and I actually have an issue with Vectrosity as well.

I have a scene with a VectorCanvas and no lines yet, the VectorCanvas is set to ScreenSpace - Camera with my main camera chosen.
I now create a new line in a script with:

VectorLine line = new VectorLine("myLine", new List<Vector2>(), lineTex, 4.0f, LineType.Continuous, Joins.Fill);

I then add 2 points to the line and draw it.

Somehow this switches my VectorCanvas immediately to ScreenSpace.Overlay, which I do not want at all..I can see the line at the right position but it's overlaying EVERYTHING and I want it to be behind some stuff.

When I now manually re-switch the Canvas to ScreenSpace.Camera, I can't see the line anymore...it seems to have bugged out in some way.. why is this even happening?

Is there something obvious I'm not seeing? Thanks in advance!

 

Line colliders are 2D only. You can view the line in the editor scene view as long as it's 2D.

That wouldn't really make any sense to me. If you use various Unity functions such as CreatePrimitive, it creates a new object.

Yes, it does 2D. I'm not quite sure what you're asking.

Making quads is quite complex, unfortunately.

You can import the source if you want, but it doesn't happen if you're using Vectrosity 5.3, so I'd recommend upgrading.

You shouldn't change the VectorCanvas, but instead make a new canvas as you want it, and use VectorLine.SetCanvas with that canvas.

--Eric