How to render line renderer or trail renderer above UI canvas

Question

I want to create a line renderer and also trail renderer that would follow touches but both must be rendered above my UI canvas — how can I do this?

I have tried this with the "screen space camera" mode and just came to know that it is not possible with screen space camera.

Is it possible by using line or trail with a "screen space overlay" canvas? If yes, then how could I make line/trail follow the touch position in such a setup?

I tried this before but i was not able to make it appear on screen rather it appeared on world as if it is ignoring the overlay canvas.Then I switched to screen space camera and this problem arose.

Answer 1

If you want to render things in front of UI then you can't achieve this with "Screen space overly" here is the reason.

So we are having two choices to chose from:

1. World space.
2. Screen space - Camera.

---

For more information about canvas and canvas render more please visit here.

---

World space:

To achieve such a effect with world space its too easy to do, You just have to change sorting order or Sorting layer of the object to render it front or at back of the UI.

Now when we have to render Line Rendrer or Trail Rendrer in front of the UI, Then i have to change sorting order to some thing bigger then canvas sorting order, Let suppose canves sorting order is 0 then i have to change Line or Trail rendrer sorting order to some thing like 1 or anything bigger then 0.

Canvas Settings:

Trail Rendrer Settings:

Or we can achieve this using Sorting layer. In order to use sorting layer then you have to create multiple layers. By default there is only one layer called "Default".

To create more layer you can click on Sorting layer - Default and then Add Sorting Layer.... And then just add the layers you want...

Now unity will render sorting layer "Default" first then on top it Sorting layer "UI" will be rendered and the at last Sorting layer - Trail will be rendered.

For "Screen space - Camera" same mathod will be applied like in World Space.

I hope this will resolve the quires you have about sorting layer and sorting order and canvas render mode etc.

Answer 2

I needed to use Screen Space - Overlay (line renderer will not work with this), so I wrote the following code to simulate a line between two objects (it is a gameobject prefab with a black square Image component, nothing else)

 private void createALine(GameObject objA, GameObject objB)
{
    /*spawn a prefab image "lineConnection" as angleBar*/
    GameObject angleBar = Instantiate(lineConnection, objB.transform.position, Quaternion.identity);
    /**/
    /*calculate angle*/
    Vector2 diference = objA.transform.position - objB.transform.position;
    float sign = (objA.transform.position.y < objB.transform.position.y) ? -1.0f : 1.0f;
    float angle = Vector2.Angle(Vector2.right, diference) * sign;
    angleBar.transform.Rotate(0, 0, angle);
    /**/
    /*calculate length of bar*/
    float height = 5;
    float width = Vector2.Distance(objB.transform.position, objA.transform.position);
    angleBar.GetComponent<RectTransform>().sizeDelta = new Vector2(width, height);
    /**/
    /*calculate midpoint position*/
    float newposX = objB.transform.position.x + (objA.transform.position.x - objB.transform.position.x) / 2;
    float newposY = objB.transform.position.y + (objA.transform.position.y - objB.transform.position.y) / 2;
    angleBar.transform.position = new Vector3(newposX, newposY, 0);
    /***/
    /*set parent to objB*/
    angleBar.transform.SetParent(objB.transform, true);
}