Partially recoloring sprites to create screen wipe effect

Hello! I'm still learning Unity, so apologies if this is in the wrong place or an easy question. (Edit: I now realize this is better for Unity Answers, but I can't delete the question. Any mod reading this, feel free to delete, I am moving my question there. My bad.)

I have a 2D scene consisting of flatly colored square sprites. I would like to have a screen wipe effect, where the sprites are a different color on either side of the wipe. Visual example attached below. Can someone point me in the right direction for how to do this? Do I need to learn shaders?

-The sprites are white and colored via the Sprite Renderer.

-I am using the URP, so no projector object. If I have to switch back to built in I will, but I want that to be the last resort.

-optimally, I would be able to make the border squiggly, a circle, etc.

Thanks!

 

Hey,

This is likely not the most efficient way of doing things, but you could double up all of your sprites and then move a square sprite mask over the screen to act as a wipe.

- Create 2 of each square, making them different colors (I'll use red and blue as an example).
- Parent 1 of each color to an empty object.
- Put all red squares on a higher sorting layer, and set those squares to "Visible Outside Mask."
- Create a large square sprite mask, and animate it to move across the screen until it covers the entire screen.

Once the sprite mask covers the entire screen, all of the red squares will have turned blue. You can then reverse the effect by moving the sprite mask off the screen.

You can also change the shape of the wipe effect by changing the Sprite reference in the Sprite mask.

I'm sure there are other methods, but hopefully this helps.

Good luck!

 

Awesome, thank you so much!