Achieve a "stroke" / "transparent" effect with the Line Renderer

I would like to be able to draw lines that have “outlines” and do not have any color inside. When the lines overlap, the ones below need to be visible. I guess I am trying to achieve something like the “Stroke” effect in Photoshop with the Fill set to 0%. I am trying to achieve something like this:

Unity’s Line Renderer doesn’t seem to offer an obvious/easy way to do this. There doesn’t seem to be a way to add a stroke/outline to a line. I am aware that I can have 2 Line Renderers on top of each other (one with a shorter width than the other) to achieve a “stroke” effect. However, this doesn’t solve the “transparency” issue and I will just end up with something like this:

Is there a way to achieve a “stroke” effect with “transparency” inside?

Note: Keep in mind that the ends of the lines need to be rounded (I am currently using End Cap Vertices with the Line Renderer)

Can’t try this out myself at the moment, but what if you try drawing a square with no fill and a white stroke, export it as a .PNG, import it into Unity, create a material with that image as the main texture, and assign that material onto the LineRenderer?

this plugin might be best bet,

tested some random outline sprite shader, also kind of works ( Help to find an asset/solution )

@Vryken Hey, I tried something like what you said. First I tried with a transparent square with a stroke on all sides. The left and right sides of the square become stretched. Below is the texture used and the resulting line renderer:

Second, I tried a square with a stroke on only the top and bottom. Below is the result:

The second looks better, but it doesn’t allow me to have rounded end caps. Increasing the value of End Cap Vertices doesn’t do anything. It just adds a weird tapering effect in the end as seen in the screenshot below:

For the end caps, I’m thinking maybe I should just add a sprite with a semi-circle texture on both ends of the line. And then adjust the angle of those semi-circle sprites to match the line renderers. Will still need to experiment with that…

@mgear Thanks for the suggestion. The plugin looks great but it costs $100. If I’ve exhausted all free solutions, I’ll resort to buying that plugin. :slight_smile: I will also be looking into the second solution you posted. I don’t have any experience writing shaders, but I’ll see if I can make it work. Thanks.

Hey MSNZ, did you ever find a cheaper solution to this? I’m running into a similar issue, except that I actually want to NOT have them overlap transparently like you do. As in, I want it to look like multiple lines have been merged together to create one shape.

Maybe you found a way to do this a long time ago, or maybe you found a good program to work with here?

Hey there – did you find a better solution?