Okay, so I wanted to make a basic ring effect in Wuthering Waves, you know, like those shockwave things you see sometimes. I didn’t want anything fancy, just a simple expanding circle. Here’s how I did it.

Figuring Out the Shader
First, I needed a shader. I’m not a shader wizard, so I kept it super simple. I basically just wanted something that could draw a circle and control its size and color.
I messed around for a bit and ended up with a basic unlit shader. The key was using a circle function – just check the distance from the pixel to the center and see if it’s within the radius. If it is, color it; otherwise, leave it transparent.
Making it Expand
The next part was making the circle grow over time.
I added a property to the shader called “_Radius”
I figured I could control this value from a script to make the ring expand.

I made a script so that it will make it larger and larger, and then kill the process, and when the radius value exceeds a certain value, it will kill the object.
Putting it all Together
Now, time to combine everything. I created a material using my new shader.
I wrote a tiny C# script and created a new GameObject in my scene
I attached a script to it, my new script is responsible for increasing the radius of my ring material over time.

I used a simple “Update()” function in my script. In there, I got the material, changed the “_Radius” value a little bit each frame, and boom, expanding ring!.
Tweaking and Finishing Up
Of course, it wasn’t perfect at first. I had to play around with the speed of the expansion, I set the maximum radius value.
And added a public variable, and finally made the circle disappear after it reached a certain size.
It is so easy! My little effect was done! It’s not super impressive, but it’s a good starting point. From here, I could add more details, make it fade out, or whatever. But for a basic expanding ring, this did the trick.