Progress Bar / Slider gradient fill?

Unity Engine
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

GitHub - azixMcAze/Unity-UIGradient: A UI gradient effect script for Unity or if this site is not accessible then using System.Collections;using System.Collections.Generic;using UnityEngine; - Pastebin.com

u can use this script to make gradient effect on UI

2 Likes
3

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 :smile: hope it helps someone else

Code

using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(Image))]
[ExecuteInEditMode]
public class ImageFillGradient : MonoBehaviour
{

    [SerializeField] private Gradient _gradient = null;
    [SerializeField] private Image _image = null;

    private void Awake()
    {
        _image = GetComponent<Image>();
    }

    private void Update()
    {
        _image.color = _gradient.Evaluate(_image.fillAmount);
    }

}

7256963--875123--3a23eada02389cea38b6436c0457d038.gif

5 Likes
4

Worked like a charm! Thank you! :smile:

5

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

Hi!
How to create same gradient but with 4 colors?

7

[ 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