How can I draw an outline in Unity3d?

Question

I am trying to highlight a rectangle of arbitrary height. I thought the easiest way to do this would be to create a separate "box" gameobject that outlines the rectangle.

I've tried with both a MeshRenderer + Transparent Texture, and a LineRenderer to outline the four points of the rectangle. Neither are very satisfactory.

(Line renderer on in the middle, scaled cube on the right)

What's the right way to go about this? I am trying to get something like the left rectangle - a simple perimeter of fixed width through four points of my choosing.

Answer 1

Use GUI.Box().

If you only need a 2D rectangle, GUI is the way to go. Create a new GUIStyle using a simple rectangle as a texture (the inside of the rectangle should be transparent, of course), set up its Border value so that it is not stretched, and call GUI.Box(new Rect(...),"",myGuiStyle);.

You can use Camera.WorldToScreenPoint method if you want to outline something in world coordinates (i.e. 3D), just remember that in Unity's world coordinates y goes from bottom to top, and in GUI y goes from top to bottom.

Code Example:

void OnGUI()
{
    //top left point of rectangle
    Vector3 boxPosHiLeftWorld = new Vector3(0.5f, 12, 0);
    //bottom right point of rectangle
    Vector3 boxPosLowRightWorld = new Vector3(1.5f, 0, 0);

    Vector3 boxPosHiLeftCamera = Camera.main.WorldToScreenPoint(boxPosHiLeftWorld);
    Vector3 boxPosLowRightCamera = Camera.main.WorldToScreenPoint(boxPosLowRightWorld);

    float width = boxPosHiLeftCamera.x - boxPosLowRightCamera.x;
    float height = boxPosHiLeftCamera.y - boxPosLowRightCamera.y;


     GUI.Box(new Rect(boxPosHiLeftCamera.x, Screen.Height - boxPosHiLeftCamera.y, width, height),"", highlightBox);
}

Answer 2

A simple way is to use a Shader with two Passes: the first Pass uses the vertex shader to scale up the object a bit and uses the pixel shader to color it to a solid color matching to the color you want the outline to have, and then the second Pass does the regular rendering.

Answer 3

Below is a non-shader approach.

Think of your 2d box as nothing more than four lines, where each line is stretched in only one dimension (the other two dimensions are the cross-section of the edge). This is much like if you were to construct a box in real-life, where you are piecing together variable lengths of wood that all have the same cross-section size.

With that in mind, you can devise a Component, say BoxBuilder, which when attached to a GameObject, creates and manages four child GameObjects. Each child game object is one of your box edges, and can simply be a 3d cube that is stretched in only one dimension. With a width and height defined BoxBuilder level, you can calculate the necessary positioning and non-uniform scale of the four child edges. It will be a lot of pos.x=w/2, pos.y=h/2, ..., scale.x=h, scale.y=w, etc. sort of code.

Though I believe you're asking for 2-d only, note that this same idea can be applied to 3d boxes if needed, where the BoxBuilder now must create and manage 12 child edges, but again only scaling each edge in one local dimension.