Search Unity

Progress Bar / Slider gradient fill?

Discussion in 'UGUI & TextMesh Pro' started by Hichem_, Jul 7, 2019.

  1. Hichem_

    Hichem_

    Joined:
    Jun 18, 2019
    Posts:
    1
    Hello!
    This is the first time I'm posting here so I hope I'm in the correct place,
    I have this slider made into a progress bar:

    It fills with green, what I want to do is, fill the slider with 2 colors gradient, like this:


    Is there any way I can achieve this?
    Thanks
     
  2. Nikhil_Ghode

    Nikhil_Ghode

    Joined:
    Dec 11, 2019
    Posts:
    1
    mdrunk and childishgiant like this.
  3. gooby429

    gooby429

    Joined:
    Aug 13, 2019
    Posts:
    135
    I have an alternative solution if anyone is interested, basically the entire color will change based on the fill amount of the image using a gradient. I attached a gif of what it does and the code below :D hope it helps someone else

    Code (CSharp):
    1. using UnityEngine;
    2. using UnityEngine.UI;
    3.  
    4. [RequireComponent(typeof(Image))]
    5. [ExecuteInEditMode]
    6. public class ImageFillGradient : MonoBehaviour
    7. {
    8.  
    9.     [SerializeField] private Gradient _gradient = null;
    10.     [SerializeField] private Image _image = null;
    11.  
    12.     private void Awake()
    13.     {
    14.         _image = GetComponent<Image>();
    15.     }
    16.  
    17.     private void Update()
    18.     {
    19.         _image.color = _gradient.Evaluate(_image.fillAmount);
    20.     }
    21.  
    22. }
    23.  
     

    Attached Files:

    alexdove, WillDexaiArts and Deanford like this.
  4. Deanford

    Deanford

    Joined:
    Oct 17, 2014
    Posts:
    93
    Worked like a charm! Thank you! :D
     
  5. Knugke

    Knugke

    Joined:
    Jan 10, 2016
    Posts:
    3
    Thanks, this is great - exactly what I was looking for! I adjusted so it could take a Gradient instead of m_color1 and m_color2, so it evaluates the Gradient rather than Lerping between the two colors.
     
  6. rodroesteban

    rodroesteban

    Joined:
    May 14, 2019
    Posts:
    1
    Hi!
    How to create same gradient but with 4 colors?
     
  7. AJDB

    AJDB

    Joined:
    Aug 1, 2014
    Posts:
    16
    [ COTIZACIÓN = "gooby429, publicación: 7256963, miembro: 3544970" ] Tengo una solución alternativa si alguien está interesado, básicamente, todo el color cambiará en función del monto de relleno de la imagen utilizando un degradado. Adjunté un gif de lo que hace y el siguiente código :RE espero que ayude a alguien más

    [ SPOILER = "Código" ]
    [ código = CSharp ] usando UnityEngine;
    usando UnityEngine.UI;

    [ RequireComponent ( typeof ( Imagen ) ) ]
    [ ExecuteInEditMode ]
    clase pública ImageFillGradient: MonoBehavior
    {

    [ SerializeField ] gradiente privado _gradiente = nulo;
    [ SerializeField ] imagen privada _imagen = nulo;

    vacío privado Despierta ( )
    {
    _imagen = GetComponent < Imagen > ( );
    }

    actualización del vacío privado ( )
    {
    _image.color = _gradient.Evaluate ( _image.fillAmount );
    }

    }
    [ / código ]
    [ / SPOILER ] [ / COTE ]

    Hello, I have tried what you comment with the code, but it does not work for me. Could you explain better how you do it? where do you put the code and where do you drag the image from? Thank you