Vectrosity - Fast and Easy Line Drawing

Hi. I just purchased this product yesterday. I am playing around with the Grid demo. Some questions:

1.) I want to implement something similar but on a plane/quad. It seems like it is drawing this on the Canvas. Is it possible to draw this on a plane?

2.) I tried to create a VectorLine based off Vector3 points. I don't see anything. I thought I am missing something so I ran the _Simple2DLine demo. I deleted the Line and the Basic Line scripts so the only one that would run would be the UniformedTexture Line demo. However, I still don't see anything. I am using Unity 4.6.2. What am I missing?

3.) Do you have a sample with the Glow feature? I see some stuff in the Image Effects folder. However, it only has C# code, which is for the Editor (?). I would like to see a demo with the glow feature. Or if I could get #2 working, I could use a glow material.

One last thing - Do you have C# code for the demos. Or is it all JS?

Thanks,
Syed

 

1. You could if you have Pro and render the lines to a texture, and then use the rendertexture on the plane.

2. A VectorLine using Vector3 points uses world coordinates; a VectorLine using Vector2 points uses screen coordinates. My guess is that the camera isn't positioned where it could see the line given the coordinates you used.

3. There isn't a glow feature; one of the demos uses the standard assets glow image effect for the spheres in the Highlight demo. Unless you mean the effect in the ScribbleCube demo, which is just a texture (see the VectorLineGlow material).

4. I think it's all Unityscript, but the docs use both.

--Eric

 

Hi,I use

Code (CSharp):

1.                 VectorLine.vectorLayer = 15;
2.                 VectorLine.SetCamera();

to send my drawn lines to different layers but they always on my top layer I wan to have game object on top of my lines what should I do?
(vectrosity V3,Unity V 4.3.1)

 

The vector camera is always on top, and game object layers aren't used for drawing order in any case. You can use Vector3 coords and Draw3D to have the line drawn in the scene rather than using the vector camera, so you can put other objects on top.

--Eric

 

Hi Eric,

I first wanna thank you for this package it's saved me a great deal of heartache.
I'm trying to make a very simple drawing program in which I can draw certain shapes or line on screen and then delete them one at a time at will.
I know its possible to create many shapes on screen using a single VectorLine object. However, is it possible to keep track of these shapes? For example in the Ellipse demo, many ellipses are drawn from one discrete VectorLine. What if i wanted to delete one ellipse at a time?
Should I be creating a single VectorLine object per shape to easily keep track of them?

Thanks for your input

 

Yes, that would make things easier.

--Eric

 

Can I make Vectorcam disable for some moments in which one of my game objects is active?how?
under this circumstance lines would be off until Vectorcam become enable.

 

Hi there, thanks for the answer. I have another question concerning drawing.

I have a camera in which the viewport does not take the entirety of the screen. The canvas is set to "Screen Space - Camera". I've noticed that points defined in the VectorLine are actually anchoredPositions relative to the canvas, of which 0,0 is the bottom left corner of the canvas. This works well in the DrawLines demo as the canvas is entire size of the screen therefore you can set directly the Input.mousePosition.

However, in my case, I need a method to convert from Input.mousePosition to the anchoredPosition on the canvas. So far what I'm doing is:

Code (CSharp):

1.  var mousePos = UnityEngine.Input.mousePosition;
2. var viewportPosition = camera.ScreenToViewportPoint(mousePos);    //convert mouse position from screen to viewport
3. var anchoredPosition = GetDenormalizedCoordinates(viewportPosition);            //function i created convert viewport position to canvas anchored position

Only then can I feed the anchoredPosition as positions to the VectorLine. I "denormalize" the viewport position by simply multiplying by the pixelRect of the canvas. I'm simply wondering if there is a solution already implemented that I haven't found or is there a much simpler solution?

 

Yes, you can get a reference to the Vectorcam and use SetActive on it.

No, that seems reasonable.

--Eric

 

Hello

I have an educational app for young children where I want users to draw on the screen.

Users will be able to choose a color (out of seven) and draw on the screen, hopefully using any patterns (dots, straight lines, dashes, stars, etc) and hopefully delete what they just drew.

Does Vectrosity allow drawing and erasing as described above?


Thanks

 

Yes, as long as "delete what they just drew" means the entire line. Erasing like the eraser tool in Photoshop isn't really feasible since Vectrosity doesn't use bitmaps.

--Eric

 

That's great to know.
I was thinking deleting like photoshop but if it is possible to delete a stroke/line they just drew then that is an acceptable use.

Will be trying this weekend.
Thanks
German

 

Yes, you can delete line segments, just not pixels.

--Eric

 

Just tried Vectrosity. Pretty cool

In scene DrawLinesTouch how do you draw a second, third, etc line?

Thanks

 

The easiest way would be to create a new VectorLine for each one.

--Eric

 

Hi,
Just have to say nice work with this package.

I wounder if their is away to have multiple vectorCanvas3D since I use Vectrosity to draw out a hexagon grid for my game and it's to many points to fit in one canvas. It will only load in the beginning of the game so the performance doesn't matter to much.

 

Currently, you would need to create your own canvases, and use VectorLine.rectTransform.SetParent to set VectorLines to those canvases as needed.

--Eric

 

Everything is still created with a vectorCanvas3D as parent even after I have changed.

Code (CSharp):

1. public Tile(Vector3 center, float gridSize, Transform canvas){
2.         Vector3[] lines = new Vector3[7];
3.         for (int i = 0; i < 7; i++) {
4.             float angle = 2 * Mathf.PI / 6 * (i + 0.5f);
5.             lines[i] = new Vector3(center.x + gridSize/2 * Mathf.Cos(angle),0,center.z + gridSize/2 * Mathf.Sin(angle));
6.         }
7.  
8.         gridLine = new VectorLine ("Grid Line", lines, null, 1,LineType.Continuous,Joins.None);
9.         gridLine.color = Color.gray;
10.         gridLine.rectTransform.SetParent (canvas);
11.         gridLine.Draw3D ();
12.  
13.     }

 

Swap the order of SetParent and Draw3D.

--Eric

 

Hey Eric,

I'm getting a strange error:

MissingReferenceException: The object of type 'CanvasRenderer' has been destroyed but you are still trying to access it.
Your script should either check if it is null or you should not destroy the object.
UnityEngine.CanvasRenderer.SetVertices (UnityEngine.UIVertex[] vertices, Int32 size) (at C:/buildslave/unity/build/artifacts/generated/common/modules/CanvasRendererBindings.gen.cs:102)
Vectrosity.VectorLine.Draw ()
VectorManager.DrawArrayLines2 ()
LineManager.LateUpdate ()

Any thoughts on how to fix this?

 

Based on the error I guess you removed the Vectrosity canvas? That's required.

--Eric

 

What's the best way to get Vectrosity lines to line up exactly with a Unity UI panel that has its position set using Anchors and Stretching and whatnot? Computing the screen coordinates seems complicated; would it be better to use 3D worldspace lines and set their parent as the UI panel?

For example, let's say I have a panel with two buttons, how can I draw a line between the two buttons?

 

Yes, I'd go with the world space coords.

--Eric

 

Version 4.1 is out!

Additions:
• VectorLine.canvasID, for specifying different vector canvases for different lines. Among other things, this can be used to circumvent the 65K vertex limit for a canvas, where e.g. if two lines together would be over the limit, the second line could be set to line.canvasID = 1, therefore making two canvases.
• VectorLine.canvases and VectorLine.canvases3D, which returns a List<Canvas> of the vector canvases, which can be used to change parameters for multiple vector canvases in the event that there are more than one.
• VectorLine.MakeArc, for specifying part of a circle/ellipse.

Changes:
• The Vector canvases are no longer retained between levels, so all existing VectorLines will be destroyed when loading a new level. You can use DontDestroyOnLoad on the canvas objects if you want them to be persistent between levels.
• VectorLine.SetCanvasCamera can optionally include a canvas ID, in case you're using more than one vector canvas.
• Since multiple vector canvases are possible now, VectorLine.canvas refers to the first one, i.e. VectorLine.canvases[0].
• When declaring a VectorLine with an existing points list, the line.points2 or points3 is now a reference to that list, instead of a copy. If the VectorLine is declared with an array, that's still copied to a List.

Fixes:
• Draw3D won't cause "screen position out of view frustum" errors for specific cases where the x and y screen coords were 0 but the z coords differed.
• Fixed issue with Draw3D where certain camera positions could cause glitches, particularly with Joins.Weld.
• Fixed null ref error that could occur with ObjectSetup when using Brightness.Fog in certain cases.
• Using Joins.Weld with a discrete line can no longer cause any out of range errors.
• Fixed out of range error that could occur with SetWidth.
• Fixed case where SetColor could generate an error if used before Draw.

Also I added a little power bar demo scene, which uses MakeArc.



--Eric

 

By the way, if you got your update email, clicked the download link, and were disappointed to get 4.0.5, click the link again and you'll get a better result this time. Sorry!

--Eric

 

Now that Vectrocity is canvas based rather than camera based, I have run into a problem when the screen size changes. For example a point at the center of the screen could be positioned using (screenspace coords):

Vector2(Screen.width/2,Screen.height/2)

If the user then changed the screen size, the point would no longer be in the center of the screen.

The only way around this that I know of is to recalculate the center of the screen in every frame, and then draw everything again in every frame.

Is there a better way to do this so that vectrocity objects automatically adjust when the screen size changes? When everything was "camera based" all vectrocity objects moved with the camera (and the camera automatically adjusted itself if the screen size changed).

 

You can use VectorLine.useViewportCoords, where 0.5 would be the center. Although actually it used to be necessary to poll the screen resolution every frame and call SetCamera if the resolution changed in order to get the lines to re-draw properly, but I removed that sort of code from the demos since it's no longer needed in Vectrosity 4. (But yes a line drawn with Screen.width/2 would no longer be in the center if the screen width changes.)

--Eric

 

Hi!
I'm having a problem with vectrocity. When I'm playing my game in the unity editor the linewidth is much wider than on the android build of the same project. (i'm talking 2/3 times wider)
I'm defining the width as I create the lines and don't do anything else with it. I'm also not using any scaling related to resolution yet.
Any ideas what's causing this or how to get the lines to be the same on android and in the editor? They're just so sad and scrawny on android now :<

Thanks!

I'm using a Samsung Galaxy s5 to test btw

 

Line width is in pixels, so you'd probably want to take screen DPI into account.

--Eric

 

Vectrosity 4.1.1 is out:

Fixes:
• Creating new lines after loading a new scene works properly.

Sorry about that...I even have a test specifically for that; not sure how I managed to miss it.

--Eric

 

its been a long time since i use unity, and i just use vectrosity recently
so i got multiple Vector Lines object in my project, and i want to erase only if i click over them
and what i did is i use raycast, but since raycast3D (i need the Z direction) only works for 3D collider it won't detect vector lines
and then i try using getrayintersection, and it works beautifully....on other sprite with other type collider, but still it wont detect vector lines with 2D edge collider
any suggestion how to do it properly?, to be honest i'm stuck and don't have any idea anymore to how to do it
thank you in advance

 

I've been getting increasingly frustrated with a problem I've been stuck on for 2 days and figured I might as well ask:

I'm working on a 2D scene where I have a few sprites on different sorting layers and orders. Now I need a line that goes in between 2 of those sprites and I can't for the life of me get it to work. I create a VectorLine and adjust the layer and order it is in using:

Code (CSharp):

1. VectorLine.canvas.sortingLayerName = "Line";
2. VectorLine.canvas.sortingOrder = 5;

I afterwards check if it actually applied by logging the layer and order, it certainly applied. But the line is still behind all my sprites. If I try putting another sprite on that same sorting layer, that sprite is in front of the previous layer. But the line, for some reason, always stays behind everything.

I've tried everything I could think off but the line stays behind all my sprites, unless I set it to ScreenSpaceOverlay when the line appears in front of all the sprites. But getting it in between, never seems to work. Any help would be greatly appreciated.

EDIT: Also tried making the sprites children of another Canvas and applying a layer to that (as the documentation states that you can change the drawing order compared to other canvasses), but I get the same result with that.

 

Use VectorLine.Selected.

I expect you need to use different sorting layers; sortingOrder would only sort between sprites that are on the same layer, and sorting order within a canvas is done via hierarchy order. Here's a line with the vector canvas using sorting layer 1, with the light gray sprite using sorting layer 2 and the dark gray sprite using sorting layer 0:



The canvas needs to be world space (that is, Draw3D) in order to interact with other objects in the scene, since screen space canvases are drawn as an overlay.

--Eric

 

Hi, i buy Vectrosity from Unity store, but last version was 4.0.5, i need in my last app draw arcs and i read here you are made it, how do I can upgrade? or how much will take to appear in the store?
Thanks, Eric.

 

Updates on the asset store have to go through a review process so it takes some days normally.

--Eric

 

Is there a way to do Draw3D() on an array of VectorPoints instead of VectorLines? When I try it gives me an error saying Draw3D only works on VectorLines.

 

If I do

Code (csharp):

1. var points = new VectorPoints(...);
2. points.Draw3D();

it works fine. The points must use Vector3 rather than Vector2.

--Eric

 

Dohhhh I'm stupid. You're right.

 

that simple....and i feel very stupid now
another problem, what you give works, but for some reason it only can select the last drawn line, if i draw multiple line, the previous line will not get selected

 

The SelectLine demo shows the selection of individual lines when there's more than one.

--Eric

 

Thanks for the reply! I was doing that (and trying a lot more) but it never seemed to work. I found out what the problem was though, it was my shader all along! I'm new to shaders so I have no idea how or why but I'll figure that out later, just glad I finally know what the problem is. In any case, thanks again.

 

Hi Eric, thanks for your continued work on this great package.
I noticed that when using certain shaders (via the chosen line material), that Joins.Fill appeared to have no effect. Are there specific requirements of the shader in order for joins to work correctly? (or perhaps something else that was causing the material to ignore join settings?). Thanks.

Here's the simple shader that seemed not to work

Code (CSharp):

1. Shader "Unlit/Vertex colored unlit" {
2. Properties {
3.     _MainTex ("Texture", 2D) = "white" {}
4. }
5.  
6. Category {
7.     Tags { "Queue"="Geometry" }
8.     Lighting Off
9.     BindChannels {
10.         Bind "Color", color
11.         Bind "Vertex", vertex
12.     }
13.  
14.     SubShader {
15.         Pass {
16.         }
17.     }
18. }
19. }

 

Seems fine here.



--Eric

 

I love this project. It's been so useful.

But one very important thing is missing from the documentation: How to animate a point in a line. It talks about assigning a transform parent and animating the whole line, but it mentions NOWHERE how to animate one point. I just can't figure it out!

Let's say I want to animate the second point of a 2-point line.

Code (CSharp):

1.  
2. VectorLine walkVector = VectorLine.SetLine3D(Color.red, points);
3. points[0] = new Vector3(0,0,0);
4. points[1] =  groundHit.normal *2f;
5.  
6. //This doesn't animate it. points3 is read only:
7. walkVector.points3 = points;
8.  
9. //And this just creates a new line object each frame(Even though I'm not using "new"?  Huh??):
10. walkVector = VectorLine.SetLine3D(Color.red, points);
11.  

I'm sorry. I'm just so frustrated because this should be so simple. I've been Googling for hours. Does anybody know how to animate a single point in a Vectrocity line?

 

You should use VectorLine.points3 directly.

Code (csharp):

1. walkVector.points3[1] = ....

I'd recommend reading the "VectorLine objects" section in the docs starting on page 5; the SetLine functions are just quick shortcut functions that have somewhat limited use. Mostly if you're going to be manipulating lines to any real degree they should be created as VectorLine objects so you have more control.

--Eric

 

Ugh! It was so simple all along. Thank you for helping me. That really should be added to the documentation with the rest of the "how to make the lines move" section.

Thank you again!

 

The docs did have an example of that, but it seems I changed it to adding a point instead of altering a point. I could change it back, or have it as an addition.

--Eric

 

already tried it, and seems not avail
the multiple line works fine and show on hierarchy as separate game object, and i try the selected syntax with loop on the gameobject array but not working at all
and i see your selected demo scene, it just 1 line selected, i completely lost right now ;__;

 

No, the demo has multiple lines; you can set the number in the inspector (default is 2 I think).

--Eric

 

i cant find it
i'm using vectrosity 3 btw, and i don't know how to upgrade the plugin since this actually not my project, i'm continuing someone else project in my office, he left with the app unfinished, and vectrosity already in it, the only sleect demo in it is 1 line with color changes