Let’s say you have a 3d game and would like to show the player’s progress in a more volumetric way, like inside the game but not from UI. While the player does their action, your progress bar could stay next to them enabling checking their progress in a more immersive way.

As a game developer, I have a tendency to obsess about one topic and keep experimenting. Very recently I made a tutorial video on sprite-based progress bars I use in my games and wondered what more kinds of progress bars could be made.

Shader Graph

This shader graph has 3 properties, FillColor, EmptyColor, and FillRate. FillColor is the color of fill, EmptyColor is the empty state color of the progress bar. Well, those variable names felt very self-explanatory. FillRate is a value between -0.51 and 0.51 making total value represented on progress bar 1.02. 0.01s are for preventing clippings on the sides.

Demo

The value of FillRate can be changed through code as well. In this demo ChangeValue function is added to buttons’ OnClick events. When they are clicked corresponding increase or decrease action is taken on the progress bar.

using UnityEngine;

public class ShaderGraphProgressBar : MonoBehaviour
{
float _FillRateValue = -0.51f; //progress bar starts empty
Material objectMaterial;

float stepSize = 0.1f; //progress is done by this value

// Start is called before the first frame update
void Start()
{
objectMaterial = new Material(Shader.Find("Shader Graphs/ProgressBarSingleAxis")); //creating a material with the shader
gameObject.GetComponent<Renderer>().material = objectMaterial; //new material is applied to the game object
objectMaterial.SetFloat("_FillRate", _FillRateValue); //initial value is set 
}


public void ChangeValue(bool increase) //enables changing the value of progress bar
{ //if increase param is true, the progress bar progresses otherwise it deprogresses
if (increase)
{
_FillRateValue += stepSize; //progress increased
}
else
{
_FillRateValue -= stepSize; //progress decreased
}
objectMaterial.SetFloat("_FillRate", _FillRateValue); //Update the value of the progress bar
}
}

Future Steps

https://medium.com/