Creating a dotted line in Unity cover image

Creating a dotted line in Unity

Being a game developer, I use Line Renderer a lot to draw lines with Unity. But when it comes to drawing a dotted line, I get all messed up with how can we use it.

I came across a lot of tutorials online that shows how I can draw a dotted line by using the Line Renderer in Unity, but none of them actually worked (at least for me).

But I really needed the dotted line in my game.

So I came to the solution of creating a dotted line with Unity using the Sprites, with each sprite positioned on a straight line in such a way that they resemble a dotted line.

NOTE: This line renderer is a bit heavy on performance. So try optimizing it for drawing lines with a lot of dots in it.

Drawing a dotted line

Download the unitypackage here

I have created a simple script that you can use to draw a dotted line in Vector2 world space.

The Script – DottedLine.cs

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

namespace DottedLine
{
    public class DottedLine : MonoBehaviour
    {
        // Inspector fields
        public Sprite Dot;
        [Range(0.01f, 1f)]
        public float Size;
        [Range(0.1f, 2f)]
        public float Delta;

        //Static Property with backing field
        private static DottedLine instance;
        public static DottedLine Instance
        {
            get
            {
                if (instance == null)
                    instance = FindObjectOfType<DottedLine>();
                return instance;
            }
        }

        //Utility fields
        List<Vector2> positions = new List<Vector2>();
        List<GameObject> dots = new List<GameObject>();

        // Update is called once per frame
        void FixedUpdate()
        {
            if (positions.Count > 0)
            {
                DestroyAllDots();
                positions.Clear();
            }

        }

        private void DestroyAllDots()
        {
            foreach (var dot in dots)
            {
                Destroy(dot);
            }
            dots.Clear();
        }

        GameObject GetOneDot()
        {
            var gameObject = new GameObject();
            gameObject.transform.localScale = Vector3.one * Size;
            gameObject.transform.parent = transform;

            var sr = gameObject.AddComponent<SpriteRenderer>();
            sr.sprite = Dot;
            return gameObject;
        }

        public void DrawDottedLine(Vector2 start, Vector2 end)
        {
            DestroyAllDots();

            Vector2 point = start;
            Vector2 direction = (end - start).normalized;

            while ((end - start).magnitude > (point - start).magnitude)
            {
                positions.Add(point);
                point += (direction * Delta);
            }

            Render();
        }

        private void Render()
        {
            foreach (var position in positions)
            {
                var g = GetOneDot();
                g.transform.position = position;
                dots.Add(g);
            }
        }
    }
}

Usage

The usage of this script is really simple. Just attach the script to an empty game object in your current scene.

To draw the dotted line, use the following code snippet.
Step 1: Import the DottedLine namespace in your file.
Step 2: For every frame, you want to show the dotted line in the game, use the following function call.

DottedLine.Instance.DrawDottedLine(pointA, pointB);

Step 3: Modify the inspector values to make your line the way you want it to look.

updating the inspector values of the dotted line

You can use an expandable pool of gameobjects to get performance gains from this script.

The code is available on Github at this link. You can fork the code snippet & optimize this code to get it merger to help other developers use this.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.