How to draw animated line between widgets?

Development Programming & Scripting Blueprint
, ,
1

Hi, is there a way to draw an animated line between 2 widgets, edge to edge, when one of them is hovered?

By animated line, I mean, maybe changing its transparency in a loop, or “growing” the line from one widget to another.

Thanks.

2

I’m not sure I’m super clear on what you are trying to do, is there an example from a game that you’d be able to show?

Changing the transparency in a loop should be fairly easy using the widget animation and adding the line’s color’s alpha as a track. The animation can be set to loop and you can use keyframes to make the value go from 1 to 0 then back to one and that’s the entire animation.

I’m not sure about growing the line (though I’m also not sure what you mean).

1 Like
3

Animating is a matter of providing appropriate coords. You know the direction, increase a scalar and you’re good. Opacity can be animated as well.

Widgets can use splines these days, too - considering how the entire visual scripting is a bunch of animated wires… it’s high time they did, right?

Also:

https://www.unrealengine.com/marketplace/en-US/product/niagara-ui-renderer?sessionInvalidated=true

1 Like
4

Is there any documentation on that, or do you refer to the UMG splines plugin?

5

Also, that post you linked uses onPaint. I was wondering if there’s a way to use “Draw Line” with onHovered, which I need.
I also thought there is no way to perform any operation on the line drawn by the “Draw Line” node. Can it really be animated?

6

Yes, onPaint fires every frame. OnHovered just needs to supply data. Drawing lines requires context which is not available outside of onPaint. That’s the whole point of its existence, tbh.

1 Like