Shift Hue of Pixels Under Object

Hi there,

I have been attempting to understand shaders for a while now but have still come up short on how to achieve the effect in the screenshot below.
When the player hits one of the balls, a circle comes out from the collision point and shifts the hue of the pixels underneath up. I originally made the game in Construct 2 and used the build in AdjustHSL Mask applied to the circle which removes all base colour from the object but uses it’s texture as the area to apply the mask to.

After the circle has filled the screen I change the colour of the background and other game objects to the shifted colour and delete the circle to save on performance. It is a mobile game after all and them effects don’t come cheap with WEBGL.

Thanks so much for your help. Just pointing me in the right direction can help a lot.

Charlie

1 Like

You basically want to do a screen ripple. Pass a Vector to your shader for the position of the circle then ramp it up and use it as a mask to lerp between your colors. You could get everything into 1 material pretty easy that way.

1 Like

You could probably use grab textures as well, just multiplying the grab texture by the colour you wished.

1 Like

Sorry I only just saw these, thanks so much for both of your help. I will check them out today.

I don’t even know where to start with that. I think I might just have to dig deep and learn about shaders.

That also sounds beyond my current skills but luckily I’m using iOS where GrabPass is apparently a No-No performance wise. At least I can pretend I’m not doing that because of framerate issues instead of the truth that shaders scare me.

Haha, sorry I was a bit ignorant there.

1 Like