Vectrosity - Fast and Easy Line Drawing

A line is a GameObject, with a MeshRenderer. There isn't really any other way to create it, unless I used immediate mode drawing (which is not ideal). As for redrawing, yes, the general idea of Vectrosity is to have a line that's a constant pixel width. But if you use Draw instead of Draw3D, then it's drawn once, and not updated again.

--Eric

 

Hi.

i used Vectrosity 3 Version


I have being making a dash line.

i want Line texture does not affect the camera,


However, the current method I used is influenced by the camera.


this picture camera orthographic size 33
11 Dot


this picture camera orthographic size 80
2.5 Dot


Create Code

MainScript :
VectorLine.SetCamera3D(camera2D);

Dim Script :
dimLine = new VectorLine(Dimname, dimLinePts, mat, width, VecLineType.Continuous);
dimLine.textureScale = 10;

mat use standard Dot Texture

How can I implement a dash lines that are not affected by the camera?

 

You can change the textureScale based on the orthographic size.

--Eric

 

Hi,I try to draw line use vectorLine.Draw3DAuto(),but the line is distorted in ground.

It results some parts of the line under the ground and can't be seen.

 

It's hard to tell from those screenshots what's going on, but maybe try moving the lines farther from the ground?

--Eric

 

Hi, I'm trying to understand exactly how Uniform-scaled textures work. I'd like textures and line sizes to be constant in (3D) world space.

It seems that the texture is made to show up constant size in screen space (if you move camera closer/father from the line) but this isn't quite what I'd want.
Ideally a line of length L would have the texture repeat N times along its length, so length 2L would have it repeat 2N times.

Any thoughts? I can set the material texture scale to N / (current line length), which mostly seems to work.

However, even the width is screen-size constant -- is there any way around that?

 

It's not really possible, sorry, since Vectrosity was designed for lines to be constant size/based on pixel width.

--Eric

 

Seems like a paying customer only gets support here, not via the form on the website... so here I try again (good thing I saved the text):

"First, let me thank you for creating Vectrosity. The asset is pretty cool and helpful.
Unfortunately I have a problem with it and I think it's a small bug with the asset. I create a 3D line like this:

pointList = new List<Vector3>();
var line = new VectorLine("MY LINE", pointList, 2f);
line.Draw3D();
VectorManager.ObjectSetup(gameObject, line, Visibility.Dynamic, Brightness.None, false);​

Later on I manipulate my pointList directly in order to add and remove line segments, and this works - but only as long as the pointList.Count is always greater than 0. If I set it to 0, the lines vanish (which is good), but if I add new points afterwards, I get wrong results.

An example in my case: I have 8 lines which form a cube (pointList.Count is 16). Later I remove the 8 lines, so I don't have any points in the pointList anymore.Even later I add 16 line segments, with the first 8 line segments being the cube from before and the 8 consecutive segments forming a new cube. The first cube actually appears, but the second cube is not visible (although the vertices and triangles are somehow generated in the line mesh, I looked in the inspector).

Maybe I missed some UpdateMesh() method, but I couldn't find any. So please check if this is indeed a bug, or if I'm just doing something wrong.

Oh, and another thing: is it possible to easily get a line's transform or gameObject? Right now I have to call

var lineGameObject = GameObject.Find("MY LINE");​

right after creation of the line in order to get the gameObject, which is awkward and error prone. Here I could not find a better solution in the API, too. (I need it to put the line object as child of another transform, for example.)"

By the way, why is that that I can't use SetupObject() several times on one gameObject? For example I have some VectorLines which all should follow the same transform, but if I do SetupObject(transform, line, ...), only one of them follows it.

 

Alright, thanks, maybe I can dive into the source to change this.

 

Hello, any way to sort depths or draw behind? If not, maybe you have a solution to have a dynamic outline on the whole canvas (not on each line).

I see that the lower the shape is in the canvas's hierarchy, the most "in front" the shape is, any way to control that in code?

Edit2: Transform.SetAsFirstSibling and Transform.SetAsLastSibilng do just that, so I guess the question has been answered, thanks for the awesome plugin!

 

I do answer questions via the form, but I haven't received anything from you. Possibly you missed filling out some info and didn't actually submit it. In any case, you're right, that's a bug, sorry about that. I've released an update now:

Vectrosity 5.2.2

Changes:
• VectorLine.textureOffset and VectorLine.textureScale can be used with 3D lines without having to call SetCamera3D first (in which case Camera.main is used by default).
• For 3D lines, VectorLine.material no longer creates a new material, so the link to the material supplied for VectorLine.material is maintained.
• Using VectorLine.Destroy cleans up meshes (and materials, for 3D lines, as long as a custom material wasn't used).

Fixes:
• Removing all points from a line, calling VectorLine.Draw or Draw3D, then setting the color of a line no longer causes an error.
• Also, if removing all points from a line, adding more points than there were originally works properly.

myLine.rectTransform.gameObject

For the same reason that you can't have multiple renderers on an object. Basically ObjectSetup makes a VectorLine into a renderer for that object. It sounds like you want to be using VectorLine.drawTransform instead of ObjectSetup.

VectorLine.drawDepth

--Eric

 

I'm trying to fade the alpha on the edges of a 3D grid but having a little trouble. I set SmoothColors to true, but for the interior grid lines do I need to have 3 line segments for each x and z line of the grid (dark color near edge, bright middle, dark color far edge) or can I just set a line to grid length dark and then set another smaller line in the middle to bright color and it'll fade properly?

 

Yes, that should work.

--Eric

 

I've just imported Vectrosity 5 into my project after upgrading to Unity 5.3.1.

When I draw a single line (2 points) with an arrow at one end, it adds 10,000 tris to the scene and the number of tris increases at about 100 per frame until the arrow is removed. Every subsequent line add thousands more tris.

Any ideas what's causing this?

 

Sounds like you're creating a new VectorLine every frame.

--Eric

 

I fixed it. It turns out that setting the end cap has the same effect as creating a new vector line.

 

Hey Eric, I love the product.

Do you have any tips for keeping Vectrosity accurate when shifting the origin of the scene?

I could manage a separate list of points and offset those values and pass them into Vectrosity when required, is there a easier way?

 

Thanks for answers, and the update. Eager to try it out.

It seems so. But when I submitted the form, there was no (obvious) error.

 

You could use .drawTransform with a transform that's moved when you shift the origin, but from a CPU point of view it would be faster to go through the VectorLines and adjust the points3 by the amount of the shift.

--Eric

 

Hi Eric,Thx for your wonderful works!

I use Vectrosity to draw lines to connect the circles.I draw a single line for every two circles. (All the circles are buttons create by ugui.) Here is my code.(Radius is to avoid drawing lines into the circles)

Code (CSharp):

1. for (int i = 0; i < length; i++)
2.         {
3.             VectorLine line = lines[i];
4.  
5.             var current = circles[i];
6.             var next = circles[i + 1];
7.             Vector2 currentPosition = current.transform.position;
8.             Vector2 nextPosition = next.transform.position;
9.  
10.             var left = (nextPosition - currentPosition).normalized * radius + currentPosition;
11.             var right =(currentPosition - nextPosition).normalized * radius + nextPosition;
12.  
13.             line.points2 = new Vector2[2] { left, right };
14.             line.Draw();
15.         }
16.  

But When I use different screen resolutions or simple resize the game window, the lines not work well.
sorry for my poor english, the screenshots attached are easy to see.

 

Hi, you'd probably want to re-compute the lines after the resolution changes.

--Eric

 

I had re-comput the lines when the screen size changed,but the problem is still here.Exactly,the "Different Resolutions" here means different devices(like iphone and ipad),although the screenshots are in editor.So, the resolution will not change durning the gameplay when build to the real devices, which means that I dont need to re-compute the lines.

 

Hey Eric,

I just would like to know how to use Vectrocity with scroll view ui elements. I need to be able to clip or mask the canvas that vectorLines uses behind a viewport and use the vecctor2[] and not vector3[]. Everything i've tried just fills the entire screen. I'm just using the Grid script for testing right now.

 

Oh, in that case base the calculations on Screen.dpi.

See the Mask demo for an example of UI mask usage.

--Eric

 

Heya. Is it possible to bring a normal GameObject mesh to be presented over the line? At the moment all my GameObject's are being drawn under the line.

 

Use Draw3D so the line is drawn in the scene (and use a shader for the line material that has z sorting).

--Eric

 

The easiest way I've found for sorting is actually just to put a regular VectorLine on my own canvas (using line.SetCanvas) that uses Screen Space - Camera (instead of Overlay). This lets you use both sorting layers and order in layer to set up everything how you like.

The one gotcha is that coordinates are all in the wrong place, but I've hacked around this for now with the following code

Code (CSharp):

1.  
2.                 // TODO: Remove hack after Vectrosity adds support for camera screen space
3.                 var points = new List<Vector2>(tiles.Count);
4.                 var scaler = cmps.Canvas.GetComponent<UnityEngine.UI.CanvasScaler>();
5.                 var offset = (Vector3)scaler.referenceResolution / 2;
6.                 for (int i = 0; i < tiles.Count; i++)
7.                 {
8.                     points.Add( tiles[i].transform.localPosition + offset);
9.                 }
10.                 line = new VectorLine("highlight", points, 3f, LineType.Continuous);
11.                 line.SetCanvas(cmps.Canvas, false);
12.                 line.Draw();
13.  
14.  

 

Hello,

using unity 5.3.1 and vectrosity 5.
i am making a 2D game which involves drawing Spline line and small white circle is following the line continuously and the camera is following the circle. As the camera follows the circle the points gone outside the screen are destroyed and new points are added to the Spline line. How should i proceed with this using vectrosity. From spline line drawing to circle following on the line. Any Suggestions.
Would the line be drawn everytime the points are destroyed and new points added to the line.

 

Yes, update the points in the list you're using for the line, and re-draw it. You could use one of the GetPoint functions for the circle following the line.

--Eric

 

i did something like this for the movement from one of the samples.
IEnumerator MoveAlong()
{
do {
for (float dist = 0.0f; dist < 1.0f; dist += Time.deltaTime*speed)
{
Vector3 splinePoint = pathRef.pathLine.GetPoint3D01 (dist);
transformRef.position = splinePoint;
yield return null;
}
} while (true);
}

but this moves from the start point..i wanted to start the movement from the third point. any suggestions.

 

Can I switch the camera for different 3D lines with SetCamera3D?

I have 3D lines in both my interface and my world that I want to render via different cameras.

 

You could calculate the distance percentage for the third point and start with that instead of 0.0. It might be easier to use the built-in point distances since those are already calculated; you can access them by adding this to the VectorLine.cs file if you're using the source code:

Code (csharp):

1.     public float[] distances {
2.         get {return m_distances;}
3.     }

Yes, you'd need to use SetCamera3D with one camera, draw the lines, then use SetCamera3D with another camera and draw the lines again.

--Eric

 

Eric-

I'm running into an issue that had been explored briefly in this forum (Question #92) and didn't really see a resolution. Basically, I'm working on a character that draws a line when "J" is pressed down. The line renders with no problem whatsoever. I want the character do something whenever it interacts with the line's collider. Unfortunately, the collider's footprint does not match the line itself. Though it retains the shape of the line, it is scaled down greatly and moved down and to the left (-X,-Y). I've re-read the documentation and it seems like I've done everything correctly. Here's the Line class that is attached to my prefab instantiation.

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4. using Vectrosity;
5.  
6. public class Line : MonoBehaviour {
7.  
8.     [SerializeField] private List<Vector2> linePoints;
9.     [SerializeField] private List<Vector2> directionVectors;
10.     [SerializeField] protected VectorLine myLine;
11.     public bool isDrawing = true;
12.     private GameObject parent;
13.     private bool hasParent = false;
14.     [SerializeField] private float width = 0.5f;
15.     [SerializeField] private float decayRate = 10.0f;
16.  
17.     public Line() {
18.  
19.          linePoints = new List<Vector2>();
20.          directionVectors = new List<Vector2>();
21.    
22.  
23.      }
24.  
25.     public void addPostion(Vector3 position){
26.  
27.         linePoints.Add(position);
28.         CalculateDirection();
29.         //myLine.collider = false;
30.  
31.  
32.     }
33.  
34.     public GameObject getParent()
35.     {
36.         return parent;
37.     }
38.  
39.     public void setParent(GameObject obj)
40.     {
41.         if (!hasParent)
42.             {
43.                 parent = obj;
44.                 myLine.drawTransform = parent.transform;
45.             }
46.     }
47.  
48.     // Use this for initialization
49.     void Start () {
50.  
51.       myLine = new VectorLine("Line", linePoints, width, LineType.Continuous);
52.       myLine.joins = Joins.Fill;
53.       VectorLine.SetCanvasCamera (Camera.main);
54.  
55.       //Only one point is being added at a time.
56.       myLine.endPointsUpdate = 1;
57.  
58.       //These lines are needed for players to be able to interact with the line.
59.       myLine.layer = 0;
60.       //myLine.useViewportCoords = true;
61.    
62.     }
63.    
64.     // Update is called once per frame
65.     void Update()
66.     {
67.         if (myLine.lineWidth <= 0.0f)
68.             {
69.                 linePoints.Clear();
70.                 Destroy(this.gameObject);
71.  
72.             }
73.         if (!isDrawing)
74.             {
75.                 width -= 00.1f / decayRate;
76.                 myLine.SetWidth(width);
77.             }
78.         Simplify();
79.  
80.         if (linePoints.Count >= 2)
81.             {
82.                 myLine.trigger = true;
83.                    myLine.collider = true;
84.                 myLine.Draw();
85.             }
86.  
87.  
88.  
89.     }
90.  
91.     //Populates the list of direction vectors based on linePoints
92.     void CalculateDirection()
93.     {
94.         int unknownVectors = linePoints.Count - directionVectors.Count;
95.         if (linePoints.Count >= 2 && unknownVectors >= 2)
96.             {
97.                 int end = linePoints.Count -1;
98.                 for (int i = unknownVectors-1; i == 1; i--)
99.                     {
100.                         directionVectors.Add(linePoints[end-i] - linePoints[end-i+1]);
101.  
102.                     }
103.             }
104.        
105.  
106.     }
107.  
108.     //Simplifies points and direction vectors by elminating contiguous values of equivalent direction vectors
109.     void Simplify()
110.     {
111.  
112.         if (directionVectors.Count >= 2)
113.             {
114.                
115.                 for (int i = 0; i < directionVectors.Count - 1; i++)
116.                     {
117.                         for (int j = i + 1; j < directionVectors.Count; j++)
118.                             {
119.                                 //Ensures that the point range is valid
120.                                 if (((directionVectors [i] != directionVectors [j]) || (j == directionVectors.Count - 1)))
121.                                     {
122.                                         //Ensures that the distance between points is greater than 1
123.                                         if (j - i > 1)
124.                                             {
125.                                                 directionVectors.RemoveRange(i + 1, j - i - 1);
126.                                                 linePoints.RemoveRange(i + 1, j - i - 1);
127.                                                 break;
128.                                             } else
129.                                             {
130.                                                 break;
131.                                             }
132.                                     }
133.                                
134.                             }
135.                     }
136.             }
137.  
138.  
139.     }
140.    
141.  
142. }
143.  

 

It's kind of hard to tell with that script; here's a basic example of a working collider:

Code (csharp):

1.     void Start () {
2.         var points = new List<Vector3>{new Vector3(-3, -3, 0), new Vector3(3, 3, 0)};
3.         var line = new VectorLine("Test", points, 4);
4.         line.collider = true;
5.         line.Draw();
6.     }

--Eric

 

Hello there,

I am trying to figure out how to access the points from a line. From the documentation I can grasp how I would access the points in the image below in green circles, but how can I get the points in red circles?



I figure Vectrosity must know the positions of the red points, in order to draw the line? If there isn't a direct method to get this information, could you recommend an indirect approach?

Many thanks for any help,

-- Mark

 

You could access the vertices of the mesh. line.rectTransform.GetComponent(MeshFilter).mesh

--Eric

 

I've attached that script to an empty game object and the collider is still being drawn down and to the left of the actual line. It's also scaled down greatly as well.

 

Are you looking in the scene view? You have to look in the game view. The GUI drawn in the scene view isn't related to world space at all (1 pixel = 1 unit).

--Eric

 

hello,

i am working on a 2d game, in the which the player follows a Spline line.
As the player follows, the points gone outside the screen has to be deleted and new points have to be added at the beginning of the line.

// i was trying to remove the point gone outside screen and add new point to the beginning of the list and then draw the line again..but this does not work.

Code (CSharp):

1. void Update()
2. {
3.     //check for points gone outside screen then delete point and add another point
4.     if(linePoints[0].y < transformRef.position.y-5f) //gone below camera Y
5.            CreateNewPath();
6. }

Code (CSharp):

1. public void CreateNewPath() //Dont see this working..Any Suggestions
2. {
3. linePoints.RemoveAt(0); //always the 0 element of the list is the first to go outside the screen
4.  
5. posY+=distance;
6. linePoints.Add(newVector3(Random.Range(-1f,1f),posY,0f));  // z is 0 .. only using X and Y
7.  
8. pathLine.MakeSpline(linePoints.ToArray()); //redraw new path
9. pathLine.Draw3DAuto();
10. }

//this is the character moving code

Code (CSharp):

1. IEnumeratorMoveAlong()
2. {
3. do{
4. for(float dist=0f; dist < 1.0f; dist+=Time.deltaTime*speed)
5. {
6.      Vector3 splinePoint = pathRef.pathLine.GetPoint3D01(dist);
7.      transformRef.position = splinePoint;   //move player along the path
8.    yield return null;
9. }
10. }while(true);
11. }

How do i remove and add points from the current line..so it appears as a infinite game wile moving along the line.
Also about the movement of the player which is moving along the line, when old points are removed and new points are added to the line..how would the player movement be, will it still work with the above movement code.
would the whole line is destroyed and recreated when new points are added.

 

I'm not sure what you mean by "does not work". The code would work fine if used correctly, although you should remove Draw3DAuto from the CreateNewPath function. The point of Draw3DAuto is that you call it only once, and the line is automatically redrawn every frame.

--Eric

 

Hi Eric,

I'm using 3D lines (I believe in a fairly straight forward way), but I am encountering strange behavior in my iOS builds. horizontal lines are twice as wide as vertical lines. In the Unity Editor, all the lines are the same width (as they should be).

I am using Vectrosity 5 (dll import), Unity 5.3.1f. I have created a brand new project, with 1 scene, and a single script attached to the camera. The script is:

Code (CSharp):

1. using UnityEngine;
2. using System.Collections.Generic;
3. using Vectrosity;
4.  
5. public class lineTests : MonoBehaviour {
6.  
7.     Camera mainCam;
8.  
9.     // Use this for initialization
10.     void Start () {
11.         mainCam = gameObject.GetComponent<Camera>();
12.         TestLines(new Vector2(0, 0), new Vector2(1024, 0));
13.         TestLines(new Vector2(512, 0), new Vector2(512, 1024));
14.     }
15.  
16.     private void TestLines(Vector2 startPos, Vector2 endPos)
17.     {
18.         float depth = 0.5f;
19.         List<Vector3> LinePoints = new List<Vector3>();
20.  
21.         Vector3 start = new Vector3(startPos.x, startPos.y, depth);
22.         Vector3 end = new Vector3(endPos.x, endPos.y, depth);
23.  
24.         LinePoints.Add(start);
25.         LinePoints.Add(end);
26.  
27.         VectorLine.SetCamera3D(mainCam);
28.  
29.         VectorLine line = new VectorLine("TestLine", LinePoints, 128, LineType.Continuous, Joins.Weld);
30.  
31.         line.Draw3D();
32.     }
33. }
34.  

In the editor this produces (note the two white lines creating the T shape are the same width)


But on my iPad it produces (lines not the same width)



I have no idea why! Because it only manifests on the iPad, I'm having a very hard time debugging it. I can't figure out what next to investigate. Can you help?

 

Hmm...what does it say if you print out Screen.width and Screen.height?

--Eric

 

I created similar builds with on-screen logging. I also added a third, diagonal line in case it aided diagnosis.

In editor: (Height 648; Width 864)


On iPad: (Height 1536; Width 2048)

 

Well, I was kind of hoping the screen.width and height would have been reversed, since that would be my guess. It still looks like that's what's happening, though. What happens if you display in portrait mode?

--Eric

 

Thanks Eric, I've found something that maybe relevant trying out portrait. I launched the same app on my iPad in landscape (bad results) and turned it to Portrait (bad results). I launched it in Portrait (good results) and turned it to landscape (still good results). Images:

Launched in landscape:
Then turn the iPad 90 degrees: (still wrong)



Kill the app then launch in Portrait: (looks fine)



Rotate the iPad 90 degrees: (still looks fine)



The final image is what I wish I had even when launched in Landscape. Does this give you any clues as to what is going wrong? Is part of Unity, my project settings or Vectrosity assuming something incorrect about the default orientation?

 

That's bizarre.... That doesn't happen on my iPod touch, so I'm kind of stumped. Vectrosity doesn't have any code at all that deals with orientation, only Screen.width/height. As long as that's reported correctly (which it seems to be, judging by the screenshots), I can't see how it could go wrong. Unless it's something that's wrong initially but then corrected later; are you doing this stuff in the first frame? Maybe wait a bit after launching before creating lines?

--Eric

 

Just done a quick test - by not calling (any) Vectrosity functions until

Code (CSharp):

1. Time.timeSinceLevelLoad > 5f

the behavior appears to be correct. Maybe this is to with iOS version? Processor speed? and the unity build? - under some circumstance something gets ahead/behind, and the numbers are pulled before they are correct(ed).

Given in my final game I won't be launching directly into a scene with 3D lines, this hopefully won't be a real problem.

Thanks for your help - I'll let you know if I run into more similar problems that a brief delay doesn't sort out!

 

It's a mystery. Glad that sorted it, in any case.

--Eric

 

Hello,

Using Vectrosity 4. Have a scene with ~100 cubes each with vectrosity lines at the edges of the cubes (so 24 or so discrete line points in one Vectrosity line per cube). I notice the profiler showing 70% of program time spent in VectorLine.Draw3D (mostly in CanvasRenderer.SetVertices). Does this sound about right or am I doing something wrong? Also, if it is expected, does Vectrosity 5 with the meshes make this any faster? (I'm stuck on 4 until some webgl issues are fixed).

 

Yes, Vectrosity 5 is faster.

--Eric