Question on how to achieve visual effect

Godot Version

4.7.1

Question

Ahoy-hoy. I'm inquiring about the best way to go about accomplishing a visual effect I've illustrated in my marvelously provided IMAGE.

Effectively, I want to create a glow around the sprite, coalesce that glow into a circular-esque shape/sprite and then have it go in a circle around before flowing over to the goal. I’ve seen this visual effect done in some card games but actually doing it myself leaves me wondering best practice or even how to do it.

I have my own thoughts on maybe how to do it, but I’ll leave this question completely open in-case someone has better thoughts on the matter. I am a complete rookie to shaders and visual effects, so any insight is appreciated.

Let’s hear them.

My first thought was to duplicate the sprite (in this case, a canvas group) and apply a shader material to it. Pretty sure Canvasgroups have necessary shader code you have to plop in there, but after that, I’d probably equalize the color values of rgb to the same values, then blow out the blue value to give it that hue, then make the alpha 0.75 or so. That would give me the initial blue hue anyway.

I’m not sure if it’s more difficult with a canvasgroup, but I imagine you could get the border of the sprite and then offset that to get the perimeter of it, and then I could make the alpha and blue values for that section higher to give the border prominence. Ideally, I’d want that border to be fluctuating slightly, which would offset the whole thing by a very mild sin wave – though I’m not sure how I would make that apply in a different shape. Only shaders I’ve done like that move the whole thing in one direction, so I’d probably have to change x, y values above or below certain points. Shrugs

Then I’d probably just scale the sprite down and spawn in a new sprite with its own particle system at the center and then move that in the circular pattern towards the location. Mostly cause I have no idea how to reshape an existing sprite, so that’s out of the question for me.

That’s what I’ll likely try to do to start when this task comes up (soon). Shaders scare me because of math, so I have been avoiding them. Figured I’d just ask on here if there is a better methodology before I go ramming my head against the wall. I’m sure once I start, I’ll have a bunch of shader math questions at some point or another, but I try to sift around for those specifically. This was just a broad inquiry.

Is “sprite” always a rounded corner box? Can you link a video that shows this effect in an existing game?