Draw Dotted / Dashed Line in the widget (Blueprint).

Hi All,

I am trying to achieve dotted or dashed line do be drawn in the widget blueprint, overriding On Paint function.

Basically, I traying to draw line of specific size of dashes and specific size off gaps from points A to B.

We have function drive line or drive lines from A to B which is great, but it is solid line

I Create simple code to draw dotted line horizontally, by calculating number of dashes and gabs in the distance between A and B and drawing via for Loop.

However, when it comes to non-horizontal line (Angular) my math skills of calculating it are not enough.

Did anyone have any Idea how to do it?

And it is strange that it is not implemented.

Thank you

Hey there @Vector! Welcome back to the community! I agree that a spline UMG element would be a fantastic addition to the UMG toolkit. I couldn’t find solid resources on spline UI in general, actually only a hand full of people have released anything about it. One was a plugin developer who actually pulled it off, and his plugin for this specifically is here:

~This is not an endorsement or sponsorship by Epic Games, I just think it’s relevant~

Might be worth a try to reach out to the plugin developer for some possible tips. Otherwise I can grab you some math papers on 2D splines that might help you out?

2 Likes

Thank you for the reply.

This may be one option.

This plugin looks great, the problem is that the Mac platform may be not supported, which adding some limitation to my project.

I trying to avoid plugins and use build in functionality even if takes more time.

I will mark it as answer

Oh no worries! Feel free to leave the solution unmarked so others may feel more inclined to comment, I’m a moderator I don’t need solutions for any reason, just here to help! The other alternative is to read some math papers on the splines, after that making the brush for the element would be relatively easy. I’d offer to do it if I was confident in my math abilities! There’s a couple of research papers on splines that could give you good formulas.

2 Likes

Instead of
PositionA = Start + {(DashSize + GapSize) * Index), 0.0f}
PositionB = PositionA + {DashSize, 0.0f}

try the following
NormalizedDirection = normalize(Finish - Start);
PositionA = Start + (DashSize + GapSize) * Index * NormalizedDirection
PositionB = PositionA + DashSize * NormalizedDirection

If you were to hardcode NormalizedDirection = {1.0f, 0.0f} then the new code would give you exactly the same result as your current version.
So if we actually take the difference between Finish/Start, we calculate the vector required to go from Start to Finish. Then we normalize to a length of 1 to get only the direction, eliminating any effects that would be introduced depending on the actual distance between Finish and Start.

On a side note, you probably don’t even need to do this calculation manually and could just use a VLerp (Vector Linear Interpolation) instead. If you actually need support for splines you could probably make use of the existing curve tools.

3 Likes

Hi guys!

Thank you so much for your help!

@SupportiveEntity I like plugin your advised and try it out! It is great and easy to use.

I will say it is all around solution if someone looking to work with lanes or splines.

It just me, sometimes plugins get out of dated or stopped from being supported, this why I don’t like to use external things, but sometimes we have no choice!

I am really appreciating for your help.

@UnrealEverything That is exactly what I was looking for!!!

You’re the Best! :smiley:

I done what you suggested, and the things just start working!

I don’t want to make complicated, just dotted line from point to point in all directions.

It will be great if EPIC cand simply add dashed line and textured line in the blueprints, in C# and other languages you able to do it, very strange why they didn’t implemented it.

For everyone else, please find below what I did, maybe it is not most elegant solution, but it works for me. Maybe someone will find what he was looking for.

Please note! there is some restrictions when you doing things in the On Paint function, like example asetting variables, or not alway drwing in the loops, I still playing arround, it is the firt time I was doing something in the On Paint function.

1 Like