Two color background

Question

I saw an interesting background on a game and I would like to know how it is made and how can I implement it to my own application.

Here we can see the background. Yellow on the top, blue on the bottom. This is not a simple image, cuz during the gameplay the colors change like a transition.

Also, how can I make a cube look faded like the 1st one from the bottom?

Thanks in advance.

Answer 1

Using a simple 2x1 sized texture, you could achieve a similar effect.

Put a canvas (in Camera world, quite far from your camera) with a raw image taking the whole screen.

Then, create a script with the following code :

public UnityEngine.UI.RawImage img;

private Texture2D backgroundTexture ;

void Awake()
{
    backgroundTexture  = new Texture2D(1, 2);
    backgroundTexture.wrapMode = TextureWrapMode.Clamp;
    backgroundTexture.filterMode = FilterMode.Bilinear;
    SetColor( Color.black, Color.white ) ;
}

public void SetColor( Color color1, Color color2 )
{
    backgroundTexture.SetPixels( new Color[] { color1, color2 } );
    backgroundTexture.Apply();
    img.texture = backgroundTexture;
}

If you want to have a gradient with more colors, change the height of the created texture, and change a little bit the SetColor` function.

Else, I found this Git repository with a cusztom Skybox gradient shader :

https://github.com/keijiro/UnitySkyboxShaders

Paid solution, this asset seems to be what you want : https://www.assetstore.unity3d.com/en/#!/content/37726

Answer 2

One way to achieve the gradient background is through the use of a skybox. I can also vouch for Marvelous Techniques (MT), for which Hellium also provided a link in their answer. It does cost money, and you won't learn much in the process, of course. But if your main goal is to only have what you see in the picture, MT should get you there.

And to answer your second question, shaders. There was a recent blog post about creating a gradient shader very much like the one seen in the picture you have provided. The blog post walks you through the creation of the shader, and the full code for the shader is provided at the end of the post.