koobas.hobune.stream
How can I make an animated color gradient?
I do not know how to create a shader script, but I can learn. I want to create an effect on the surface of a quad. When this effect is activated, I want 2 white gradient to start in the middle of the cube and expand outwards until it reaches the edges of the quad.
Did the last attempt fail?? We’re you able to make a texture and scale it up??
Oh hi! No it didn't fail. I got it to work. The issue using a texture and scaling it up is that I don't get the full effect I want. Because I want the white fade to expand outwards, but clip at the edges. Right now it scales up and stops at the edges, but it doesn't look like it fades out, it just stops. I am looking for the white gradient to expand outwards and look like it fades out at the edges.
To be clear, the texture I made is a hollow square with an inwards alpha fade. So it looks good until it hits the edges and stops, because when it stop I can clearly see its a square and not a gradient.
Essentially, I want it to look like the gradient disappears into the edges, not just stop at them.
You can fade it out at the end. Use Color.Lerp and fade to Color.clear. Additionally, you can adjust the UV positions when you get near to where you want it to fade out, if the UVs slowly change to the middle , which is hollow space, you will not see the gradient texture anymore. Sprite.uv
Take a look at the Scripting API:
https://docs.unity3d.com/ScriptReference/Sprite-uv.html
Get a reference to your sprite:
[SerializeField] Sprite sprite;
[SerializedField] SpriteRenderer rend;
Place that in your class and assign the sprite and sprite renderer in the inspector (click on the circle beside the field to see the options of what sprites/sprite renderers you can choose)
Once you scale up the image, you can start modifying the uvs (Vector2 pixel coordinates) of the sprite with a coroutine like the below for example.
IEnumerator ManipulateUV()
{
Vector2[] originalUV = sprite.uv;
float timer = 0.0f;
float speed = 0.5f;
while(timer < 1.0f)
{
foreach(Vector2 pos in sprite.uv)
{
pos = Vector2.Lerp(pos, sprite.pivot, timer);
}
timer += Time.deltaTime * speed;
yield return new WaitForEndOfFrame();
}
rend.enabled = false;
sprite.uv = originalUV;
}
Now just call the above with StartCoroutine(ManipulateUV()); when you want to fade out after or while you are scaling up. It is untested code, so let me know if there is an issue, but I hope you get the idea. The above will move the sprite's texture coordinates towards the center of the sprite on the texture over the period of 2 seconds and when its finished, the sprite renderer will disable and the uv coordinates will go back to normal for your next effect. One issue with this approach is that you won't be able to have 2 effects happening at once, but fading out at different times as this is changing the base texture coordinates and will affect all instances of the sprite
