Expanding Circle ?

This can be done easily with particles but want to make it a material animation to go on a hud widget. For mouse cursor click … Expanding 2 circles each fading out, not one after but still second circle is delayed ? I’m sure it can be done without a flip book / tiled UV.

Whilst on this topic is there a collection of animations for hud or not anywhere to browse ?

Not sure what you mean by doing it without UVs. You can scale the image in UMG during an animation but that defeats the point of using a material.

Here’s how you can do it in the material. Single UMG image, dynamic material instance and 1 scalar only. The *Scale *param goes from 0 -> 1 in the widget’s gated Tick:

Gyazo anim

The top bit is the first circle, the bottom bit is the second one. The multiply and clamp nodes in the bottom left control the behaviour of the second circle. This can be vastly improved, I’m sure.

Hope it helps.

Cool thanks. How did you assign the mouse behaviour ? Also any hiding.

There is no hiding necessary since the widget material opacity sits at 0 most of the time. You can, of course, add it but it’s a visual only element that should be set to Hit Test Invisible anyway.

It’s a canvas with an overridden double click, it’s up to you how you trigger it, anything goes, really.

The widget has a canvas and an image, nothing more. Widget tick:

Double click implementation:

That’s pretty much it, seems to be working well enough.

Thanks. There is a slight graphical error on my end but the code works fine. You’ve assigned it to “Mouse Double Click” which works, I tried in “Mouse Down” but doesn’t work. I really just want it on single click ?

There should be no difference. Hooked it up to the mouse button down in the widget override and it works.
You may get a bit of graphical glitch if you skimp on the clamp nodes. When UV goes to 0, strange things tend to happen.

What image format did you use ?

png, you need something with alpha, it was something like this:

circularGradient_04_64.png

Same … I had to make the circle smaller and clamped the minimum, looks ok now.