Making Dashed Line in Unity!

There's probably no web developer who doesn't know the famous dashed line. Especially when you select "dashed" as a style on the border of a web element, voila, there you have it, the dashed line! Let's show an example below:

 

Easy peacy! But wait I need dashed line in Unity. So let's start!

First of all, we need to know exactly what we're going to do. We need a line, this line should be multiple and have gaps between them, and it would be good if it could move!

Lets start with line texture:

You can save this to your computer if you want. We copy this into the Unity project and select its properties as follows:

The key point here is that "Wrap Mode" must be set to "repeat". So the texture is ready. In the next step, we will create a dashed line using this texture. For this purpose, we will use a Shader. Right-click on the folder where we will create the Shader and select Create > Shader Graph > URP > Sprite Unlit Shader Graph. Let's work deductively, and when the graph is finished, it will look like this:

Let's explain the steps in order. First, we create an input of type Texture2D. To include this input in the shader graph, we add a "Sample Texture 2D" node and connect the texture input to the texture input of this node. To multiply and move our lines according to our purpose, we add a "Tiling and Offset" node. The value we give to the "x" value of the Tiling input corresponds to the number of breaks. If we want to move, we split the output of the "Tiling and Offset" node using the "Split" node. The R output will correspond to the "x" value and the G output will correspond to the "y" value. Since we will be moving along the x-axis, we preferably add a "Subtract" node before the x value. Since the x value will decrease over time, we add a "Time" node and, preferably to control the movement speed, we add a "Multiply" node, connecting the "Time" output and the x output to the "Subtract" node. Finally, we connect the output of a "Vector2" node to the UV input of the "Sample Texture 2D" node. We also make sure to connect the RGBA output of this node to the BaseColor input of the "Fragment" node and the A output to the Alpha input. And there you have it!

After creating the graph, right-click on it and select Create > Material to create a "Material". Now all you have to do is create a "Line Renderer" and select the newly created object as the Material.

Once you've completed all the steps, you'll have a moving dashed line!