How To Make Particles Interact With UI?

Hello!

I’ve got an idea for an effect I want to accomplish in my game. When the player completes an objective, I’d like to spawn a bunch of particles that sort of suck up into a bar that shows the player’s progress.

Here’s a quick demonstration that I threw together. The star is the player’s progress bar, the white being the amount of progress they’ve made. The red pixels are an example of a particle flying into the progress bar and filling it up

296178-example-ui-particles.gif

I’m not quite sure how I’d go about this, though. My initial thought was to see about using a particle system, and have an attraction point slurp up the particles, but it was too inconsistent. I was having a hard time controlling the speed of the particles as they approached: if the attraction strength was too high, they’d go too fast. If it was too low, the particles would fly right past it.

The second problem is: detecting when the particles have touched the UI element. I was reading a lot of people having issues with getting particles to display alongside UI elements, and I assume that detecting if a particle has entered the same screen-space as a UI element would be infinitely more trouble than it’s worth.

There’s a few other caveats to how I want this to work, but I think if I figure out some reasonable way to do this, I should be able to figure out the rest.

If anyone has any suggestions, or even knows what I might be able to look into to help research solutions to this, I’d be very grateful!

Thanks!