Search Unity

Creating a Gradient

Discussion in 'Scripting' started by Notter, Apr 1, 2015.

  1. Notter

    Notter

    Joined:
    Mar 8, 2015
    Posts:
    65
    I'm trying to create a gradient as background from a script.

    the unity documentation
    http://docs.unity3d.com/ScriptReference/Gradient.html
    tells us to use SetKeys(), but when i try that code, gradient does not have SetKeys

    also, they don't even have that page in C#..

    anywhere with a better explanation?

    also, my goal is, as i said, is to have a gradient as background for a 2D game, that changes from looking like morning to a dark night.
    which object should i even use to change the color of?
    UI image?
    Sprite?
    Texture2D?
     
    Last edited: Apr 1, 2015
  2. StarManta

    StarManta

    Joined:
    Oct 23, 2006
    Posts:
    8,775
    My recommendation would be to use a simple plane, with four vertices, and a shader that supports vertex colors. You'd change the top vertices to one color and the bottom vertices to another color, and let the shader take care of the rest. (I don't recall offhand which shaders support vertex colors, sorry) This can be done through the Mesh API.

    Code would look something like this, at its very simplest:
    Code (csharp):
    1.  
    2. public Color colorTop = Color.white;
    3. public Color colorBottom = Color.black;
    4. void Update() {
    5. MeshFilter thisMeshFilter = GetComponent<MeshFilter>();
    6. thisMeshFilter.mesh.colors = new Color[]{colorTop, colorTop, colorBottom, colorBottom};
    7. }
    8.  
    Put this script on an object with a single quad as its mesh (the Create -> Quad object should work), and resize that quad to be the size background you need. You may need to rotate the quad or change the order of the top and bottom colors in that array, I'm not certain how those are arranged.

    Alternately, you could create a Texture2D, but I would recommend not using any gradients in the texture itself - make it a 2x2 texture and let the shader's interpolation make it look like a gradient. This would be done through the Texture2D's SetColors function.
     
    Notter likes this.
  3. Notter

    Notter

    Joined:
    Mar 8, 2015
    Posts:
    65
    Thanks for helping, but using quads/planes/shaders is completely new to me, so far I've worked only with sprites and UI

    this is what i did so far:

    quadPlane.JPG

    so I've created a quad, put a plane on it, and gave the plane the gradient script.
    I also tried giving the quad the script.
    And also, can't choose a shader in either, it's grayed out.

    And, as a side question, everything i've done so far is 2D, aren't these objects 3D?
     
  4. Notter

    Notter

    Joined:
    Mar 8, 2015
    Posts:
    65
    Alright, so an update, from what i managed so far..
    i removed the Plane object, and just used a Quad
    I've rotated the Quad so the gradient will be Top to Bottom.
    And i gave it the script you've provided

    although, i've change it to
    Code (csharp):
    1. thisMeshFilter.mesh.colors = new Color[] { colorTop, colorTop, colorBottom, colorTop };
    cause otherwise, the top and bottom would have one color, and the middle another.

    Then i created a Material, and selected Sprites/Default as a Shader

    gradientquad.JPG
    Is this the way to do it, or am i doing something wrong / could i do something better?