How can I animate/draw a line renderer over a given period of time

Unity Engine
1

I have created a line renderer using the code below:

public class MyLineRenderer : MonoBehaviour {
LineRenderer lineRenderer;

public Vector3 p0, p1;

// Use this for initialization
void Start () {
    lineRenderer = gameObject.GetComponent<LineRenderer>();
    lineRenderer.positionCount = 2;

    lineRenderer.SetPosition(0, p0);
    lineRenderer.SetPosition(1, p1);

    }
}

How can I write a coroutine that will animate/draw the line over specific duration, say 2 seconds?

2

You could try this:

[SerializeField]
    LineRenderer lr;
    private void Awake()
    {
        StartCoroutine(LineDraw());
    }
    IEnumerator LineDraw()
    {
        float t = 0;
        float time = 2;
        Vector3 orig = lr.GetPosition(0);
        Vector3 orig2 = lr.GetPosition(1);
        lr.SetPosition(1, orig);
        Vector3 newpos;
        for (; t < time; t += Time.deltaTime)
        {
            newpos = Vector3.Lerp(orig, orig2, t / time);
            lr.SetPosition(1, newpos);
            yield return null;
        }
        lr.SetPosition(1, orig2);
    }
3 Likes
3

Thanks so much, this is precisely what I need. How about tweening the animation with some tween engine, preferably DOTween. How will that be done?

4

I have never used a tween engine. Usually I can infer what is implied when someone mentions it or suggests it as an answer, but how it would differ from this solution here? :slight_smile:

Was it simply you wanted to use DOTween instead of this code, or something else?

Oh, and youā€™re welcome :slight_smile:

5

Actually what you provided was what I needed. I am just looking at the linear animation and I got the idea that tweening it with some ease-in, ease-out or some other kind of smooth movement apart from the linear movement would give the animation a better feel. I guess this can be achieved even without a tween engine.

6

Sure, could be without an engine.

However, perhaps with the idea of the code and a tween engine you could do what youā€™re looking for. :slight_smile:

Iā€™ve just never used one, so Iā€™m hesitant to speculate, sorry :wink:

7

I would really be grateful if you could take a look at this question that I asked.

https://discussions.unity.com/t/690050

8

Is the line straight on 1 axis or diagonal ? If itā€™s diagonal , I think you might consider a different type of collider Polygon probably). If itā€™s straight on 1 axis, let me know and I will test something (I think you can just add the collider when itā€™s larger than 0, and it will adjust itself). Or adjust it easily, too.

9

My line is mostly diagonal but would be straight occasionally. I used the Polygon collider as you recommended but it didnā€™t create the collider and kept giving me a warning in the inspector. Please see my code and the warning below:

    IEnumerator LineDraw()
    {
        float t = 0;
        float time = 2;
        Vector3 orig = lr.GetPosition(0);
        Vector3 orig2 = lr.GetPosition(1);
        lr.SetPosition(1, orig);
        Vector3 news;

    List<Vector2> colliderPath = new List<Vector2>();
        for (; t < time; t += Time.deltaTime)
        {
            newpos = Vector3.Lerp(orig, orig2, t / time);
            lr.SetPosition(1, newpos);

       polygonCollider.pathCount++;
       polygonCollider.SetPath (polygonCollider.pathCount - 1, colliderPath.ToArray ());
       colliderPath.Clear ();

            yield return null;
        }
        lr.SetPosition(1, orig2);
    }

And the warning:

The collider did not create any collision shapes as they all failed verification. This could be because they were deemed too small or the vertices were too close. Vertices can also become close under certain rotations or very small scaling.

Please note that I created the Polygon Collider programmatically:

polygonCollider = gameObject.AddComponent<PolygonCollider2D>();
polygonCollider.pathCount = 0;
10

Okay, do you need this collider to update ā€œliveā€ or can you just add it at the end? I wrote some code that seems to work 98.5% of the time (maybe 100% and I just saw a 1-off glitch), where it updates as you build it. It consists of 3 pts and updates as you go so you have: start, midway pt, end point. I tried to set a minimum distance between updates, but the inspector still briefly flashes the error periodically, but most of the time the error isnā€™t present (nor is it present at the end*).

So, if you donā€™t need it to update during the animation (probably a lot easier), you can add 3 pts at the end and that should work. If you want to try updating the collider as you go, I can paste the code I attempted. Just let me know.

11

Would you mind explaining this to me a bit? Do I use the lr.GetPosition(0) and lr.GetPosition(1) to replace with the positions I want to draw the line between? I am new to the lineRenderer and would love if you could break it down a bit for me to understand why you are doing this the way you are

12

Sure, I can try to explain it a bit. Yes, first the positions are set where you want the line to be when itā€™s finished.
That info (in the current script) stores the beginning and end. Then, with the variable ā€˜timeā€™ the line acts like itā€™s animating being drawn. So, itā€™ll appear over time.
You can try it out by dragging and dropping a line renderer in the inspector, and setting a simple line to try as an example. :slight_smile: