How to draw a GUI 2D "line"?

What I want to be able to do is this: the user clicks on the screen once and that becomes the start point of a 2D line. Then as he moves his mouse around, the line stretches and rotates to follow the mouse cursor. Then when he clicks the mouse the second time, that becomes the end point of the line.

Unity doesn't have a 2D line per se and Unity GUI doesn't support lines. I searched the past threads and found two ways to go, but am having problems with both:

1. Use a "Line Renderer". The problem with this is that it will be covered/masked by any Unity GUI elements I may use. I may be able to work around this by redesigning my GUI, but the work around will be a PITA.

2. Use a "GUI.Label". GUIUtility.RotateAroundPivot would allow me rotate the label, but the problem with this is that I haven't found any way of scaling it to follow the mouse cursor? I thougt that GUIUtility.ScaleAroundPivot might do this, but so far haven't figured out how it's supposed to work.

Any help or suggestions?

 

Try #2, and you should be able to scale it by changing the width of the rect yo pass into it.

 

I'm afraid I'm having problems with #2 and the docs are pretty lean on the topic. Could you give me an example line of code that works?

Thanks!

 

BigK, to be sure you're using the GUIUtility class to scale and rotate as needed? What have you tried?


An alternate method might be to have a camera off in the distance somewhere doing little more than rendering a game object with the Line Rendering component attached. Draw the line, camera is orthographic, render the camera to a texture, draw texture as part of your GUI.

 

I'm just trying to get a feel for how this is supposed to work. This is what I've got so far but the texture isn't scaling?

Code (csharp):

1. var textureToDisplay : Texture2D;
2.  
3. function OnGUI () {
4.     GUI.Label (Rect (200, 200, 32, 32), textureToDisplay);
5.     GUIUtility.ScaleAroundPivot (Vector2(1,1), Vector2(3,1));
6. }

 

Reverse the two lines of code in your function and use something other than a scaling of 1 (the first parameter).

Edit: here's my example:

Code (csharp):

1. var textureToDisplay : Texture2D;
2.  
3. function OnGUI () {
4.   GUIUtility.ScaleAroundPivot (Vector2(0.5, 0.5), Vector2(328.0, 328.0));
5.   GUI.Label (Rect (200, 200, 256, 256), textureToDisplay);
6. }

My texture is 256x256 and the code above draws it at half-scale.

 

Ok, got it.

Now how do I get the start and end point to be relative to the screen? I'm guessing I need "GUIUtility.ScreenToGUIPoint" but how would I use this? (I wish there were some sample scripts in the docs, would save us some time on this).

 

Yes it does.

--Eric

 

Ok, now I'm totally confused. Given what I'm trying to do (see my first post) how should I tackle this? Although what I want to do should be pretty straightforward (draw a line from point a in screen units to point b in screen units) , this seems to be getting more complex by the minute.

 

You only need ScreenToGUIPoint (or GUIToScreenPoint) if you have this or other GUI elements in groups and/or windows. You use them in-line within your code to get "absolute" or "local" coordinates.

Code (csharp):

1. // Untested forum code example
2. function OnGUI () {
3.  
4.   GUI.BeginGroup(Rect(5, 5, 100, 100));
5.  
6.   Debug.Log(GUIUtility.GUIToScreenPoint(Vector2(5,5)));
7.   Debug.Log(GUIUtility.ScreenToGUIPoint(Vector(20,15)));
8.  
9.   GUI.EndGroup();
10.  
11. }

The first Debug.Log() would show an output of 10,10. The point specified (5,5) is relative to the group, which itself is located at (5,5), so the local GUI point is converted to screen coordinates, thus 10,10.

The second Debug.Log() would show an output of 15,10. The point specified (20,15) is relative to the screen and when you convert that into a "group relative" position it takes into account the group's location of (5,5) and so the result is (15,10).

And yes, the docs need improving on this front and I'll look into an improvement there even if it's some simple examples like the above.

Yup, as I mentioned above it's an option to consider using the Line Renderer in a camera that's only there to draw lines (render that camera to a texture, then use those texutres in your GUI).

 

I would strongly suggest using a dedicated camera that does nothing other than rendering of Line Renderer elements that are the lines you want to draw in your GUI. Render that camera into textures as needed and use those textures in your GUI.

To me that seems like something you can set up and use with much greater ease and flexibility than doing lots of rotation and scale juggling via the GUIUtility class.

 

The link is actually talking about using GL.LINES for real 2D lines. It requires Pro, but bigk has Pro so that's not an issue. I think it's the simplest solution since you'd just specify the start and end point of the line.

--Eric

 

Well there you go, I learned something in school today. Thanks, I'll go give that thread a nice close read!

 

Eric Tom,

I think I may be catching on (at least I hope I am). So I'd use the GL.line instead of a line renderer. But then:

1. Can I adjust this line to be 2 or 3 pixels thick?
2. It looks like I would use the same method Tom suggested, by applying this script to a render texture and using that as a texture in my GUI (label or box).
3. I'm guessing that I will still have to do some sort of screen coordinate conversion to find a cursor click location and use that as the start and end of the line.

Hmmm... gotta say that this is pretty complicated...

 

Using GL.LINES is only 1 pixel, sorry. I have a script for drawing a line using viewport coords:

Code (csharp):

1. var linePoints : Vector2[];
2. var lineColor = Color.white;
3. var lineDrawOn = false;
4. private var lineMaterial : Material;
5.  
6. function Awake () {
7.     lineMaterial = new Material( "Shader \"Lines/Colored Blended\" {" +
8.         "SubShader { Pass {" +
9.         "   BindChannels { Bind \"Color\",color }" +
10.         "   Blend SrcAlpha OneMinusSrcAlpha" +
11.         "   ZWrite Off Cull Off Fog { Mode Off }" +
12.         "} } }");
13.     lineMaterial.hideFlags = HideFlags.HideAndDontSave;
14.     lineMaterial.shader.hideFlags = HideFlags.HideAndDontSave;
15. }
16.  
17. function OnPostRender () {
18.     if (!lineDrawOn || linePoints.Length < 2) {return;}
19.    
20.     var cam = camera;
21.     var nearClip = cam.nearClipPlane+.01;
22.     lineMaterial.SetPass(0);
23.     GL.Begin(GL.LINES);
24.     GL.Color(lineColor);
25.     var end = linePoints.Length-1;
26.     for (i = 0; i < end; i++) {
27.         var v = cam.ViewportToWorldPoint(Vector3(linePoints[i].x, linePoints[i].y, nearClip));
28.         GL.Vertex3(v.x, v.y, v.z);
29.         v = cam.ViewportToWorldPoint(Vector3(linePoints[i+1].x, linePoints[i+1].y, nearClip));
30.         GL.Vertex3(v.x, v.y, v.z);
31.     }
32.     GL.End();
33. }
34.  
35. @script RequireComponent(Camera)

If you did something like:

Code (csharp):

1. function Start () {
2.     linePoints = new Vector2[2];
3.     linePoints[0] = Vector2(.5, .5);
4.     lineDrawOn = true;
5. }
6.  
7. function Update () {
8.     var m = Input.mousePosition;
9.     linePoints[1] = Vector2(m.x/Screen.width, m.y/Screen.height);
10. }

Then it would draw a line from the center of the screen to wherever the mouse pointer is. You could probably make a thicker line by drawing more than one, slightly offset, but offhand I'm not quite sure how the offset would be done.

--Eric

 

Thanks Eric, that's very helpful. Now if only there were an easy way to make this 2 or 3 pixels wide I'd be done!

 

Since I happened to take another look at this topic, I had an idea of how to do lines thicker than one pixel, and couldn't resist implementing it (though I'm sure you've long since used another solution). The script's on the wiki here. The width calculation is a bit of a kludge since I'm using viewport coordinates, but it works in all resolutions and aspect ratios I tested in (4:3 through 2:1) without any ugly gaps in the line.

--Eric

 

Thanks Eric. As you already guessed, I did manage to put together a working solution using a linerenderer displayed on a camera that renders to a render texture. Then that render texture is used as a texture in the GUI. The advantage this has is that I can change the look of the line by simply changing the texture applied to it. The disadvantage is that it's a kludge at best and my code isn't anywhere as pretty as yours.

 

The class:

Code (csharp):

1. public class GUIHelper
2. {
3.     protected static bool clippingEnabled;
4.     protected static Rect clippingBounds;
5.     protected static Material lineMaterial;
6.  
7.     /* @ Credit: "http://cs-people.bu.edu/jalon/cs480/Oct11Lab/clip.c" */
8.     protected static bool clip_test(float p, float q, ref float u1, ref float u2)
9.     {
10.         float r;
11.         bool retval = true;
12.         if (p < 0.0)
13.         {
14.             r = q / p;
15.             if (r > u2)
16.                 retval = false;
17.             else if (r > u1)
18.                 u1 = r;
19.         }
20.         else if (p > 0.0)
21.         {
22.             r = q / p;
23.             if (r < u1)
24.                 retval = false;
25.             else if (r < u2)
26.                 u2 = r;
27.         }
28.         else
29.             if (q < 0.0)
30.                 retval = false;
31.  
32.         return retval;
33.     }
34.  
35.     protected static bool segment_rect_intersection(Rect bounds, ref Vector2 p1, ref Vector2 p2)
36.     {
37.         float u1 = 0.0f, u2 = 1.0f, dx = p2.x - p1.x, dy;
38.         if (clip_test(-dx, p1.x - bounds.xMin, ref u1, ref u2))
39.             if (clip_test(dx, bounds.xMax - p1.x, ref u1, ref u2))
40.             {
41.                 dy = p2.y - p1.y;
42.                 if (clip_test(-dy, p1.y - bounds.yMin, ref u1, ref u2))
43.                     if (clip_test(dy, bounds.yMax - p1.y, ref u1, ref u2))
44.                     {
45.                         if (u2 < 1.0)
46.                         {
47.                             p2.x = p1.x + u2 * dx;
48.                             p2.y = p1.y + u2 * dy;
49.                         }
50.                         if (u1 > 0.0)
51.                         {
52.                             p1.x += u1 * dx;
53.                             p1.y += u1 * dy;
54.                         }
55.                         return true;
56.                     }
57.             }
58.         return false;
59.     }
60.  
61.     public static void BeginGroup(Rect position)
62.     {
63.         clippingEnabled = true;
64.         clippingBounds = new Rect(0, 0, position.width, position.height);
65.         GUI.BeginGroup(position);
66.     }
67.  
68.     public static void EndGroup()
69.     {
70.         GUI.EndGroup();
71.         clippingBounds = new Rect(0, 0, Screen.width, Screen.height);
72.         clippingEnabled = false;
73.     }
74.  
75.     public static void DrawLine(Vector2 pointA, Vector2 pointB, Color color)
76.     {
77.         if (clippingEnabled)
78.             if (!segment_rect_intersection(clippingBounds, ref pointA, ref pointB))
79.                 return;
80.  
81.         if (!lineMaterial)
82.         {
83.             /* Credit:  */
84.             lineMaterial = new Material("Shader \"Lines/Colored Blended\" {" +
85.            "SubShader { Pass {" +
86.            "   BindChannels { Bind \"Color\",color }" +
87.            "   Blend SrcAlpha OneMinusSrcAlpha" +
88.            "   ZWrite Off Cull Off Fog { Mode Off }" +
89.            "} } }");
90.             lineMaterial.hideFlags = HideFlags.HideAndDontSave;
91.             lineMaterial.shader.hideFlags = HideFlags.HideAndDontSave;
92.         }
93.  
94.         lineMaterial.SetPass(0);
95.         GL.Begin(GL.LINES);
96.         GL.Color(color);
97.         GL.Vertex3(pointA.x, pointA.y, 0);
98.         GL.Vertex3(pointB.x, pointB.y, 0);
99.         GL.End();
100.     }
101. };

Example Code:

Code (csharp):

1.  
2. /* The "GUIHelper.BeginGroup(Rect)" method can be used now instead of GUI.BeginGroup(Rect) */
3. GUIHelper.BeginGroup(new Rect(0, 0, 100, 100));
4.  
5. /* The "GUIHelper.DrawLine(Vector2, Vector2, Color);"
6. method will draw a 2D line, with a specified color */
7. GUIHelper.DrawLine(new Vector2(0, 0), new Vector2(200, 200), Color.red);
8.  
9. /* The "GUIHelper.EndGroup()" method will pop the clipping, and disable it. Must be called for every "GUIHelper.BeginGroup(Rect);" */
10. GUIHelper.EndGroup();

 

this code doesnt filter gui events and therefor is drawn in the zero coords in the world

you should add

Code (csharp):

1.         if (Event.current == null)
2.             return;
3.  
4.         if (Event.current.type != EventType.repaint)
5.             return;
6.  

to the DrawLine func

 

Try following code...

Here Texture2D named point represents 2x2 texture filled with white so that any color can be given to line. (namely, just use GUI.color)

Code (csharp):

1.    
2.     private void DrawLine(Vector2 start, Vector2 end, int width)
3.     {
4.         Vector2 d = end - start;
5.         float a = Mathf.Rad2Deg * Mathf.Atan(d.y / d.x);
6.         if (d.x < 0)
7.             a += 180;
8.  
9.         int width2 = (int) Mathf.Ceil(width / 2);
10.  
11.         GUIUtility.RotateAroundPivot(a, start);
12.         GUI.DrawTexture(new Rect(start.x, start.y - width2, d.magnitude, width), point);
13.         GUIUtility.RotateAroundPivot(-a, start);
14.     }

 

Thanks Sylvan for that code. I've expanded on it to allow the line to be composed of a solid color, a stretched texture, or a tiled texture

Code (csharp):

1.  
2. using UnityEngine;
3. using System.Collections;
4.  
5. public static class GuiHelper
6. {
7.     // The texture used by DrawLine(Color)
8.     private static Texture2D _coloredLineTexture;
9.  
10.     // The color used by DrawLine(Color)
11.     private static Color _coloredLineColor;
12.  
13.     /// <summary>
14.     /// Draw a line between two points with the specified color and a thickness of 1
15.     /// </summary>
16.     /// <param name="lineStart">The start of the line</param>
17.     /// <param name="lineEnd">The end of the line</param>
18.     /// <param name="color">The color of the line</param>
19.     public static void DrawLine(Vector2 lineStart, Vector2 lineEnd, Color color)
20.     {
21.         DrawLine(lineStart, lineEnd, color, 1);
22.     }
23.  
24.     /// <summary>
25.     /// Draw a line between two points with the specified color and thickness
26.     /// Inspired by code posted by Sylvan
27.     /// http://forum.unity3d.com/threads/17066-How-to-draw-a-GUI-2D-quot-line-quot?p=407005&viewfull=1#post407005
28.     /// </summary>
29.     /// <param name="lineStart">The start of the line</param>
30.     /// <param name="lineEnd">The end of the line</param>
31.     /// <param name="color">The color of the line</param>
32.     /// <param name="thickness">The thickness of the line</param>
33.     public static void DrawLine(Vector2 lineStart, Vector2 lineEnd, Color color, int thickness)
34.     {
35.         if (_coloredLineTexture == null || _coloredLineColor != color)
36.         {
37.             _coloredLineColor = color;
38.             _coloredLineTexture = new Texture2D(1, 1);
39.             _coloredLineTexture.SetPixel(0, 0, _coloredLineColor);
40.             _coloredLineTexture.wrapMode = TextureWrapMode.Repeat;
41.             _coloredLineTexture.Apply();
42.         }
43.         DrawLineStretched(lineStart, lineEnd, _coloredLineTexture, thickness);
44.     }
45.  
46.     /// <summary>
47.     /// Draw a line between two points with the specified texture and thickness.
48.     /// The texture will be stretched to fill the drawing rectangle.
49.     /// Inspired by code posted by Sylvan
50.     /// http://forum.unity3d.com/threads/17066-How-to-draw-a-GUI-2D-quot-line-quot?p=407005&viewfull=1#post407005
51.     /// </summary>
52.     /// <param name="lineStart">The start of the line</param>
53.     /// <param name="lineEnd">The end of the line</param>
54.     /// <param name="texture">The texture of the line</param>
55.     /// <param name="thickness">The thickness of the line</param>
56.     public static void DrawLineStretched(Vector2 lineStart, Vector2 lineEnd, Texture2D texture, int thickness)
57.     {
58.         Vector2 lineVector = lineEnd - lineStart;
59.         float angle = Mathf.Rad2Deg * Mathf.Atan(lineVector.y / lineVector.x);
60.         if (lineVector.x < 0)
61.         {
62.             angle += 180;
63.         }
64.  
65.         if (thickness < 1)
66.         {
67.             thickness = 1;
68.         }
69.  
70.         // The center of the line will always be at the center
71.         // regardless of the thickness.
72.         int thicknessOffset = (int)Mathf.Ceil(thickness / 2);
73.  
74.         GUIUtility.RotateAroundPivot(angle,
75.                                      lineStart);
76.         GUI.DrawTexture(new Rect(lineStart.x,
77.                                  lineStart.y - thicknessOffset,
78.                                  lineVector.magnitude,
79.                                  thickness),
80.                         texture);
81.         GUIUtility.RotateAroundPivot(-angle, lineStart);
82.     }
83.  
84.     /// <summary>
85.     /// Draw a line between two points with the specified texture and a thickness of 1
86.     /// The texture will be repeated to fill the drawing rectangle.
87.     /// </summary>
88.     /// <param name="lineStart">The start of the line</param>
89.     /// <param name="lineEnd">The end of the line</param>
90.     /// <param name="texture">The texture of the line</param>
91.     public static void DrawLine(Vector2 lineStart, Vector2 lineEnd, Texture2D texture)
92.     {
93.         DrawLine(lineStart, lineEnd, texture, 1);
94.     }
95.  
96.     /// <summary>
97.     /// Draw a line between two points with the specified texture and thickness.
98.     /// The texture will be repeated to fill the drawing rectangle.
99.     /// Inspired by code posted by Sylvan and ArenMook
100.     /// http://forum.unity3d.com/threads/17066-How-to-draw-a-GUI-2D-quot-line-quot?p=407005&viewfull=1#post407005
101.     /// http://forum.unity3d.com/threads/28247-Tile-texture-on-a-GUI?p=416986&viewfull=1#post416986
102.     /// </summary>
103.     /// <param name="lineStart">The start of the line</param>
104.     /// <param name="lineEnd">The end of the line</param>
105.     /// <param name="texture">The texture of the line</param>
106.     /// <param name="thickness">The thickness of the line</param>
107.     public static void DrawLine(Vector2 lineStart, Vector2 lineEnd, Texture2D texture, int thickness)
108.     {
109.         Vector2 lineVector = lineEnd - lineStart;
110.         float angle = Mathf.Rad2Deg * Mathf.Atan(lineVector.y / lineVector.x);
111.         if (lineVector.x < 0)
112.         {
113.             angle += 180;
114.         }
115.  
116.         if (thickness < 1)
117.         {
118.             thickness = 1;
119.         }
120.  
121.         // The center of the line will always be at the center
122.         // regardless of the thickness.
123.         int thicknessOffset = (int)Mathf.Ceil(thickness / 2);
124.  
125.         Rect drawingRect = new Rect(lineStart.x,
126.                                     lineStart.y - thicknessOffset,
127.                                     Vector2.Distance(lineStart, lineEnd),
128.                                     (float) thickness);
129.         GUIUtility.RotateAroundPivot(angle,
130.                                      lineStart);
131.         GUI.BeginGroup(drawingRect);
132.         {
133.             int drawingRectWidth = Mathf.RoundToInt(drawingRect.width);
134.             int drawingRectHeight = Mathf.RoundToInt(drawingRect.height);
135.  
136.             for (int y = 0; y < drawingRectHeight; y += texture.height)
137.             {
138.                 for (int x = 0; x < drawingRectWidth; x += texture.width)
139.                 {
140.                     GUI.DrawTexture(new Rect(x,
141.                                              y,
142.                                              texture.width,
143.                                              texture.height),
144.                                     texture);
145.                 }
146.             }
147.         }
148.         GUI.EndGroup();
149.         GUIUtility.RotateAroundPivot(-angle, lineStart);
150.     }
151. }
152.  

Read more Unity articles on my blog.

 

Is it possible to add a Collider to the textured Line?

I worked on this for hours but couldn't get it done.

 

I'm currently having a go at trying to draw 2D lines on screen but i'm having a difficult time getting the positioning of the lines correct. Do i need to use WorldtoScreenPoint or WorldtoViewportPoint if i want the line to start at the origin of an object to say.. where the label is?

 

Stephane,
Excellent code you have there.
One change I might suggest (it's originally Pixelplacement's) is that to undo the GUI transformation, instead of using (for instance)
GUIUtility.RotateAroundPivot(-angle, lineStart);
you should set up
Matrix4x4 matrixBackup = GUI.matrix;
at the very beginning (this will save the untransformed matrix), and then apply
GUI.matrix = matrixBackup;
at the end instead. This will guarantee that you'll always end up back with your starting Identity matrix. I just forsee bad rounding errors propagating when trying to rotate by an angle and then the negative angle when you're drawing a bunch of lines on a loop.

 

GUI stuff isn't made for collisions. In unity (unless you do all the physics yourself) you'll have to do collisions in 3d world space. There are ways, but they'll amount to having a 3d collision mesh in the background, possibly constrained to move in a plane. If you're making a side-on 2d game and want to collide with a line segment, check out the 2d gameplay tutorial example on the unity site.

 

You can try "Dream Paint" ( https://www.assetstore.unity3d.com/#/content/13175). It allows to draw 2D and 3D primitives in game and in editor, and many others features ...

 

I found this quite usefull, but does anyone have a clue on how to use this when I have rescaled the gui matrix? it seems the pivots get messed up after the scaling matrix is applyed.

I'm using scaling matrix to achieve a native resolution, so that when ever a screen size is changed, the gui elements stay in theyr designed positions and scaling.

So any ideas?