- Home /
Gradient background
Hello guys,
I want to achieve gradient backgrounds (linear and radial) with colors that are changeable from script. These backgrounds do not neccessarily need to be 3D backgrounds.. I want something similar to after effects like when you have a 3D scene but with a 2D background that does not change with the camera movement. Is this even possible? Could you lead me to the right direction, please? It is for a scene that focuses on the objects. A camera can rotate around these objects and I want to have nicely colored backgrounds. I thought of a radial (or linear) alpha texture that I would blend with a solid color plane but I don't know how to begin as I am new to procedural textures.
Do you think working with skyboxes would be easier in this case? How would I achieve transition-free gradients then?
Thanks in advance!
Ok, I found this thread which clarifies the 2D-background image issue: http://answers.unity3d.com/questions/9729/how-can-i-display-a-flat-background-2d-image-not-a.html
Not the only question left is how I can generate gradient background texture during runtime.
Answer by robertbu · Apr 26, 2014 at 05:30 PM
As with most things in Unity, there are a variety of ways of creating gradients.
1) From a performance standpoint, the best way is probably a shader. Take a look at this package in the Asset Store:
https://www.assetstore.unity3d.com/#/content/9403
If you poke around you may be able to find free version of the two shaders you need.
2) If your gradients are one color...light to dark...you can use any shader that _Color property and a grayscale texture of the gradient.
3) For a horizontal or vertical gradient only, you can use vertex colors. Vertex colors require a shader that supports Vertex colors. Few of the shaders that come with Unity support vertex colors, but there are a number in the Unity Wiki. Or for an absolutely minimal shader you can use this one:
Shader "Custom/Vertex Colored" {
Properties {
}
SubShader {
Pass {
ColorMaterial AmbientAndDiffuse
}
}
}
Create Unity Quad (GameObject > CreateOther > Quad). Attach a material with a vertex shader to the quad and then attach this script:
#pragma strict
var startColor = Color.red;
var endColor = Color.blue;
function Start () {
var mesh = GetComponent(MeshFilter).mesh;
var colors = new Color[mesh.vertices.Length];
colors[0] = startColor;
colors[1] = endColor;
colors[2] = startColor;
colors[3] = endColor;
mesh.colors = colors;
}
4) You can create a procedural texture...that is generate the bitmap at runtime. Here is a link to get you started.
http://answers.unity3d.com/questions/589329/how-do-i-create-a-radial-gradient-texture-mask-usi.html
Thanks for the insight! I will check out some of these techniques.
How make disapear annoying log entry with this shader ? (shader wants tangents, wants texture coordinates and wants secondary texture coordinates) For easy thing I really regret opengl Begin / End...
Answer by Eric5h5 · Apr 26, 2014 at 05:41 PM
Creating a linear gradient as a texture is trivial...all you need is to make a two-pixel texture, using the two colors in the gradient, and make sure bilinear filtering is on. The bilinear filtering creates the gradient for you.
Thanks for this! Would it be possible to apply a similar concept to radial gradients?
Sort of...if you use a 3x3 texture and put a pixel with a different color in the middle, you get a star/diamond gradient shape. But not circular.
Eric5h5 - this works wonderfully,
How could I fade this imported image gradient, into another gradient.
A continuous loop of gradient (dark blue and $$anonymous$$l for example) fading slowly into another gradient (light blue and bright green).
Game slowly changes colors? Possible in C# ??
Answer by JaPete · May 02, 2017 at 08:14 AM
Eric5h5 - this works wonderfully,
How could I fade this imported image gradient, into another gradient.
A continuous loop of gradient (dark blue and teal for example) fading slowly into another gradient (light blue and bright green).
Game slowly changes colors? Possible in C# ??