How to draw a GUI 2D "line"?

Unity Engine
1

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?

2

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

3

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!

4

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.

5

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?

var textureToDisplay : Texture2D;

function OnGUI () {
	GUI.Label (Rect (200, 200, 32, 32), textureToDisplay);
	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:

var textureToDisplay : Texture2D;

function OnGUI () {
  GUIUtility.ScaleAroundPivot (Vector2(0.5, 0.5), Vector2(328.0, 328.0));
  GUI.Label (Rect (200, 200, 256, 256), textureToDisplay);
}

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

7

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).

8

Yes it does.

–Eric

9

Ok, now I’m totally confused. :frowning: 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.

10

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.

// Untested forum code example
function OnGUI () {

  GUI.BeginGroup(Rect(5, 5, 100, 100));

  Debug.Log(GUIUtility.GUIToScreenPoint(Vector2(5,5)));
  Debug.Log(GUIUtility.ScreenToGUIPoint(Vector(20,15)));

  GUI.EndGroup();

}

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. :slight_smile:

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).

11

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.

12

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. :wink: I think it’s the simplest solution since you’d just specify the start and end point of the line.

–Eric

13

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

14

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…

15

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

var linePoints : Vector2[];
var lineColor = Color.white;
var lineDrawOn = false;
private var lineMaterial : Material;

function Awake () {
	lineMaterial = new Material( "Shader \"Lines/Colored Blended\" {" +
		"SubShader { Pass {" +
		"	BindChannels { Bind \"Color\",color }" +
		"	Blend SrcAlpha OneMinusSrcAlpha" +
		"	ZWrite Off Cull Off Fog { Mode Off }" +
		"} } }");
	lineMaterial.hideFlags = HideFlags.HideAndDontSave;
	lineMaterial.shader.hideFlags = HideFlags.HideAndDontSave;
}

function OnPostRender () {
	if (!lineDrawOn || linePoints.Length < 2) {return;}
	
	var cam = camera;
	var nearClip = cam.nearClipPlane+.01;
	lineMaterial.SetPass(0);
	GL.Begin(GL.LINES);
	GL.Color(lineColor);
	var end = linePoints.Length-1;
	for (i = 0; i < end; i++) {
		var v = cam.ViewportToWorldPoint(Vector3(linePoints[i].x, linePoints[i].y, nearClip));
		GL.Vertex3(v.x, v.y, v.z);
		v = cam.ViewportToWorldPoint(Vector3(linePoints[i+1].x, linePoints[i+1].y, nearClip));
		GL.Vertex3(v.x, v.y, v.z);
	}
	GL.End();
}

@script RequireComponent(Camera)

If you did something like:

function Start () {
	linePoints = new Vector2[2];
	linePoints[0] = Vector2(.5, .5);
	lineDrawOn = true;
}

function Update () {
	var m = Input.mousePosition;
	linePoints[1] = Vector2(m.x/Screen.width, m.y/Screen.height);
}

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

16

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!

17

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

18

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. :wink:

19

The class:

public class GUIHelper
{
    protected static bool clippingEnabled;
    protected static Rect clippingBounds;
    protected static Material lineMaterial;

    /* @ Credit: "http://cs-people.bu.edu/jalon/cs480/Oct11Lab/clip.c" */
    protected static bool clip_test(float p, float q, ref float u1, ref float u2)
    {
        float r;
        bool retval = true;
        if (p < 0.0)
        {
            r = q / p;
            if (r > u2)
                retval = false;
            else if (r > u1)
                u1 = r;
        }
        else if (p > 0.0)
        {
            r = q / p;
            if (r < u1)
                retval = false;
            else if (r < u2)
                u2 = r;
        }
        else
            if (q < 0.0)
                retval = false;

        return retval;
    }

    protected static bool segment_rect_intersection(Rect bounds, ref Vector2 p1, ref Vector2 p2)
    {
        float u1 = 0.0f, u2 = 1.0f, dx = p2.x - p1.x, dy;
        if (clip_test(-dx, p1.x - bounds.xMin, ref u1, ref u2))
            if (clip_test(dx, bounds.xMax - p1.x, ref u1, ref u2))
            {
                dy = p2.y - p1.y;
                if (clip_test(-dy, p1.y - bounds.yMin, ref u1, ref u2))
                    if (clip_test(dy, bounds.yMax - p1.y, ref u1, ref u2))
                    {
                        if (u2 < 1.0)
                        {
                            p2.x = p1.x + u2 * dx;
                            p2.y = p1.y + u2 * dy;
                        }
                        if (u1 > 0.0)
                        {
                            p1.x += u1 * dx;
                            p1.y += u1 * dy;
                        }
                        return true;
                    }
            }
        return false;
    }

    public static void BeginGroup(Rect position)
    {
        clippingEnabled = true;
        clippingBounds = new Rect(0, 0, position.width, position.height);
        GUI.BeginGroup(position);
    }

    public static void EndGroup()
    {
        GUI.EndGroup();
        clippingBounds = new Rect(0, 0, Screen.width, Screen.height);
        clippingEnabled = false;
    }

    public static void DrawLine(Vector2 pointA, Vector2 pointB, Color color)
    {
        if (clippingEnabled)
            if (!segment_rect_intersection(clippingBounds, ref pointA, ref pointB))
                return;

        if (!lineMaterial)
        {
            /* Credit:  */
            lineMaterial = new Material("Shader \"Lines/Colored Blended\" {" +
           "SubShader { Pass {" +
           "   BindChannels { Bind \"Color\",color }" +
           "   Blend SrcAlpha OneMinusSrcAlpha" +
           "   ZWrite Off Cull Off Fog { Mode Off }" +
           "} } }");
            lineMaterial.hideFlags = HideFlags.HideAndDontSave;
            lineMaterial.shader.hideFlags = HideFlags.HideAndDontSave;
        }

        lineMaterial.SetPass(0);
        GL.Begin(GL.LINES);
        GL.Color(color);
        GL.Vertex3(pointA.x, pointA.y, 0);
        GL.Vertex3(pointB.x, pointB.y, 0);
        GL.End();
    }
};

Example Code:

/* The "GUIHelper.BeginGroup(Rect)" method can be used now instead of GUI.BeginGroup(Rect) */
GUIHelper.BeginGroup(new Rect(0, 0, 100, 100));

/* The "GUIHelper.DrawLine(Vector2, Vector2, Color);"
method will draw a 2D line, with a specified color */
GUIHelper.DrawLine(new Vector2(0, 0), new Vector2(200, 200), Color.red);

/* The "GUIHelper.EndGroup()" method will pop the clipping, and disable it. Must be called for every "GUIHelper.BeginGroup(Rect);" */
GUIHelper.EndGroup();
20

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

you should add

		if (Event.current == null)
			return;

		if (Event.current.type != EventType.repaint)
			return;

to the DrawLine func