minionsart
patreon
UI - Sprite Swapping Shader (URP-Friendly)
🕑 Added 2020-11-13 21:28:00 +0000 UTCHi all!,
While I'm still working on the larger tutorial of the geometry grass, I wanted to share a fun UI-base one for swapping between 2 sprite textures. I wanted to use this for Astro Kat to switch between different modes on button prompts.
Shader Code link at the very bottom
Here are the sprite swapping effects;
Horizontal or Vertical
To create a swipe, we use the uv coordinates/texcoord, X for horizontal, Y for vertical.
To move the swip, move the slider labaled "Transition", or in code, Material.SetFloat("_Transition", value);
Then multiply the gradient with the first sprite, and the inverse (1-gradient) with the second sprite.
For a edge line, add another cutoff with step, that will be slightly smaller than the first, and subtract the first gradient from it.
Dissolve
The classic dissolve that everyone probably knows, step through the noise texture instead of the texcoord.
Combined Noise + UV
Add the noise to uv coordinates before the step functions and you get a cooler swipe effect
Flip
To flip the vertices of the sprite, use the "RotateAroundYInDegrees" function like used in the liquid shader.
Because UI images all get batched with the canvas, the rotation will be done at 0,0,0 (center of screen). So if your UI image isn't in the center, it will still try to rotate around there.
To fix this, we need to subract the Rect Transform position to put the image in the center, rotate, and then apply the offset again.
To send this offset to the shader, use SetFloat and transform.InverseTransformPoint from the root canvas:
Code: PasteBin Link
Then after flipping, use the vface (facing) to set the first sprite on one side, and the second sprite on the other side.
You could also just rotate the Image gameObject, but then you get a z distortion. In the shader we can make it look nicer.
Shader Code with comments: PasteBin Link
Thanks for reading!
